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

[type="checkbox" i]

Cosa isignifica?

Come menzionato nei commenti, è per la corrispondenza degli attributi 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 user-agent di Chrome a partire da Chrome 39, ma poteva essere abilitato per i contenuti web impostando il flag delle funzionalità sperimentali.

* Anche le versioni precedenti di Opera potrebbero 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:

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

Il quadrato sopra sarà verde se il browser supporta questa funzione, rosso se non la supporta.

Questo è il flag case-insensitive per i selettori di attributi, introdotto in Selectors 4 . Apparentemente hanno introdotto di nascosto questa funzione in Chrome già nell'agosto 2014.

In poche parole: questo flag indica al browser di abbinare i rispettivi valori per l' typeattributo senza distinzione tra maiuscole e minuscole. Il comportamento di corrispondenza del selettore predefinito per i valori degli attributi in HTML fa distinzione tra maiuscole e minuscole , il che è spesso indesiderabile perché molti attributi sono definiti per avere valori senza distinzione tra maiuscole e minuscole e vuoi assicurarti che il tuo selettore raccolga tutti gli elementi giusti indipendentemente dal caso. typeè un esempio di tale attributo, perché è un attributo enumerato e si dice che gli attributi enumerati abbiano valori senza distinzione tra maiuscole e minuscole .

Ecco i commit rilevanti:

• 179370 - implementazione
• 179401 - modifiche ai fogli di stile UA come mostrato nello screenshot nella domanda

Tieni presente che al momento è nascosto nel flag "Abilita funzionalità sperimentali della piattaforma web", a cui puoi accedere all'indirizzo chrome: // flags / # enable-experiment-web-platform-features. Questo potrebbe spiegare perché la funzionalità è passata in gran parte inosservata: le funzionalità nascoste dietro quella bandiera possono essere utilizzate solo internamente e non nel codice pubblico (come i fogli di stile dell'autore) a meno che non sia abilitata, perché sono sperimentali e quindi non pronte per l'uso in produzione.

Ecco un test case 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;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

Tieni presente che utilizzo un attributo di dati personalizzato invece di typemostrare che può essere utilizzato con quasi tutti gli attributi.

Non sono a conoscenza di altre implementazioni al momento della stesura di questo articolo, ma si spera che altri browser lo raggiungano presto. Questa è un'aggiunta relativamente semplice ma estremamente utile allo standard e non vedo l'ora di poterla utilizzare in futuro.