Pseudo-comments in CSS (Or, How Browsers Parse Styles)

Although the CSS specification is not mentioned, there are some ways you can simulate C-style and/or Unix-style line comments in CSS files (with some limitations). Others have written about this before (particularly the CSS annotations are covered in SitePoint's Web Foundations article). This article will discuss this in more detail.

Key Points

• CSS officially only supports C-style multi-line comments, but pseudo comments use parsing errors to inadvertently comment out the code.
• Pseudo comments can be created by malforming the CSS declaration, such as omitting semicolons or using unrecognized attribute names, resulting in subsequent code being ignored.
• Inline and next line placement of pseudo comments will affect whether subsequent CSS rules are applied, and inline pseudo comments may invalidate subsequent declarations on the same line.
• Pseudo-annotations can also be applied to @ rules, and the observed behavior will vary depending on whether the @ rules contain a body block or end with a semicolon.
• Although pseudo comments can be used for debugging, they are poorly readable and should not replace standard CSS comments in production code.

CSS Comments

According to the specification, the CSS parser formally supports an annotation style, i.e., multi-line comments from C-style language, which uses the start mark /* and the end mark */ as shown below:

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

Therefore, the rule declaration in the comment will be ignored:

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

The block declaration in the comment will be ignored:

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

In these examples, we all intentionally use comment syntax to instruct the parser to ignore content.

However, we may also do this unexpectedly, such as using a malformed statement:

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

In this example, neither background declarations are applied due to the lack of a semicolon. The parser scans the next semicolon to determine that the entire two-line statement is incorrect, so the content of the entire lexical analysis is ignored. The same thing will happen if we omit the attribute value altogether:

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

And

This indicates that we can use a malformed statement as...

Pseudo Comment

We call these "pseudo comments" because strictly speaking, these are not comments that terminate at the end of the line character. Instead, they work by malforming subsequent inputs (even on subsequent lines). This is due to the error handling process of rule sets, declaration blocks and selectors:

"If there is an error anywhere in the selector, the entire statement should be ignored, even if the rest of the selector looks reasonable in CSS 2.1."

In the following example (excerpt from the specification), the second rule set is ignored due to the invalid character "&" in the selector:

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

Similarly, in the following example, the second and third declarations are ignored due to the presence of redundant characters in the background property name:

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

A quick glance at the English keyboard will reveal that the following special characters will act as a single-line declaration comment:

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

However, do not use any characters, but stick to the C and Unix conventions and use # or //:

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

Semi-colon

The semicolon is the end mark of the rule declaration. Therefore, they cannot "comment" the text that follows. In specification, the parser treats a dangling semicolon as a malformed declaration (a declaration of name, colon, or value is missing).

As mentioned earlier, when the regular multiline comment format is erroneous, i.e. when the start and end tags are not balanced around the rule set or declaration, the parser ignores subsequent declarations or rulesets. The following actually "commented" the

two background declarations, because the parser will search for the next declaration end tag (semi-colon) of the affected declaration:

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

Fix this problem by adding a semicolon after comments, before the next statement (so background blue declaration will be applied):

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

For pseudo comments missing a semicolon in a line, the effect is the same:

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

and correct it by restoring the semicolon:

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

Inline with the next line

This is where "pseudo" enters the word "pseudo comment". This may be a good reason not to call it "comments" at all, because they violate the end-of-line convention of C or Unix style line comments.

Pseudo comments placed on one line will suppress declarations on the next line. In the following example, the background will be blue:

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

The pseudo comments placed on the same line after

are suppressed by . In the following example, the background will be white instead of blue:

<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>

Even the "compressed" version of the CSS selector with inline pseudo-annotation will behave as a mono-declared annotation. In the following example, since the comment mark # recognized by the parser terminates at the next semicolon, the first background declaration is ignored and the second background declaration is recognized as correctly formatted and is therefore applied (in this case, Blue will be applied to body background):

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

(Same as follow-up content. Due to space limitations, the remaining pseudo-original creations of the remaining part are omitted here.)

The above is the detailed content of Pseudo-comments in CSS (Or, How Browsers Parse Styles). For more information, please follow other related articles on the PHP Chinese website!