Was bedeutet "i" in einem CSS-Attributselektor?

96

Ich habe den folgenden CSS-Selektor im Google Chrome-User-Agent-Stylesheet gefunden:

%Vor%

Was bedeutet i ?

    
AntiCZ 16.12.2014, 14:19
quelle

2 Antworten

113

Wie in den Kommentaren erwähnt, ist es für die Unterscheidung von Groß- und Kleinschreibung nicht relevant. Dies ist eine neue Funktion in CSS Selectors Level 4.

Gegenwärtig ist es in Chrome 49+, Firefox 47+, Safari 9+ und Opera 37 + * verfügbar. Zuvor war es nur in den Chrome-User-Agent-Stilen ab Chrome 39 verfügbar, konnte aber für Webinhalte aktiviert werden, indem das Flag für experimentelle Features festgelegt wurde.

* Frühere Versionen von Opera können dies ebenfalls unterstützen.

Arbeitsbeispiel / Browser Test:

%Vor% %Vor%

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

    
Alexander O'Mara 16.12.2014, 14:43
quelle
33

Dies ist die Groß- / Kleinschreibung für Attributselektoren, die in Selektoren 4 eingeführt wurden. Anscheinend haben sie bereits im August 2014 eine Implementierung dieses Features in Chrome eingeführt.

Kurz gesagt: Dieses Flag weist den Browser an, die entsprechenden Werte für das type -Attribut unabhängig von der Groß- und Kleinschreibung zu berücksichtigen. Das standardmäßige Selektor-Übereinstimmungsverhalten für Attributwerte in HTML ist Groß- und Kleinschreibung ist oft unerwünscht, weil viele Attribute so definiert sind, dass sie die Groß- und Kleinschreibung nicht berücksichtigen, und Sie möchten sicherstellen, dass Ihr Selektor unabhängig von der Groß- / Kleinschreibung alle richtigen Elemente aufruft. type ist ein Beispiel für ein solches Attribut, weil ein enumeriertes Attribut Aufzählungsattribute sollen die Groß- / Kleinschreibung nicht berücksichtigen .

Hier sind die relevanten Commits:

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

Beachten Sie, dass es momentan im Flag "Enable experimental Web Platform features" versteckt ist, auf das Sie unter chrome: // flags / # enable-experimental-web-platform-features zugreifen können. Dies könnte erklären, warum das Feature weitgehend unbemerkt blieb - Features, die hinter diesem Flag versteckt sind, können nur intern und nicht in öffentlichem Code (wie Autoren-Stylesheets) verwendet werden, es sei denn, sie sind experimentell und daher nicht für den produktiven Einsatz bereit.

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

%Vor% %Vor%

Beachten Sie, dass ich ein benutzerdefiniertes Datenattribut anstelle von type verwende, um zu zeigen, dass es mit fast jedem Attribut verwendet werden kann.

Ich bin mir zu diesem Zeitpunkt noch keiner anderen Implementierung bewusst, aber hoffentlich werden andere Browser bald aufholen. Dies ist eine relativ einfache, aber äußerst nützliche Ergänzung des Standards und ich freue mich darauf, sie in Zukunft verwenden zu können.

    
BoltClock 20.01.2015 16:33
quelle

Tags und Links