CSS中的偽計算（或者如何瀏覽解析樣式）

雖然CSS規範未提及，但您可以通過一些方法在CSS文件中模擬C風格和/或Unix風格的行註釋（存在一些限制）。其他人之前也寫過這方面的文章（特別是SitePoint的Web Foundations文章中涵蓋了CSS註釋）。本文將對此進行更詳細的探討。

關鍵要點

• CSS正式只支持C風格的多行註釋，但偽註釋利用解析錯誤來無意中註釋掉代碼。
• 偽註釋可以通過使CSS聲明格式錯誤來創建，例如省略分號或使用無法識別的屬性名稱，從而導致後續代碼被忽略。
• 偽註釋的內聯和下一行放置會影響後續CSS規則是否應用，內聯偽註釋可能會使同一行上的後續聲明無效。
• 偽註釋也可以應用於@規則，根據@規則是否包含主體塊或以分號結尾，觀察到的行為會有所不同。
• 雖然偽註釋可用於調試，但它們可讀性較差，不應在生產代碼中替代標準CSS註釋。

CSS註釋

根據規範，CSS解析器正式支持一種註釋樣式，即來自C風格語言的多行註釋，它使用起始標記/*和結束標記*/，如下所示：

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

因此，註釋中的規則聲明將被忽略：

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

註釋中的塊聲明將被忽略：

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

在這些示例中，我們都故意使用註釋語法來指示解析器忽略內容。

但是，我們也可能意外地做到這一點，例如使用格式錯誤的聲明：

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

在此示例中，由於缺少分號，兩個 background聲明均未應用。解析器掃描下一個分號，確定整個兩行語句格式錯誤，因此忽略整個詞法分析的內容。如果我們完全省略屬性值，也會發生同樣的事情：

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

而這表明我們可以使用格式錯誤的聲明作為……

偽註釋

我們將這些稱為“偽註釋”，因為嚴格來說，這些不是在行尾字符處終止的註釋。相反，它們通過使後續輸入（甚至在後續行）格式錯誤來工作。這是由於規則集、聲明塊和選擇器的錯誤處理過程：

“如果選擇器中的任何位置出現錯誤，則應忽略整個語句，即使選擇器的其餘部分在CSS 2.1中看起來合理。”

在以下示例（摘自規範）中，由於選擇器中存在無效字符“&”，第二個規則集被忽略：

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

同樣，在以下示例中，由於在background屬性名稱中存在多餘字符，第二個和第三個聲明被忽略：

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

快速瀏覽一下英語鍵盤，就會發現以下特殊字符將充當單行聲明註釋：

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

但是，不要使用任何字符，而應堅持使用C和Unix約定，並使用#或//：

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

分號

分號是規則聲明的結束標記。因此，它們不能“註釋”其後的文本。用規範的話說，解析器將懸空分號視為格式錯誤的聲明（缺少名稱、冒號或值的聲明）。

如前所述，當常規多行註釋格式錯誤時，即起始和結束標記未圍繞規則集或聲明平衡時，解析器會忽略後續的聲明或規則集。以下內容實際上將“註釋”掉兩個 background聲明，因為解析器將搜索受影響聲明的下一個聲明結束標記（分號）：

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

通過在註釋後、下一個聲明前添加分號來修復此問題（因此將應用background blue聲明）：

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

對於一行缺少分號的偽註釋，效果相同：

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

並通過恢復分號來更正：

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

內聯與下一行放置

這就是“偽”進入“偽註釋”一詞的地方。這可能是根本不稱其為“註釋”的充分理由，因為它們違背了C或Unix風格行註釋的行尾約定。

放在自己一行上的偽註釋將抑制下一行上的聲明。在以下示例中，background將為藍色：

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

放在同一行有效聲明之後的偽註釋將抑制下一行上的聲明。在以下示例中，background將為白色而不是藍色：

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

即使是帶有內聯偽註釋的CSS選擇器的“壓縮”版本也將表現為單聲明註釋。在以下示例中，由於解析器識別到的註釋標記#在下一個分號處終止，第一個background聲明被忽略，第二個background聲明被識別為格式正確，因此被應用（在這種情況下，藍色將應用於body background）：

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

(後續內容同理，由於篇幅限制，此處省略剩餘部分的偽原創。)

以上是CSS中的偽計算（或者如何瀏覽解析樣式）的詳細內容。更多資訊請關注PHP中文網其他相關文章！