seleccionar - selectores css

¿Debo usar CSS: selector de atributo de pseudoclase desactivada o[inhabilitada] o es una cuestión de opinión?

Question

Estoy intentando diseñar una entrada deshabilitada. Puedo usar:

.myInput[disabled] { }

o

.myInput:disabled { }

¿El selector de atributos es la forma moderna de CSS3 y la forma de avanzar? Solía ​​usar la pseudoclase, pero no puedo encontrar ninguna información sobre si son antiguos y no serán compatibles o si ambos son iguales y puedes usar lo que más te guste.

No necesito apoyar navegadores más antiguos (es una aplicación de intranet), así es:

• atributo es más nuevo y mejor
• pseudo-clase sigue siendo el camino a seguir
• lo que más te guste
• hay una razón técnica para usar uno sobre el otro

Answer 1

¿El selector de atributos es la forma moderna de CSS3 y la forma de avanzar?

• atributo es más nuevo y mejor

No; en realidad, los selectores de atributos han existido desde CSS2 , y el atributo disabled sí mismo existe desde HTML 4 . Por lo que sé, la :disabled se introdujo en Selectors 3 , lo que hace que la pseudoclase sea más nueva.

• hay una razón técnica para usar uno sobre el otro

Sí, hasta cierto punto.

Con un selector de atributos, confía en el conocimiento de que el documento que está diseñando hace uso de un atributo disabled para indicar campos deshabilitados. Teóricamente, si diseñaba algo que no era HTML, los campos deshabilitados podrían no representarse utilizando un atributo disabled , por ejemplo, podría estar enabled="false" o algo así. Incluso las futuras ediciones de HTML podrían presentar nuevos elementos que hagan uso de diferentes atributos para representar el estado habilitado / deshabilitado; esos elementos no coincidirían con el selector de atributos [disabled] .

La :disabled pseudo-clase :disabled desacopla el selector del documento con el que está trabajando. La especificación simplemente indica que se dirige a los elementos que están deshabilitados, y que si un elemento está habilitado, deshabilitado o ninguno, se define por el idioma del documento en su lugar :

Lo que constituye un estado habilitado, un estado desactivado y un elemento de interfaz de usuario depende del idioma. En un documento típico, la mayoría de los elementos no estarán ni :enabled ni :disabled .

En otras palabras, cuando utiliza la pseudoclase, el UA calcula automáticamente qué elementos coincidir según el documento que está diseñando, por lo que no tiene que decir cómo.

En términos del DOM, creo que establecer la propiedad disabled en un elemento DOM también modifica el atributo disabled del elemento HTML, lo que significa que no hay diferencia entre ninguno de los selectores con la manipulación del DOM. No estoy seguro de si esto depende del navegador, pero aquí hay un violín que lo demuestra en las últimas versiones de todos los principales navegadores:

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

Lo más probable es que esté diseñando HTML, por lo que nada de esto puede hacer ninguna diferencia para usted, pero si la compatibilidad del navegador no es un problema, elegiría :enabled y :disabled por :not([disabled]) y [disabled] simplemente porque las pseudo-clases tienen semántica que el selector de atributos no tiene. Soy un purista como ese.

Answer 2

Resulta que Internet Explorer 10 y 11 no reconocen la pseudoclase :disabled en algunos elementos y solo funciona bien con la sintaxis del selector de atributos.

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

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

El código recortado anteriormente se representa en IE de esta manera:

Mientras solo diseñe elementos de input , debería estar bien de cualquier manera. Aún así, es un buen consejo probar el resultado final en todos los navegadores que desee.