乐趣区

关于前端:为啥CSS不会支持双斜杠注释

jiezi

欢送关注我的公众号：前端侦探

家喻户晓，CSS 仅反对多行正文，也就是 /**/ 正文

/* 这是 CSS 正文 */
div{color: red;}

习惯了 SCSS或者 LESS 这些预处理器的同学，必定十分心愿有双斜杠正文

// SCSS 正文
div{color: red; // SCSS 正文}

很显著这种写法要比 /**/ 简洁地多，那么，为啥官网迟迟不反对双斜杠正文呢？

上面就来探讨一下这个问题以及对于 CSS 语法的一些思考。

一、语法抵触

CSS 中大部分属性和值都比较简单，乍一看，如同没有什么语法有双斜杠//，其实不然，只是非常少，但并不是没有。

举个例子，上面是 border-image 的一些写法

border-image – CSS: Cascading Style Sheets | MDN (mozilla.org)

/* 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;

咱们能够关上控制台来验证一下这个语法的合法性

能够看到，这种写法齐全是无效的（暂不思考理论性能）

所以，双斜杠语法可能会造成语法抵触。

还有一个和 border-image 比拟像的属性，叫做-webkit-mask-box-image，也能够实现双斜杠语法

-webkit-mask-box-image – CSS: Cascading Style Sheets | MDN (mozilla.org)

-webkit-mask-box-image: 0//0;

目前我能想到的就这两个，有晓得其余的欢送留言补充👏🏻。

不过这种毕竟是小局部，如果有新标准，也很容易躲避这个问题。更要命的其实是上面这个起因，如果要是反对了，可能会让以前的 CSS 标准全副崩塌！

二、无奈兼容现版本

为啥说这个问题更大呢？咱们能够换个角度来思考，如果当初 CSS 反对了双斜杠语法会怎么样？

举个例子：

<div>CSS COMMENT</div>

上面加了一行正文

div{
  font-size: 30px; // 字号
  background-color: yellow;
  color: blue;
}

如果浏览器反对这个个性，那十分合乎直觉，那如果浏览器不反对（现阶段），你感觉最终的款式是？

A. 30px 字号，黄色背景，蓝色文字
B. 30px 字号，蓝色文字
C. 黄色背景，蓝色文字
D. 蓝色文字
E. 全副不失效，默认款式

思考两分钟 …

🤔

🤔

🤔

🤔

🤔

答案是 B，你猜对了吗？

为啥会这样呢？这要“归功”于 CSS 弱小且精准的“容错”解析规定：

CSS 解析中并不存在 换行 规定，每个属性和对应值通过分号 ; 辨别，在选择器外部，如果碰到非法语句，则会顺次寻找到下一个 ; 为止，也能够通过 {} 进行分块辨别。

下面这一段是我本人总结的一套规定，可能还是有些不好了解，拿下面那个例子来说，你能够把两行连起来看，实际上等同于

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 连起来了

// 题目 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 语法其实从未扭转

CSS 倒退这么多年，各种属性和新个性层出不穷，其实最外围的语法规定从未扭转过，这也是设计之初就决定好的。

像之前呈现的 CSS 变量

:root{--c: red;}

实质上其实就是一个非凡的属性，即使旧浏览器不反对也不会有其余影响，就相当于不存在一样。

这也是为啥 CSS 为何不能像 SASS 那样间接将语法放在最外层，就像这样

--c: red;
div{color: var(--c)
}

如果依照 CSS 的解析规定，必然导致连同上面的 div款式整体失效

还有一些 @ 符号的新语法，例如@property

@property --speed{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

其实从构造上来讲，和 @font-face 并没有什么区别

@font-face {
  font-family: "Trickster";
  src: xxx;
}

或者说也满足上面这种更通用格局

选择器 {
  属性 1: 值；属性 2: 值；}

所以即便不反对，也不会影响其余 CSS 语句。再想想看，有什么新个性会让其余款式“挂掉”？

五、最初总结一下

这下大略能明确为啥不反对双斜杠语法了吧，以上就是对于 CSS 语法的一些思考了，置信大家对 CSS 的语法又有了一个新的意识，上面总结一下

  1. 有局部属性值会呈现双斜杠语法，比方border-image、-webkit-mask-box-image
  2. 不反对双斜杠正文最次要的起因是无奈兼容现版本，会对现有 CSS 带来副作用
  3. 为了兼容现有版本，CSS 新个性不能影响其余 CSS 语句，语法规定也从未扭转过

能够必定地说，CSS 当前也不会有双斜杠正文的规定。另外，本文的很多观点和论断都是演绎总结而来，并没有查究官网材料，可能有少许不精确或者有误的中央，欢送评论区赐教。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探

退出移动版