web-dev-qa-db-fra.com

Dois-je utiliser CSS: pseudo-classe désactivée ou sélecteur d'attribut [désactivé] ou est-ce une question d'opinion?

J'essaie de styliser une entrée désactivée. Je peux utiliser:

.myInput[disabled] { }

ou

.myInput:disabled { }

Le sélecteur d'attributs est-il la voie CSS3 moderne et la voie à suivre? J'avais l'habitude d'utiliser la pseudo-classe, mais je ne trouve aucune information pour savoir si elles sont à l'ancienne et ne seront pas prises en charge ou si elles sont toutes les deux égales et vous pouvez utiliser ce que vous préférez.

Je n'ai pas besoin de prendre en charge les anciens navigateurs (c'est une application intranet), il en est de même:

  • l'attribut est plus récent et meilleur
  • la pseudo-classe est encore le chemin à parcourir
  • celui que vous préférez
  • il y a une raison technique d'utiliser l'un sur l'autre
csscss3css-selectorspseudo-classdisabled-input
56
Peter

Le sélecteur d'attributs est-il la voie CSS3 moderne et la voie à suivre?

  • l'attribut est plus récent et meilleur

Non; en fait, les sélecteurs d'attributs existent depuis CSS2 , et l'attribut disabled lui-même existe depuis HTML 4 . Pour autant que je sache, la pseudo-classe :disabled A été introduite dans Selectors , 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'attributs, vous vous fiez à la connaissance que le document que vous stylisez utilise un attribut disabled pour indiquer les champs désactivés. Théoriquement, si vous stylisez quelque chose qui n'est pas HTML, les champs désactivés peuvent ne pas être représentés à l'aide d'un attribut disabled, par exemple ce pourrait être enabled="false" ou quelque chose comme ça. Même les futures éditions de HTML pourraient introduire de nouveaux éléments qui utilisent différents attributs pour représenter l'état activé/désactivé; ces éléments ne correspondraient pas au sélecteur d'attribut [disabled].

La pseudo-classe :disabled Dissocie le sélecteur du document avec lequel vous travaillez. La spécification indique simplement qu'elle cible les éléments qui sont désactivés et que si un élément est activé, désactivé ou aucun des deux, c'est défini par le langage du document à la place :

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 typique, la plupart des éléments ne seront ni :enabled Ni :disabled.

En d'autres termes, lorsque vous utilisez la pseudo-classe, l'AU détermine automatiquement les éléments à associer en fonction du document que vous stylisez, vous n'avez donc pas à lui dire comment.

En termes de DOM, je crois que la définition de la propriété disabled sur un élément DOM modifie également l'attribut disabled de l'élément HTML, ce qui signifie qu'il n'y a aucune différence entre l'un ou l'autre sélecteur avec la manipulation DOM. Je ne sais pas si 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 attribute from the first input
document.querySelector('input:first-child').disabled = false;

Vous allez très probablement styliser 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 Plutôt que :not([disabled]) et [disabled] simplement parce que les pseudo-classes portent une sémantique que le sélecteur d'attribut n'a pas. Je suis un puriste comme ça.

63
BoltClock

Il s'avère qu'Internet Explorer 10 et 11 ne reconnaissent pas le :disabled pseudoclass sur certains éléments et ne fonctionne correctement qu'avec la syntaxe du sélecteur d'attribut.

#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }
<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>

Le code coupé ci-dessus s'affiche en IE comme ceci:

Tant que vous ne stylisez que des éléments input, tout devrait bien se passer. C'est toujours un bon conseil pour tester le résultat final dans tous les navigateurs que vous souhaitez prendre en charge.

14
GOTO 0