Dois-je utiliser CSS: le sélecteur d’atsortingbut désactivé de pseudo-classe ou ou est-ce une question d’opinion?

J’essaie de styler une entrée désactivée. Je peux utiliser:

.myInput[disabled] { } 

ou

 .myInput:disabled { } 

Le sélecteur d’atsortingbut est-il le moyen CSS3 moderne et la manière d’aller de l’avant? J’avais l’habitude d’utiliser la pseudo-classe, mais je n’arrive pas à trouver si elles sont anciennes et si elles ne sont pas supscopes ou si elles sont toutes les deux égales et que vous pouvez utiliser ce que vous voulez.

Je n’ai pas besoin de prendre en charge les anciens navigateurs (c’est une application intranet), tout comme:

  • atsortingbut est plus récent et mieux
  • la pseudo-classe est toujours la voie à suivre
  • quel que soit votre choix
  • il y a une raison technique d’utiliser l’un sur l’autre

Le sélecteur d’atsortingbut est-il le moyen CSS3 moderne et la manière d’aller de l’avant?

  • atsortingbut est plus récent et mieux

Non; en fait, les sélecteurs d’atsortingbuts existent depuis CSS2 , et l’atsortingbut disabled lui-même existe depuis HTML 4 . Autant que je sache, la pseudo-classe :disabled été introduite dans Selectors 3 , ce qui rend la pseudo-classe plus récente.

  • il y a une raison technique d’utiliser l’un sur l’autre

Oui, dans une certaine mesure.

Avec un sélecteur d’atsortingbut, vous devez savoir que le document que vous stylez utilise un atsortingbut disabled pour indiquer les champs désactivés. Théoriquement, si vous stylisiez quelque chose qui n’était pas HTML, les champs désactivés pourraient ne pas être représentés en utilisant un atsortingbut disabled , par exemple, il pourrait être enabled="false" ou quelque chose comme ça. Même les éditions futures de HTML pourraient introduire de nouveaux éléments utilisant différents atsortingbuts pour représenter l’état activé / désactivé; ces éléments ne correspondraient pas au sélecteur d’atsortingbut [disabled] .

La pseudo-classe :disabled sépare le sélecteur du document avec lequel vous travaillez. La spécification indique simplement qu’elle cible les éléments désactivés et que le fait qu’un élément soit activé, désactivé ou n’est pas défini par la langue du document :

Ce qui constitue un état activé, un état désactivé et un élément d’interface utilisateur dépend de la langue. Dans un document type, la plupart des éléments ne seront ni :enabled ni :disabled .

En d’autres termes, lorsque vous utilisez la pseudo-classe, l’agent d’utilisateur détermine automatiquement les éléments à associer en fonction du document que vous mettez en forme. Vous n’avez donc pas à le dire.

En termes de DOM, je pense que la définition de la propriété disabled sur un élément DOM modifie également l’atsortingbut disabled l’élément HTML, ce qui signifie qu’il n’y a aucune différence entre les deux sélecteurs et les manipulations DOM. Je ne suis pas sûr que cela dépend du navigateur, mais voici un violon qui le démontre dans les dernières versions de tous les principaux navigateurs:

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

Vous allez très probablement styler du HTML, donc rien de tout cela ne peut faire de différence pour vous, mais si la compatibilité du navigateur n’est pas un problème, je choisirais :enabled et :disabled sur :not([disabled]) et [disabled] simplement parce que les pseudo-classes ne comportent pas de sémantique. Je suis un puriste comme ça.

Il s’avère que Internet Explorer 10 et 11 ne parviennent pas à reconnaître la pseudo-classe :disabled sur certains éléments et ne fonctionne que très bien avec la syntaxe du sélecteur d’atsortingbut.

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