共计 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 的语法又有了一个新的意识,上面总结一下
- 有局部属性值会呈现双斜杠语法,比方
border-image
、-webkit-mask-box-image
- 不反对双斜杠正文最次要的起因是无奈兼容现版本,会对现有 CSS 带来副作用
- 为了兼容现有版本,CSS 新个性不能影响其余 CSS 语句,语法规定也从未扭转过
能够必定地说,CSS 当前也不会有双斜杠正文的规定。另外,本文的很多观点和论断都是演绎总结而来,并没有查究官网材料,可能有少许不精确或者有误的中央,欢送评论区赐教。最初,如果感觉还不错,对你有帮忙的话,欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号:前端侦探