建站
咨詢
售后
建站咨詢
新聞中心
眾所周知，CSS 僅支持多行注釋，也就是/**/注釋。
/* 這是CSS注釋 */
div{
color: red;
}習(xí)慣了 SCSS或者LESS這些預(yù)處理器的同學(xué)，肯定非常希望有雙斜杠注釋。
// SCSS注釋
div{
color: red; // SCSS注釋
}很明顯這種寫法要比/**/簡潔地多，那么，為啥官方遲遲不支持雙斜杠注釋呢？
下面就來探討一下這個問題以及關(guān)于 CSS 語法的一些思考。
一、語法沖突
CSS 中大部分屬性和值都比較簡單，乍一看，好像沒有什么語法有雙斜杠//，其實不然，只是非常少，但并不是沒有。
舉個例子，下面是border-image的一些寫法
border-image - CSS: Cascading Style Sheets | MDN (mozilla.org)[1]。
/* source | slice */
border-image: linear-gradient(red, blue) 27;
/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;
/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;
/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;看到第 4 種語法沒，出現(xiàn)了兩個斜杠，關(guān)鍵是，兩斜杠中間的width還可以省略，這一點從border-image的語法規(guī)范可以看出。
border-image =
<'border-image-source'> ||
<'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
<'border-image-repeat'>看到<'border-image-width'>后面的問號沒？這個就表示可選的意思，所以理論上border-image可以有以下的寫法。
border-image: 0//0;這種寫法其實等同于。
border-image-source: none;
border-image-slice: 0;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;我們可以打開控制臺來驗證一下這個語法的合法性。
可以看到，這種寫法完全是有效的（暫不考慮實際功能）。
所以，雙斜杠語法可能會造成語法沖突。
還有一個和border-image比較像的屬性，叫做-webkit-mask-box-image，也可以實現(xiàn)雙斜杠語法。
-webkit-mask-box-image - CSS: Cascading Style Sheets | MDN (mozilla.org)[2]。
-webkit-mask-box-image: 0//0;目前我能想到的就這兩個，有知道其他的歡迎留言補充。
不過這種畢竟是小部分，如果有新規(guī)范，也很容易規(guī)避這個問題。更要命的其實是下面這個原因，如果要是支持了，可能會讓以前的CSS規(guī)范全部崩塌！
二、無法兼容現(xiàn)版本
為啥說這個問題更大呢？我們可以換個角度來思考，如果現(xiàn)在CSS支持了雙斜杠語法會怎么樣？
舉個例子：
CSS COMMENT下面加了一行注釋
div{
font-size: 30px; // 字號
background-color: yellow;
color: blue;
}如果瀏覽器支持這個特性，那非常符合直覺，那如果瀏覽器不支持（現(xiàn)階段），你覺得最終的樣式是？
A. 30px字號，黃色背景，藍色文字
B. 30px字號，藍色文字
C. 黃色背景，藍色文字
D. 藍色文字
E. 全部不生效，默認樣式思考兩分鐘...
答案是 B，你猜對了嗎？
為啥會這樣呢？這要“歸功”于 CSS 強大且精準的“容錯”解析規(guī)則：
CSS 解析中并不存在換行規(guī)則，每個屬性和對應(yīng)值通過分號;區(qū)分，在選擇器內(nèi)部，如果碰到非法語句，則會依次尋找到下一個;為止，也可以通過{}進行分塊區(qū)分。
上面這一段是我自己總結(jié)的一套規(guī)則，可能還是有些不好理解，拿上面那個例子來說，你可以把兩行連起來看，實際上等同于。
div{
font-size: 30px;
// 字號 background-color: yellow;
color: blue;
}也就是// 字號 background-color當成了一個新的屬性，但是這個屬性無效，所以最終的表現(xiàn)就是30px字號，藍色文字。
這樣就帶來了一個非常嚴重的問題，在不支持注釋的瀏覽器上產(chǎn)生了不符合預(yù)期的解析錯誤，也就是說，一般的不兼容語法只是不起作用，但是這種注釋卻影響到了其他樣式，這才是最要不得的。
三、注釋的其他寫法
再來看一些常見的注釋寫法，看看有什么副作用。
CSS COMMENT首先是最常見的注釋。
div{
// font-size: 30px;
background-color: yellow;
color: blue;
}這種寫法其實是符合預(yù)期的，在目前階段也是可以正常解析，因為//會向后找到第一個;，也就是整行// font-size: 30px;無效。
然后是這種注釋。
div{
// 標題
font-size: 30px;
background-color: yellow;
color: blue;
}根據(jù)前面的分析，其實可以等同于。
div{
// 標題 font-size: 30px;
background-color: yellow;
color: blue;
}所以第一行就無效了，結(jié)果和前面一致。
如果需要不影響現(xiàn)有樣式，可以在后面加上;，直接終止解析，如下：
div{
// 標題;
font-size: 30px;
background-color: yellow;
color: blue;
}然后是選擇器外面的寫法。
CSS COMMENT
CSS COMMENT
// 標題
div{
font-size: 30px;
background-color: yellow;
color: blue;
}
p{
color: red
}這種會如何解析呢？
其實你可以將這個注釋想象成一個選擇器，也就是和下面的div連起來了。
// 標題 div{
font-size: 30px;
background-color: yellow;
color: blue;
}
p{
color: red
}由于并不存在// 標題 div這樣的選擇器，并且也不是一個合法的選擇器（斜杠需要轉(zhuǎn)義），所以整個DIV樣式完全無效，但并不影響后面選擇器（p）的樣式。
如果需要不影響現(xiàn)有樣式，需要在后面加上{}，告訴瀏覽器這是一個區(qū)塊，如下：
// 標題{}
div{
font-size: 30px;
background-color: yellow;
color: blue;
}
p{
color: red
}四、CSS 語法其實從未改變
CSS 發(fā)展這么多年，各種屬性和新特性層出不窮，其實最核心的語法規(guī)則從未改變過，這也是設(shè)計之初就決定好的。
像之前出現(xiàn)的CSS變量。
:root{
--c: red;
}本質(zhì)上其實就是一個特殊的屬性，即便舊瀏覽器不支持也不會有其他影響，就相當于不存在一樣。
這也是為啥 CSS 為何不能像 SASS 那樣直接將語法放在最外層，就像這樣。
--c: red;
div{
color: var(--c)
}如果按照 CSS 的解析規(guī)則，必然導(dǎo)致連同下面的 div樣式整體失效。
還有一些@符號的新語法，例如@property。
@property --speed{
syntax: '';
inherits: false;
initial-value: 0;
} 其實從結(jié)構(gòu)上來講，和@font-face并沒有什么區(qū)別。
@font-face {
font-family: "Trickster";
src: xxx;
}或者說也滿足下面這種更通用格式。
選擇器 {
屬性1: 值；
屬性2: 值；
}所以即使不支持，也不會影響其他 CSS 語句。再想想看，有什么新特性會讓其他樣式“掛掉”？
五、最后總結(jié)一下
這下大概能明白為啥不支持雙斜杠語法了吧，以上就是關(guān)于CSS語法的一些思考了，相信大家對 CSS 的語法又有了一個新的認識，下面總結(jié)一下
- 有部分屬性值會出現(xiàn)雙斜杠語法，比如border-image、-webkit-mask-box-image。
- 不支持雙斜杠注釋最主要的原因是無法兼容現(xiàn)版本，會對現(xiàn)有 CSS 帶來副作用。
- 為了兼容現(xiàn)有版本，CSS 新特性不能影響其他 CSS 語句，語法規(guī)則也從未改變過。
可以肯定地說，CSS 以后也不會有雙斜杠注釋的規(guī)則。另外，本文的很多觀點和結(jié)論都是歸納總結(jié)而來，并沒有追究官方資料，可能有少許不準確或者有誤的地方。
文章標題：為啥CSS不會支持雙斜杠(//)注釋？
標題URL：http://www.5511xx.com/article/coejodd.html
