Pseudokoments in CSS (oder wie Browser Stile analysieren)

Obwohl die CSS-Spezifikation nicht erwähnt wird, können Sie in CSS-Dateien (mit einigen Einschränkungen) Zeilenkommentare im C-Stil und/oder Unix-Stil simulieren. Andere haben bereits darüber geschrieben (insbesondere die CSS -Anmerkungen werden im Artikel von SitePoint von Web -Stiftungen behandelt). In diesem Artikel wird dies genauer erläutert.

Schlüsselpunkte

• CSS unterstützt offiziell nur Multi-Line-Kommentare im C-Stil, aber Pseudo-Kommentare verwenden Parsen-Fehler, um den Code versehentlich auszunehmen.
• Pseudo -Kommentare können erstellt werden, indem die CSS -Deklaration missgebildet wird, z. B. die Auslassung von Semikolonen oder die Verwendung von nicht erkannten Attributnamen, was dazu führt, dass nachfolgender Code ignoriert wird.
• Inline- und Nächste Linienplatzierung von Pseudo -Kommentaren wirken sich darauf aus, ob nachfolgende CSS -Regeln angewendet werden, und Inline -Pseudo -Kommentare können nachfolgende Erklärungen in derselben Zeile ungültig machen.
• Pseudo-Annotationen können auch auf @-Regeln angewendet werden, und das beobachtete Verhalten hängt davon ab, ob die @-Regeln einen Körperblock enthalten oder mit einem Semikolon enden.
• Obwohl Pseudo -Kommentare zum Debuggen verwendet werden können, sind sie schlecht lesbar und sollten die Standard -CSS -Kommentare im Produktionscode nicht ersetzen.

CSS -Kommentare

Gemäß der Spezifikation unterstützt der CSS-Parser einen Annotationsstil formell, d. H. Multi-Line-Kommentare aus der C-Art-Sprache, die die Startmarke /* und die Endmarke */ verwendet:

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

Daher wird die Regelerklärung im Kommentar ignoriert:

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

Die Blockdeklaration im Kommentar wird ignoriert:

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

In diesen Beispielen verwenden wir alle absichtlich Kommentarsyntax, um den Parser zu unterweisen, Inhalte zu ignorieren.

können wir dies jedoch auch unerwartet tun, wie beispielsweise eine missgebildete Aussage:

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

In diesem Beispiel wird weder Hintergrunddeklarationen aufgrund des Fehlens eines Semikolons angewendet. Der Parser scannt das nächste Semikolon, um festzustellen, dass die gesamte Zwei-Linie-Anweisung falsch ist, sodass der Inhalt der gesamten lexikalischen Analyse ignoriert wird. Das gleiche wird passieren, wenn wir den Attributwert insgesamt weglassen:

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

und

Dies zeigt an, dass wir eine missgebildete Anweisung als ... verwenden können

Pseudo -Kommentar

Wir nennen diese "Pseudo -Kommentare", weil dies streng genommen keine Kommentare sind, die am Ende des Zeilenzeichens enden. Stattdessen funktionieren sie, indem sie nachfolgende Eingaben (sogar in nachfolgenden Zeilen) missbraucht. Dies ist auf den Fehlerbearbeitungsprozess von Regelsätzen, Deklarationsblöcken und Selektoren zurückzuführen:

"Wenn in der Selektor ein Fehler auftritt, sollte die gesamte Anweisung ignoriert werden, auch wenn der Rest des Selektors in CSS 2.1 angemessen aussieht."

Im folgenden Beispiel (Auszug aus der Spezifikation) wird der zweite Regelsatz aufgrund des ungültigen Zeichens "&" im Selektor ignoriert:

In ähnlicher Weise werden im folgenden Beispiel die zweite und dritte Deklarationen aufgrund des Vorhandenseins redundanter Zeichen im Hintergrund -Eigenschaftsnamen ignoriert:

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

Ein kurzer Blick auf die englische Tastatur zeigt, dass die folgenden Sonderzeichen als Einzellinienerklärung Kommentar fungieren:

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

Verwenden Sie jedoch keine Zeichen, halten Sie sich jedoch an die Konventionen von C und Unix und verwenden Sie # oder //:

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

semi-colon

Das Semikolon ist die Endmarke der Regelerklärung. Daher können sie den folgenden Text nicht "kommentieren". In der Spezifikation behandelt der Parser ein baumelnes Semikolon als missgebildete Deklaration (eine Namenserklärung, Dickdarm oder Wert fehlt).

Wie bereits erwähnt, wenn das reguläre Multiline -Kommentarformat fehlerhaft ist, d. H. Wenn die Start- und End -Tags um den Regelsatz oder die Regelung nicht ausgeglichen sind, ignoriert der Parser nachfolgende Erklärungen oder Regeln. Im Folgenden "kommentierte" die

zwei Hintergrunddeklarationen, da der Parser nach dem nächsten Deklarations-End-Tag (Semi-Colon) der betroffenen Deklaration sucht:

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

beheben Sie dieses Problem, indem Sie nach Kommentaren ein Semikolon hinzufügen, vor der nächsten Anweisung (so wird die blaue Erklärung des Hintergrunds angewendet):

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

Für Pseudo -Kommentare fehlt ein Semikolon in einer Zeile, der Effekt ist der gleiche:

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

und korrigieren Sie es, indem Sie das Semikolon wiederherstellen:

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

Inline mit der nächsten Zeile

Hier geht "Pseudo" in das Wort "Pseudo -Kommentar" ein. Dies kann ein guter Grund sein, es überhaupt nicht "Kommentare" zu nennen, da sie gegen die Übereinkommen des C- oder Unix-Style-Zeilen-Kommentare am Ende der Leine verstoßen.

Pseudo -Kommentare, die in einer Zeile platziert sind, unterdrücken die Erklärungen in der nächsten Zeile. Im folgenden Beispiel ist der Hintergrund blau:

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

Die Pseudo -Kommentare, die nach

in derselben Zeile platziert sind, werden durch unterdrückt. Im folgenden Beispiel ist der Hintergrund weiß statt blau:

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

sogar die "komprimierte" Version des CSS-Selektors mit Inline-Pseudo-Annotation wird sich als Annotation mit Mono-deklariert verhalten. Im folgenden Beispiel wird die erste Hintergrunderklärung ignoriert und die zweite Hintergrunderklärung wird als korrekt formatiert und daher angewendet (in diesem Fall wird Blau als korrekt formatiert und daher angewendet (in diesem Fall wird Blau angewendet, da die zweite Hintergrunderklärung angewendet wird, da die erste Hintergrunderklärung ignoriert wird, da das von der Parser anerkannte Kommentarmarke # (in diesem Fall wird die zweite Hintergrunddeklaration angewendet. Körperhintergrund):

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

(Wie bei der Verfolgung von Platzbeschränkungen sind die verbleibenden Pseudooriginalkreationen des verbleibenden Teils weggelassen.)

Das obige ist der detaillierte Inhalt vonPseudokoments in CSS (oder wie Browser Stile analysieren). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!