Pseudo-forages dans CSS (ou comment les navigateurs analysent les styles)

Bien que la spécification CSS ne soit pas mentionnée, vous pouvez simuler des commentaires de ligne de style C et / ou de style Unix dans les fichiers CSS (avec certaines limitations). D'autres ont déjà écrit à ce sujet (en particulier les annotations CSS sont couvertes dans l'article des fondations Web de SitePoint). Cet article en discutera plus en détail.

Points clés

• CSS ne prend officiellement que les commentaires multi-lignes de style C, mais les commentaires pseudo utilisent des erreurs d'analyse pour commenter par inadvertance le code.
• Les commentaires pseudo peuvent être créés en malformant la déclaration CSS, tels que l'omission de demi-colons ou l'utilisation de noms d'attribut non reconnus, entraînant l'ignorance du code ultérieur.
• Le placement en ligne et en ligne suivante des commentaires pseudo affectera si les règles CSS suivantes sont appliquées et que les commentaires pseudo en ligne peuvent invalider les déclarations ultérieures sur la même ligne.
• Les pseudo-annotations peuvent également être appliquées aux règles @, et le comportement observé variera selon que les règles @ contiennent un bloc corporel ou une fin avec un point-virgule.
• Bien que les commentaires pseudo puissent être utilisés pour le débogage, ils sont mal lisibles et ne doivent pas remplacer les commentaires CSS standard dans le code de production.

commentaires CSS

Selon la spécification, le Parser CSS prend formellement un style d'annotation, c'est-à-dire des commentaires multi-lignes du langage de style C, qui utilise la marque de départ /* et la marque finale */ comme indiqué ci-dessous:

<code>/*
  起始和结束标记之间（包括起始和结束标记）的字符将被解析器忽略，
*/</code>

Par conséquent, la déclaration de règles dans le commentaire sera ignorée:

<code>body {
  background: red;
  /*
  background: white;
  */
}</code>

La déclaration de bloc dans le commentaire sera ignorée:

<code>/*
body {
  background: red;
}
*/</code>

Dans ces exemples, nous avons tous intentionnellement Utiliser la syntaxe des commentaires pour demander à l'analyseur d'ignorer le contenu.

Cependant, nous pouvons également le faire de façon inattendue, comme utiliser une déclaration mal formée:

<code>body {
  background: red    /* 缺少分号 */
  background: blue;      
}</code>

Dans cet exemple, aucune des déclarations d'arrière-plan n'est appliquée en raison de l'absence de point-virgule. L'analyseur scanne le point-virgule suivant pour déterminer que l'ensemble de l'instruction à deux lignes est incorrect, de sorte que le contenu de toute l'analyse lexicale est ignoré. La même chose se produira si nous omettons complètement la valeur d'attribut:

<code>body {
  background:
  background: blue; /* 此声明未应用 */
}</code>

et

Ce indique que nous pouvons utiliser une instruction malformée comme ...

pseudo commentaire

Nous appelons ces "commentaires pseudo" à cause de strictement parlant, ce ne sont pas des commentaires qui se terminent à la fin du personnage de la ligne. Au lieu de cela, ils fonctionnent en malformant les entrées ultérieures (même sur les lignes suivantes). Cela est dû au processus de gestion des erreurs des ensembles de règles, des blocs de déclaration et des sélecteurs:

"S'il y a une erreur dans le sélecteur, toute la déclaration doit être ignorée, même si le reste du sélecteur semble raisonnable dans CSS 2.1."

Dans l'exemple suivant (extrait de la spécification), le deuxième ensemble de règles est ignoré en raison du caractère non valide "&" dans le sélecteur:

De même, dans l'exemple suivant, les deuxième et troisième déclarations sont ignorées en raison de la présence de caractères redondants dans l'arrière-plan nom de la propriété:

<code>h1, h2 {color: green }
h3, h4 & h5 {color: red } /* h6 {color: black }</code>

Un coup d'œil rapide sur le clavier anglais révèlera que les caractères spéciaux suivants serviront de commentaire de déclaration à une seule ligne:

<code>body {
  background: red;
  xbackground: white;    /* 属性名称未被识别 */
  y background: blue;    /* 属性名称格式不正确 */
}</code>

<code>/*
  起始和结束标记之间（包括起始和结束标记）的字符将被解析器忽略，
*/</code>

Cependant, n'utilisez aucun caractères, mais respectez les conventions C et Unix et utilisez # ou //:

<code>body {
  background: red;
  /*
  background: white;
  */
}</code>

semi-colon

Le point-virgule est la marque finale de la déclaration de règles. Par conséquent, ils ne peuvent pas "commenter" le texte qui suit. Dans les spécifications, l'analyseur traite un point-virgule pendant en tant que déclaration mal formée (une déclaration de nom, de côlon ou de valeur est manquante).

Comme mentionné précédemment, lorsque le format de commentaire multiligne ordinaire est erroné, c'est-à-dire lorsque les balises de début et de fin ne sont pas équilibrées autour de l'ensemble de règles ou de la déclaration, l'analyseur ignore les déclarations ou les ensembles de règles ultérieurs. Ce qui suit a en fait "commenté" les

deux déclarations d'arrière-plan, car l'analyseur recherchera la prochaine étiquette de fin de déclaration (semi-colon) de la déclaration affectée:

<code>/*
body {
  background: red;
}
*/</code>

Correction de ce problème en ajoutant un point-virgule après les commentaires, avant l'instruction suivante (donc la déclaration bleue de fond sera appliquée):

<code>body {
  background: red    /* 缺少分号 */
  background: blue;      
}</code>

Pour les commentaires pseudo manquant un point-virgule dans une ligne, l'effet est le même:

<code>body {
  background:
  background: blue; /* 此声明未应用 */
}</code>

et corrigez-le en restaurant le point-virgule:

<code>h1, h2 {color: green }
h3, h4 & h5 {color: red } /* h6 {color: black }</code>

en ligne avec la ligne suivante

C'est là que "Pseudo" entre dans le mot "Pseudo Commentaire". Cela peut être une bonne raison de ne pas l'appeler des "commentaires" du tout, car ils violent la convention de fin de ligne des commentaires de la ligne de style C ou Unix.

Les commentaires pseudo placés sur une ligne supprimeront les déclarations sur la ligne suivante. Dans l'exemple suivant, l'arrière-plan sera bleu:

<code>body {
  background: red;
  xbackground: white;    /* 属性名称未被识别 */
  y background: blue;    /* 属性名称格式不正确 */
}</code>

Les pseudo commentaires placés sur la même ligne après

sont supprimés par . Dans l'exemple suivant, l'arrière-plan sera blanc au lieu du bleu:

<code>selector {
  ~ property-name: ignored;
  ` property-name: ignored;
  ! property-name: ignored;
  @ property-name: ignored;
  # property-name: ignored;
  $ property-name: ignored;
  % property-name: ignored;
  ^ property-name: ignored;
  & property-name: ignored;
  * property-name: ignored;
  _ property-name: ignored;
  - property-name: ignored;
  + property-name: ignored;
  = property-name: ignored;
  | property-name: ignored;
  \ property-name: ignored;
  : property-name: ignored;
  property-name: ignored;
  . property-name: ignored;
  > property-name: ignored;
  , property-name: ignored;
  ? property-name: ignored;
  / property-name: ignored;
}</code>

Même la version "compressée" du sélecteur CSS avec une pseudo-annotation en ligne se comportera comme une annotation mono-déclarée. Dans l'exemple suivant, puisque la note de commentaire # reconnue par l'analyseur se termine au demi-virolon, la première déclaration d'arrière-plan est ignorée et la deuxième déclaration d'arrière-plan est reconnue comme correctement formatée et est donc appliquée (dans ce cas, le bleu sera appliqué à fond corporel):

<code>// background: ignored;
  # background: ignored;</code>

(Identique au contenu de suivi. En raison des limitations de l'espace, les créations pseudo-originales restantes de la partie restante sont omises ici.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!