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

[type="checkbox" i]

Was bedeutet das i?

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.

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.