Cosa significa “i” in un selettore di attributi CSS?

Ho trovato il seguente selettore CSS nel foglio di stile dell’agente utente di Google Chrome:

[type="checkbox" i] 

Cosa intendo?

Come menzionato nei commenti, è per la corrispondenza dell’attributo senza distinzione tra maiuscole e minuscole. Questa è una nuova funzionalità in CSS Selectors Level 4.

Attualmente è disponibile in Chrome 49+, Firefox 47+, Safari 9+ e Opera 37 + *. In precedenza, era disponibile solo negli stili utente-utente di Chrome a partire da Chrome 39, ma poteva essere abilitato per i contenuti Web impostando il flag delle funzionalità sperimentali.

* Le versioni precedenti di Opera potrebbero anche supportarlo.

Esempio di lavoro / Test del browser:

 [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: 

Questo è il flag senza distinzione tra maiuscole e minuscole per selettori di attributi, introdotto in Selettori 4 . Apparentemente hanno introdotto un’implementazione di questa funzione in Chrome già nell’agosto 2014.

In poche parole: questo flag indica al browser di far corrispondere i rispettivi valori per l’attributo type modo insensibile. Il comportamento di selezione del selettore predefinito per i valori degli attributi in HTML è sensibile al maiuscolo / minuscolo , che è spesso indesiderabile perché molti attributi sono definiti con valori non sensibili alle maiuscole e minuscole e si desidera assicurarsi che il selettore prelevi tutti gli elementi giusti indipendentemente dal caso. type è un esempio di tale attributo, poiché è un attributo enumerato e gli attributi enumerati hanno valori non sensibili al maiuscolo / minuscolo .

Ecco i commit rilevanti:

  • 179370 – implementazione
  • 179401 – cambia i fogli di stile UA come mostrato nello screenshot nella domanda

Nota che al momento è nascosto all’interno del flag “Abilita le funzionalità della piattaforma Web sperimentale”, a cui puoi accedere su chrome: // flags / # enable-experimental-web-platform-features. Questo potrebbe spiegare perché la funzione è passata in gran parte inosservata – le funzionalità nascoste dietro quel flag possono essere utilizzate solo internamente e non nel codice pubblico (come i fogli di stile dell’autore) a meno che non sia abilitato, perché sono sperimentali e quindi non sono pronte per l’uso di produzione.

Ecco un test che puoi utilizzare: confronta i risultati quando il flag è abilitato e disabilitato:

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