/* 这是CSS注释 堆代码 duidaima.com */ div{ color: red; }习惯了 SCSS或者LESS这些预处理器的同学,肯定非常希望有双斜杠注释
// SCSS注释 div{ color: red; // SCSS注释 }很明显这种写法要比/**/简洁地多,那么,为啥官方迟迟不支持双斜杠注释呢?下面就来探讨一下这个问题以及关于 CSS 语法的一些思考。
/* 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 种语法没,出现了两个斜杠,关键是,两斜杠中间的width还可以省略,这一点从border-image的语法规范可以看出
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;我们可以打开控制台来验证一下这个语法的合法性
-webkit-mask-box-image: 0//0;目前我能想到的就这两个,有知道其他的欢迎留言补充。不过这种毕竟是小部分,如果有新规范,也很容易规避这个问题。更要命的其实是下面这个原因,如果要是支持了,可能会让以前的CSS规范全部崩塌!
<div>CSS COMMENT</div>下面加了一行注释
div{ font-size: 30px; // 字号 background-color: yellow; color: blue; }如果浏览器支持这个特性,那非常符合直觉,那如果浏览器不支持(现阶段),你觉得最终的样式是?
div{ font-size: 30px; // 字号 background-color: yellow; color: blue; }也就是// 字号 background-color当成了一个新的属性,但是这个属性无效,所以最终的表现就是30px字号,蓝色文字。这样就带来了一个非常严重的问题,在不支持注释的浏览器上产生了不符合预期的解析错误,也就是说,一般的不兼容语法只是不起作用,但是这种注释却影响到了其他样式,这才是最要不得的。
<div>CSS COMMENT</div>首先是最常见的注释
div{ // font-size: 30px; background-color: yellow; color: blue; }这种写法其实是符合预期的,在目前阶段也是可以正常解析,因为//会向后找到第一个;,也就是整行// font-size: 30px;无效
div{ // 标题 font-size: 30px; background-color: yellow; color: blue; }根据前面的分析,其实可以等同于
div{ // 标题 font-size: 30px; background-color: yellow; color: blue; }所以第一行就无效了,结果和前面一致
div{ // 标题; font-size: 30px; background-color: yellow; color: blue; }然后是选择器外面的写法
<div>CSS COMMENT</div> <p>CSS COMMENT</p> // 标题 div{ font-size: 30px; background-color: yellow; color: blue; } p{ color: red }这种会如何解析呢?
// 标题 div{ font-size: 30px; background-color: yellow; color: blue; } p{ color: red }由于并不存在// 标题 div这样的选择器,并且也不是一个合法的选择器(斜杠需要转义),所以整个DIV样式完全无效,但并不影响后面选择器(p)的样式
// 标题{} div{ font-size: 30px; background-color: yellow; color: blue; } p{ color: red }四、CSS 语法其实从未改变
:root{ --c: red; }本质上其实就是一个特殊的属性,即便旧浏览器不支持也不会有其他影响,就相当于不存在一样。这也是为啥 CSS 为何不能像 SASS 那样直接将语法放在最外层,就像这样
--c: red; div{ color: var(--c) }如果按照 CSS 的解析规则,必然导致连同下面的 div样式整体失效。
@property --speed{ syntax: '<number>'; inherits: false; initial-value: 0; }其实从结构上来讲,和@font-face并没有什么区别
@font-face { font-family: "Trickster"; src: xxx; }或者说也满足下面这种更通用格式
选择器 { 属性1: 值; 属性2: 值; }所以即使不支持,也不会影响其他 CSS 语句。再想想看,有什么新特性会让其他样式“挂掉”?
4.可以肯定地说,CSS 以后也不会有双斜杠注释的规则。
另外,本文的很多观点和结论都是归纳总结而来,并没有追究官方资料,可能有少许不准确或者有误的地方,欢迎评论区赐教!