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

43次阅读

共计 3648 个字符,预计需要花费 10 分钟才能阅读完成。

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

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

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

正文完
 0