Pseudo-Comments dalam CSS (atau, Bagaimana Pelayar Menguraikan Gaya)

Walaupun spesifikasi CSS tidak disebutkan, terdapat beberapa cara anda boleh mensimulasikan komen gaya C-style dan/atau UNIX dalam fail CSS (dengan beberapa batasan). Lain -lain telah menulis mengenai perkara ini sebelum ini (terutamanya anotasi CSS diliputi dalam artikel Yayasan Web SitePoint). Artikel ini akan membincangkannya dengan lebih terperinci.

mata utama

CSS secara rasmi hanya menyokong komen multi-garis gaya C, tetapi komen pseudo menggunakan kesilapan parsing untuk secara tidak sengaja mengulas kod tersebut.
Komen pseudo boleh dibuat dengan memalukan perisytiharan CSS, seperti menghilangkan titik koma atau menggunakan nama atribut yang tidak diiktiraf, mengakibatkan kod berikutnya diabaikan.
Penempatan baris dan penempatan baris seterusnya pseudo akan menjejaskan sama ada peraturan CSS berikutnya digunakan, dan komen pseudo sebaris boleh membatalkan pengisytiharan berikutnya pada baris yang sama.
Pseudo-annotasi juga boleh digunakan untuk @ peraturan, dan tingkah laku yang diperhatikan akan berbeza-beza bergantung kepada sama ada peraturan @ mengandungi blok badan atau berakhir dengan titik koma.
Walaupun komen pseudo boleh digunakan untuk debugging, mereka tidak boleh dibaca dengan baik dan tidak boleh menggantikan komen CSS standard dalam kod pengeluaran.

CSS Comments

Menurut spesifikasi, parser CSS secara rasmi menyokong gaya anotasi, iaitu, komen berbilang baris dari bahasa gaya C, yang menggunakan tanda permulaan

dan tanda akhir /* seperti yang ditunjukkan di bawah: */

Oleh itu, pengisytiharan peraturan dalam komen akan diabaikan:

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

Pengisytiharan blok dalam komen akan diabaikan:

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

Dalam contoh -contoh ini, kita semua

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

sengaja

Gunakan sintaks komen untuk mengarahkan parser untuk mengabaikan kandungan. Walau bagaimanapun, kita juga boleh melakukan ini secara tidak disangka, seperti menggunakan pernyataan yang salah:

Dalam contoh ini, pengisytiharan latar belakang tidak digunakan kerana kekurangan titik koma. Parser mengimbas titik koma seterusnya untuk menentukan bahawa keseluruhan pernyataan dua baris tidak betul, jadi kandungan keseluruhan analisis leksikal diabaikan. Perkara yang sama akan berlaku jika kita menghilangkan nilai atribut sama sekali:

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

dan ini menunjukkan bahawa kita boleh menggunakan pernyataan yang salah sebagai ...

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

Pseudo Comment

kami memanggil "komen pseudo" ini kerana ketat, ini bukan komen yang ditamatkan pada akhir watak garis. Sebaliknya, mereka bekerja dengan memalukan input berikutnya (walaupun pada baris berikutnya). Ini disebabkan oleh proses pengendalian ralat set peraturan, blok pengisytiharan dan pemilih:

"Jika terdapat ralat di mana -mana pemilih, keseluruhan pernyataan harus diabaikan, walaupun selebihnya pemilih kelihatan munasabah dalam CSS 2.1."

Dalam contoh berikut (petikan dari spesifikasi), set peraturan kedua diabaikan kerana watak yang tidak sah "&" dalam pemilih:

Begitu juga, dalam contoh berikut, pengisytiharan kedua dan ketiga diabaikan kerana kehadiran aksara yang berlebihan di latar belakang nama harta:

pandangan pantas di papan kekunci Bahasa Inggeris akan mendedahkan bahawa watak-watak khas berikut akan bertindak sebagai komen perisytiharan satu baris:

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

Walau bagaimanapun, jangan gunakan mana -mana aksara, tetapi berpegang pada konvensyen C dan UNIX dan gunakan # atau //:

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

Semi-kolon

Tanda titik koma adalah tanda akhir pengisytiharan peraturan. Oleh itu, mereka tidak boleh "mengulas" teks yang berikut. Dalam spesifikasi, parser merawat titik koma yang menggantung sebagai perisytiharan yang salah (pengisytiharan nama, kolon, atau nilai hilang).

Seperti yang dinyatakan sebelum ini, apabila format komen multiline biasa adalah salah, iaitu apabila tag permulaan dan akhir tidak seimbang di sekitar set peraturan atau perisytiharan, parser mengabaikan pengisytiharan atau peraturan berikutnya. Yang berikut sebenarnya "mengulas" pengisytiharan latar belakang

dua , kerana parser akan mencari tag akhir pengisytiharan seterusnya (separuh kolon) perisytiharan yang terjejas:

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

Betulkan masalah ini dengan menambahkan titik koma selepas komen, sebelum pernyataan seterusnya (jadi pengisytiharan biru latar akan digunakan):

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

untuk komen pseudo yang hilang titik koma dalam baris, kesannya adalah sama:

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

dan membetulkannya dengan memulihkan titik koma:

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

sebaris dengan baris seterusnya

Ini adalah di mana "pseudo" memasuki perkataan "pseudo comment". Ini mungkin merupakan alasan yang baik untuk tidak menyebutnya "komen" sama sekali, kerana mereka melanggar konvensyen akhir-of-line C atau UNIX Style Line Comments.

komen pseudo yang diletakkan pada satu baris akan menindas pengisytiharan pada baris seterusnya. Dalam contoh berikut, latar belakang akan menjadi biru:

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

Komen pseudo diletakkan pada baris yang sama selepas

ditindas oleh . Dalam contoh berikut, latar belakang akan menjadi putih dan bukannya biru:

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

Malah versi "termampat" pemilih CSS dengan ancaman pseudo sebaris akan berkelakuan sebagai anotasi mono yang diisytiharkan. Dalam contoh berikut, kerana tanda komen # yang diiktiraf oleh parser berakhir pada titik koma berikutnya, pengisytiharan latar belakang pertama diabaikan dan pengisytiharan latar belakang kedua diiktiraf sebagai diformatkan dengan betul dan oleh itu diterapkan (dalam kes ini, biru akan digunakan Latar Belakang Badan):

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

(sama seperti kandungan susulan. Oleh kerana batasan ruang, ciptaan pseudo-asal yang tersisa di bahagian yang tinggal di sini.)

Atas ialah kandungan terperinci Pseudo-Comments dalam CSS (atau, Bagaimana Pelayar Menguraikan Gaya). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!