Was bedeutet "i" in einem CSS-Attributselektor?

112

Ich habe die folgende CSS-Auswahl im Stylesheet des Google Chrome-Benutzeragenten gefunden:

[type="checkbox" i]

Was bedeutet das i?

AntiCZ
quelle
1
@Alexander O'Mara: Selectors Level 4 ist Teil von CSS3 - es ist nur die nächste Level eines Moduls, das mit Level 3 begann. "CSS4" ist eine Fehlbezeichnung.
BoltClock
2
@ Alexander O'Mara: Ich würde gerne sehen, wie es auf Meta gebracht wird. Insbesondere würde ich gerne wissen, wie wir mit der Verwendung des [css4] -Tags umgehen können - die drastischste Maßnahme, die ich ergreifen könnte, ist, es zu einem Synonym für [css3] zu machen, und das wäre tatsächlich das Richtige.
BoltClock
1
@ BoltClock Meta Frage ist da! Übrigens, wenn Sie nach dem Zusammenführen Ihrer Antwort mit dieser Frage fragen, meinten Sie damit, die Frage / Antwort hier zu bearbeiten, um die Informationen hinzuzufügen, oder haben Sie sich auf eine magische Schaltfläche zum Verschieben und Beantworten einer anderen Frage bezogen?
Alexander O'Mara
1
@ Alexander O'Mara: Keine einzelnen Antworten bewegen, sondern zwei ganze Fragen kombinieren. Es ist eine reine Mod-Funktion.
BoltClock
1
@ TylerH Wir haben eine Diskussion über Meta zu diesem Thema . Fühlen Sie sich frei, die Diskussion dort hinzuzufügen.
Alexander O'Mara

Antworten:

132

Wie in den Kommentaren erwähnt, wird der Attributabgleich nicht zwischen Groß- und Kleinschreibung unterschieden. Dies ist eine neue Funktion in CSS Selectors Level 4.

Derzeit ist es in Chrome 49+, Firefox 47+, Safari 9+ und Opera 37 + * verfügbar. Zuvor war es nur in den Chrome-Benutzeragentenstilen ab Chrome 39 verfügbar, konnte jedoch durch Setzen des Flags für experimentelle Funktionen für Webinhalte aktiviert werden.

* Frühere Versionen von Opera unterstützen dies möglicherweise ebenfalls.

Arbeitsbeispiel / Browsertest:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}
Green if supported, red if not:

<div data-test="A"></div>

Das obige Quadrat ist grün, wenn der Browser diese Funktion unterstützt, rot, wenn dies nicht der Fall ist.

Alexander O'Mara
quelle
6
Danke fürs Unterrichten! Viel Spaß mit deinem neuen Hut. Funktioniert so etwas in Selektorbibliotheken? Welche Art von Browser-Unterstützung hat es?
Benjamin Gruenbaum
1
@BenjaminGruenbaum Es sieht so aus, als ob es nur in Chrome User-Agent-Stilen verfügbar ist (zumindest noch nicht das CSS einer Website). Ich konnte keine offizielle Kompatibilitätsdokumentation finden.
Alexander O'Mara
(Ich reposte meinen früheren Kommentar jetzt, da die Fragen zusammengeführt wurden.) Es ist nicht ganz überraschend, dass brandneue, experimentelle Standards wie dieser schlecht dokumentiert sind. Meine Antwort enthält jedoch einige weitere Informationen dazu, nämlich wie es funktioniert, warum es verwendet wird und wie es in Chrome implementiert ist (wie in der Frage angegeben).
BoltClock
Chrome wird dies in Version 49.0 (derzeit in der Beta) und Firefox in Version 47.0 (voraussichtlich im Juni 2016 veröffentlicht) unterstützen. Quelle: developer.mozilla.org/en-US/docs/Web/CSS/…
Miscreant
1
@LWChris: Ich bin nicht sicher, ob ein solcher Browser tatsächlich existiert. IE6 versteht Attributselektoren überhaupt nicht und IE7 unterstützt sie auch mit benutzerdefinierten Datenattributen.
BoltClock
36

Dies ist das in Selektoren 4 eingeführte Flag, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird . Anscheinend haben sie bereits im August 2014 eine Implementierung dieser Funktion in Chrome integriert.

Kurz gesagt: Dieses Flag weist den Browser an, die jeweiligen Werte für das typeAttribut ohne Berücksichtigung der Groß- und Kleinschreibung zu berücksichtigen. Das Standardverhalten für die Auswahl von Selektoren für Attributwerte in HTML unterscheidet zwischen Groß- und Kleinschreibung . Dies ist häufig unerwünscht, da für viele Attribute Werte ohne Berücksichtigung der Groß- und Kleinschreibung definiert sind und Sie sicherstellen möchten, dass Ihr Selektor unabhängig von der Groß- und Kleinschreibung alle richtigen Elemente aufnimmt. typeist ein Beispiel für ein solches Attribut, da es sich um ein aufgezähltes Attribut handelt und bei aufgezählten Attributen Werte angegeben werden, bei denen die Groß- und Kleinschreibung nicht berücksichtigt wird .

Hier sind die relevanten Commits:

  • 179370 - Umsetzung
  • 179401 - Änderungen an UA-Stylesheets, wie im Screenshot in der Frage gezeigt

Beachten Sie, dass es derzeit im Flag "Experimentelle Webplattform-Funktionen aktivieren" versteckt ist, auf das Sie unter chrome: // flags / # enable-experimental-web-platform-features zugreifen können. Dies könnte erklären, warum die Funktion weitgehend unbemerkt blieb - Funktionen, die hinter diesem Flag verborgen sind, können nur intern und nicht in öffentlich zugänglichem Code (z. B. Autoren-Stylesheets) verwendet werden, sofern sie nicht aktiviert sind, da sie experimentell sind und daher nicht für die Produktion bereit sind.

Hier ist ein Testfall, den Sie verwenden können - vergleichen Sie die Ergebnisse, wenn das Flag aktiviert und deaktiviert ist:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}
<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

Beachten Sie, dass ich ein benutzerdefiniertes Datenattribut verwende, anstatt typezu zeigen, dass es mit nahezu jedem Attribut verwendet werden kann.

Zum jetzigen Zeitpunkt sind mir keine weiteren Implementierungen bekannt, aber hoffentlich werden andere Browser bald aufholen. Dies ist eine relativ einfache, aber äußerst nützliche Ergänzung zum Standard, und ich freue mich darauf, ihn in Zukunft verwenden zu können.

BoltClock
quelle
Ich habe "an diesem Nachmittag" Müdigkeit ... Nachdem ich die W3-Spezifikation gelesen habe, verstehe ich immer noch nicht ganz, was wäre eine praktische Anwendung in CSS dafür?
Matt
2
@Matt: Bei der Zuordnung von Attributselektoren wird zwischen Groß- und Kleinschreibung unterschieden, wie in HTML5 angegeben. Dies ist in vielen Fällen unerwünscht, da HTML5 für bestimmte Attribute Werte ohne Berücksichtigung der Groß- und Kleinschreibung zulässt. Mit diesem Flag können Sie sicherstellen, dass Sie unabhängig vom Fall die richtigen Elemente auswählen. Zum Beispiel können Sie im Screenshot sehen, dass es sucht input[type="search" i], was mit Elementen wie übereinstimmt <input type="SEARCH">.
BoltClock
1
Ich kann bestätigen, dass es mit Chromium Version 43.0.2357.130 funktioniert und "Experimentelle Webplattform-Funktionen aktivieren" aktiviert ist.
Robert Siemer