Devo usare CSS: disabilitato pseudo-class o [disabilitato] selettore di attributi o è una questione di opinione?

Question

Sto provando a scrivere un input disabilitato. Posso usare:

.myInput[disabled] { } 

o

.myInput:disabled { } 

è l'attributo selettore il modo CSS3 moderno e il modo di andare avanti? Usavo la pseudo-classe, ma non riesco a trovare alcuna informazione sul fatto che siano alla vecchia maniera e non saranno supportati o se sono entrambi uguali e puoi usare quello che ti piace di più.

non ho necessità di sostenere i vecchi browser (è un'applicazione intranet), così è:

attributo

• è più recente e migliore
• pseudo-classe è ancora la strada da percorrere
• qualunque ti piace di più
• c'è una ragione tecnica per utilizzare uno sopra l'altro

Answer 1

Il selettore degli attributi è il modo in cui i CSS3 sono moderni e il modo di procedere? attributo

• è più recente e migliore

No; in realtà, i selettori di attributo sono disponibili dal CSS2 e l'attributo disabled esiste già dal HTML 4. Per quanto ne so, la pseudo-classe :disabled è stata introdotta in Selectors 3, il che rende la pseudo-classe più recente.

• c'è una ragione tecnica per utilizzare uno sopra l'altro

Sì, in una certa misura.

Con un selettore di attributo, si sta facendo affidamento sulla consapevolezza che il documento che si sta utilizzando fa uso di un attributo disabled per indicare campi disabilitati. Teoricamente, se stavi disegnando qualcosa che non era HTML, i campi disabilitati potrebbero non essere rappresentati usando un attributo disabled, ad es. potrebbe essere enabled="false" o qualcosa del genere. Anche le future edizioni di HTML potrebbero introdurre nuovi elementi che fanno uso di attributi diversi per rappresentare lo stato abilitato/disabilitato; tali elementi non corrisponderebbero al selettore di attributo [disabled].

La pseudo-classe :disabled disaccoppia il selettore dal documento con cui si sta lavorando. Le specifiche afferma semplicemente che esso si rivolge elementi che sono disabili, e che se un elemento è attivato, disattivato, o nessuno dei due, è defined by the document language instead:

Ciò che costituisce uno stato abilitato, uno stato disabilitato, e un elemento di interfaccia utente è dipendenti dalla lingua.In un documento tipico la maggior parte degli elementi non sarà né :enabled né :disabled.

In altre parole, quando si utilizza la pseudo-classe, l'UA individua automaticamente gli elementi da abbinare in base al documento che si sta stilando, quindi non è necessario indicarlo.

In termini di DOM, Credo che impostando la proprietà disabled su un elemento DOM modifica anche attributo dell'elemento HTML disabled, che significa che non c'è differenza tra una selettore con la manipolazione DOM. Non sono sicuro se questo è il browser-dipendente, ma here's a fiddle che dimostra nelle ultime versioni di tutti i principali browser:

// The following statement removes the disabled attribute from the first input 
document.querySelector('input:first-child').disabled = false; 

si è più probabile che sarà styling HTML, quindi nessuno di questo può fare qualsiasi differenza per te, ma se la compatibilità del browser non è un problema, sceglierei :enabled e :disabled su :not([disabled]) e [disabled] semplicemente perché le pseudo-classi contengono semantica che il selettore di attributo non ha. Sono un purista del genere.

Answer 2

Si scopre che Internet Explorer 10 e 11 non riconosce la pseudoclass :disabled su alcuni elementi e funziona correttamente solo con la sintassi del selettore di attributo.

#test1:disabled { color: graytext; } 
 
#test2[disabled] { color: graytext; }

<form> 
 
<fieldset id="test1" disabled>:disabled</fieldset> 
 
<fieldset id="test2" disabled>[disabled]</fieldset> 
 
</form>

Il codice snipped sopra rende in IE come questo:

Finché si sta styling solo input elementi, si dovrebbe andare bene in entrambi i casi. Comunque è un buon consiglio per testare il risultato finale in tutti i browser che desideri supportare.