Che cosa significa "i" in un selettore di attributi CSS?

Question

ho trovato il seguente selettore CSS in Google Chrome user agent foglio di stile:

[type="checkbox" i] 

Cosa significa il i significa?

Answer 1

Come indicato nei commenti, spetta corrispondenza attributo case-insensitive. This is a new feature 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 possono anche supportarlo.

di lavoro Esempio di test/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>

La piazza di cui sopra sarà verde se il browser supporta questa funzione, rosso se non è così.

Answer 2

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

In breve: questo flag indica al browser di far corrispondere i rispettivi valori per l'attributo type in modo insensibile. Il comportamento di selezione del selettore predefinito per i valori degli attributi in HTML è case-sensitive, che è spesso indesiderabile perché molti attributi sono definiti con valori non sensibili alle maiuscole e minuscole e si desidera assicurarsi che il proprio selettore raccolga tutti gli elementi corretti indipendentemente dal caso. type è un esempio di tale attributo, perché it is an enumerated attribute e enumerated attributes are said to have case-insensitive values.

Ecco i commit rilevanti:

• 179370 - implementazione
• 179401 - modifiche ai fogli di stile UA come mostrato nello screenshot in questione

Si noti che è attualmente nascosto all'interno del " Abilita il flag "Funzionalità di piattaforma Web sperimentale" a cui è possibile accedere in 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 banco di prova che è possibile utilizzare - confrontare i risultati quando viene attivata e disattivata la bandiera:

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>

Nota che uso un dato attributo personalizzato invece di type per mostrare che può essere usato con praticamente qualsiasi attributo.

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