¿Debo usar CSS: disabled pseudo-class o [disabled] attribute selector o es una cuestión de opinión?

Estoy tratando de estilizar una entrada deshabilitada. Puedo usar:

.myInput[disabled] { }

O

.myInput:disabled { }

¿Es el selector de atributos la forma moderna de CSS3 y la forma de avanzar? Solía usar la pseudo-clase, pero no puedo encontrar ninguna información sobre si son la antigua forma y no serán compatibles o si ambos son iguales y se puede utilizar lo que más te guste.

No tengo necesidad de soportar navegadores antiguos (es una aplicación de intranet), así que es:

  • el 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
Author: Charles, 2013-11-22
Source

2 answers

¿Es el selector de atributos la forma moderna de CSS3 y la forma de avanzar?

  • el atributo es más nuevo y mejor

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

  • hay un razón técnica para utilizar uno sobre el otro

Sí, hasta cierto punto.

Con un selector de atributos, usted está confiando en el conocimiento de que el documento que está diseñando hace uso de un atributo disabled para indicar los campos deshabilitados. Teóricamente, si estuviera diseñando algo que no fuera HTML, los campos deshabilitados podrían no representarse usando un atributo disabled, por ejemplo, podría ser enabled="false" o algo así. Incluso futuras ediciones de HTML podrían introducir nuevos elementos que utilice diferentes atributos para representar el estado habilitado / deshabilitado; esos elementos no coincidirían con el selector de atributos [disabled].

La 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 de los dos, está definido por el lenguaje del documento en su lugar :

Qué constituye un estado habilitado, un estado deshabilitado y un el elemento de la interfaz de usuario depende del idioma. En un documento típico, la mayoría de los elementos no serán :enabled ni :disabled.

En otras palabras, cuando se utiliza la pseudo-clase, la UA calcula automáticamente qué elementos para coincidir en función del documento que está estilizando, por lo que no tiene que decirle 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 selector con manipulación 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 navegadores principales: 

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

Lo más probable es que vaya a estilizar 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 sobre :not([disabled]) y [disabled] simplemente porque las pseudo-clases llevan semántica que el selector de atributos no. Soy un purista como que.

 61
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-22 14:41:52

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 renderiza en IE de la siguiente manera:

Mientras solo estés estilizando elementos input, deberías estar bien de cualquier manera. Todavía es un buen consejo para probar el resultado final en todos los navegadores que desea apoyar.

 14
Author: GOTO 0,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-31 13:21:22