Les noms de classe dans les sélecteurs CSS sont-ils sensibles à la casse?

Je continue à lire partout que CSS n’est pas sensible à la casse, mais j’ai ce sélecteur

.holiday-type.Selfcatering 

qui quand j’utilise dans mon HTML, comme ça, se fait ramasser

 

Si je change le sélecteur ci-dessus comme ça

 .holiday-type.SelfCatering 

Ensuite, le style ne sera pas pris en compte.

Quelqu’un dit des mensonges.

Les sélecteurs CSS sont généralement insensibles à la casse; Cela inclut les sélecteurs de classe et d’ID.

Mais les noms de classe HTML sont sensibles à la casse (voir la définition de l’atsortingbut), ce qui entraîne une incohérence dans votre deuxième exemple. Cela n’a pas changé en HTML5 . 1

En effet, la sensibilité à la casse des sélecteurs dépend de la langue du document :

La syntaxe de tous les sélecteurs est insensible à la casse dans la plage ASCII (c.-à-d. [Az] et [AZ] sont équivalents), sauf pour les parties qui ne sont pas sous le contrôle de sélecteurs. La sensibilité à la casse des noms d’élément de langue de document, des noms d’atsortingbut et des valeurs d’atsortingbut dans les sélecteurs dépend de la langue du document.

Donc, étant donné un élément HTML avec une classe Selfcatering , mais sans classe SelfCatering , les sélecteurs .Selfcatering et [class~="Selfcatering"] le correspondront, .SelfCatering aux sélecteurs .SelfCatering et [class~="SelfCatering"] . 2

Si le type de document définit des noms de classe insensibles à la casse, vous obtiendrez une correspondance malgré tout.


1 En mode quirks pour tous les navigateurs, les classes et les ID sont insensibles à la casse. Cela signifie que les sélecteurs ne correspondant pas à la casse correspondent toujours. Ce comportement est cohérent dans tous les navigateurs pour des raisons héritées et est mentionné dans cet article .

2 Pour ce que cela vaut, le niveau 4 de Selectors contient une syntaxe proposée pour forcer une recherche insensible à la casse sur des valeurs d’atsortingbut en utilisant [class~="Selfcatering" i] ou [class~="SelfCatering" i] . Les deux sélecteurs correspondent à un élément HTML ou XHTML avec une classe Selfcatering ou une classe SelfCatering (ou bien sûr les deux). Cependant, il n’existe pas de syntaxe de ce type pour les sélecteurs de classe ou d’ID (encore?), Probablement parce qu’ils ont une sémantique différente des sélecteurs d’atsortingbuts réguliers ( sans sémantique associée) ou parce qu’il est difficile de trouver une syntaxe utilisable.

Peut-être pas un mensonge, mais besoin de clarification.

Le css lui-même n’est pas sensible à la casse.

Par exemple

 wiDth:100%; 

mais les noms, ils doivent être sensibles à la casse pour être des identificateurs uniques.

J’espère que cela pourra aider.

En mode bizarre, tous les navigateurs se comportent comme ne respectant pas la casse lors de l’utilisation de id names CSS class et d’ id names CSS class .

En mode quirks, les noms de classe et d’ID CSS sont insensibles à la casse. En mode standard, ils sont sensibles à la casse. (Ceci s’applique également à getElementsByClassName.) Read more …

Parfois, lorsque vous avez des doctypes incorrects comme bellow, votre navigateur passe en mode bizarre.

 < !DOCTYPE html PUBLIC> < !DOCTYPE html anytext> 

vous devez utiliser un doctype standard

HTML 5

 < !DOCTYPE html> 

HTML 4.01 Ssortingct

 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

HTML 4.01 Transitional

 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Jeu de frameworks HTML 4.01

 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

XHTML 1.0 Ssortingct

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

XHTML 1.0 Transitional

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Jeu de frameworks XHTML 1.0

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

XHTML 1.1

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

Si vos id names CSS class ou d’ id names CSS class se comportent de manière case insensitive à la case insensitive veuillez vérifier votre doctype.