Sélecteurs d'attributs CSS : Les règles relatives aux guillemets (", ' ou aucun ?)

Question

Cette question me taraude depuis un certain temps déjà. Lorsque j'écris un sélecteur CSS qui compare avec l'attribut d'un élément, comme ceci.

a[rel="nofollow"]

Je ne sais jamais ce que je dois faire avec les guillemets. Sont-ils vraiment nécessaires ?

En fait, quelles sont les spécifications de ce produit, car je ne les trouve pas sur le site web.

Sont-elles toutes considérées comme valables ?

a[rel="nofollow"]
a[rel='nofollow']
a[rel=nofollow]

Answer 1

J'ai écrit plus longuement sur le sujet ici : Valeurs d'attributs non citées en HTML et CSS .

J'ai également créé un outil pour vous aider à répondre à votre question : http://mothereff.in/unquoted-attributes

Vous pouvez généralement omettre les guillemets tant que la valeur de l'attribut est alphanumérique (il y a toutefois quelques exceptions - voir l'article lié pour tous les détails). Quoi qu'il en soit, je trouve que c'est une bonne pratique d'ajouter les guillemets au cas où vous en auriez besoin. a[href^=http://] ne fonctionnera pas, mais a[href^="http://"] volonté.

L'article que j'ai mentionné renvoie aux chapitres appropriés de la spécification CSS.

Answer 2

Les valeurs des attributs doivent être des identifiants ou des chaînes de caractères.

- http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Les deux premiers utilisent des chaînes de caractères. Le troisième utilise un identifiant.

Les identificateurs (y compris les noms d'éléments, les classes et les ID dans les sélecteurs) ne peuvent contenir que les caractères [a-zA-Z0-9] et les caractères ISO 10646 U+00A0 et plus, plus le trait d'union (-) et le trait de soulignement (_) ; ils ne peuvent pas commencer par un chiffre, deux traits d'union ou un trait d'union suivi d'un chiffre.

- http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

Les chaînes de caractères peuvent être écrites soit avec des guillemets doubles, soit avec des guillemets simples.

- http://www.w3.org/TR/CSS2/syndata.html#strings