Was bedeutet "i" in einem CSS-Attributselektor?</p> <pre><code>[type="checkbox" i] </code></pre> <p>Was bedeutet die <code>i</code> bedeuten:

Question

Ich habe den folgenden CSS-Selektor in dem Google Chrome-User-Agenten Sheet gefunden?

Answer 1

Wie in den Kommentaren erwähnt, ist es für Groß- und Kleinschreibung Attribut Anpassung. This is a new feature 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 verfügbar, die mit Chrome 39 begannen, konnte aber für Webinhalte aktiviert werden, indem das Flag für experimentelle Features festgelegt wurde.

* Frühere Versionen von Opera können es auch unterstützen.

Arbeitsbeispiel/Browser-Test:

[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 wird über Platz grün sein, wenn der Browser diese Funktion unterstützt, rot, wenn dies nicht der Fall.

Answer 2

Das ist die Groß-und Kleinschreibung für Attribut-Selektoren, eingeführt in Selectors 4. Offensichtlich schlich sie eine Implementierung dieser Funktion in Chrome bereits im August 2014.

Kurz gesagt: dieses Flag weist den Browser an, die entsprechenden Werte für das type Attribut case-insensitiv zu entsprechen. Das Standardselektor-Anpassungsverhalten für Attributwerte in HTML ist case-sensitive, was oft unerwünscht ist, da viele Attribute so definiert sind, dass sie die Groß- und Kleinschreibung nicht berücksichtigen, und Sie sicherstellen möchten, dass Ihr Selektor unabhängig von der Groß-/Kleinschreibung alle richtigen Elemente aufgreift. type ist ein Beispiel für ein solches Attribut, weil it is an enumerated attribute und enumerated attributes are said to have case-insensitive values.

Hier sind die entsprechenden Commits:

• 179370 - Implementierung
• 179401 - Änderungen an UA Sheets wie im Screenshot in der

Hinweis Frage gezeigt, dass es innerhalb der zur Zeit versteckt " Aktivieren Sie experimentelle Web Platform-Features, die Sie unter chrome: // flags/# enable-experimental-web-platform-features aufrufen 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 geeignet.

Hier ist ein Testfall, die Sie verwenden können - die Ergebnisse vergleichen, 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>

Bitte beachte, dass ich ein benutzerdefinierten Daten verwende Attribut statt type zu zeigen dass es mit fast jedem Attribut verwendet werden kann.

Mir sind keine anderen Implementierungen bekannt, 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.