为啥CSS不会支持双斜杠( // )注释？

最新推荐文章于 2024-04-07 09:48:59 发布
最新推荐文章于 2024-04-07 09:48:59 发布
阅读量574 收藏 1
点赞数
文章标签： css 前端
原文链接：https://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw==&mid=2247507346&idx=1&sn=3d5c0d624b83f04e3c73b8ca4025065a&chksm=cf61f8b8f81671aea3913bd041180800b8d36a5c871fecc594071194cfb01ad2a659eb9c13e7&scene=126&sessionid=0
版权
CSS不支持双斜杠注释主要是为了避免语法冲突和保持向后兼容。例如，border-image属性可能导致解析问题，而如果浏览器不支持双斜杠注释，可能会错误解析样式。此外，CSS的解析规则决定了即使添加新特性，也不能影响现有样式，以确保兼容性。文章还讨论了其他注释写法的副作用和CSS语法的稳定性。
摘要由CSDN通过智能技术生成

众所周知，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)[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 种语法没，出现了两个斜杠，关键是，两斜杠中间的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;

我们可以打开控制台来验证一下这个语法的合法性

b40f5bfe1e718e96a1313b2d97146900.png
image-20230609151557774

可以看到，这种写法完全是有效的（暂不考虑实际功能）

所以，双斜杠语法可能会造成语法冲突。

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

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

-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，你猜对了吗？

5ff7669f43e57c0cdb79681b158e7c2f.png
image-20230609155615637

为啥会这样呢？这要“归功”于 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;无效

5fedd4f7bd1713bf5670836cdaed8d83.png
image-20230609164724118

然后是这种注释

div{
  // 标题
  font-size: 30px; 
  background-color: yellow;
  color: blue;
}

根据前面的分析，其实可以等同于

div{
  // 标题 font-size: 30px; 
  background-color: yellow;
  color: blue;
}

所以第一行就无效了，结果和前面一致

97bcd5edec88a52a0ab7c1bb91f43377.png
image-20230609164724118

如果需要不影响现有样式，可以在后面加上;，直接终止解析，如下

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）的样式

df0122e96946432b659ae7cf3ca3c652.png
image-20230609170209813

如果需要不影响现有样式，需要在后面加上{}，告诉浏览器这是一个区块，如下

// 标题{}
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 以后也不会有双斜杠注释的规则。另外，本文的很多观点和结论都是归纳总结而来，并没有追究官方资料，可能有少许不准确或者有误的地方，欢迎评论区赐教。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤

参考资料

[1]

border-image - CSS: Cascading Style Sheets | MDN (mozilla.org): https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

[2]

-webkit-mask-box-image - CSS: Cascading Style Sheets | MDN (mozilla.org): https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

4788675271e9547457f8d14783a3446d.png

奇舞周刊
关注
HTTP协议相关概念介绍（端口号/HTML/HTTP/CSS/JS/MIME/URI/URN/URL/HTTP工作机制/HTTP报文语法格式）
weixin_44983653的博客
08-04 2108
HTTP协议相关概念介绍（端口号/HTML/HTTP/CSS/JS/MIME/URI/URN/URL/HTTP工作机制）
VS2010 调试CSS路径不允许多斜杠
chinet_bridge的专栏
08-16 620
VS2010 IIS调试CSS路径不允许多斜杠，路径上多一条斜杠就不能读取样式文件数据。http://localhost:8123/lib//demo.css 放在外网就可以读。http://www.demo.com/lib//demo.css 这么正常
//在CSS中
CSS 初学者指南
06-25 205
许多人（包括我在内）希望我们可以将//用于CSS中的单行注释。 Tab Atkins解释了为什么它可能不会发生的原因，但奇怪的是，如果您小心的话，现在可以立即使用它们。 直接连结→ 翻译自: https://css-tricks.com/slash-comments-in-css/ ...
tips：vscode安装vue3 Snippets插件解决注释vue代码是双斜线问题
mengran_code的博客
11-04 616
第一步：在vscode扩展中安装插件vue3 Snippets。
修改VSCode默认的注释样式
King的博客
08-24 9486
VSCode默认的注释样式是斜体的，下面介绍怎么把斜体设置为正常字体。 1. 首先打开设置，搜索setting.json，然后点击在setting.json中编辑 2. 在VSCode设置文件setting.json中，添加如下代码： "editor.tokenColorCustomizations": { "textMateRules": [ { "name": "C...
CSS注释（附带示例）
ccc369639963的博客
05-06 2307
在代码中合理的添加注释是个非常好的习惯，通过注释您可以对代码加以解释说明（例如描述某段代码的功能、使用方法等），浏览器会自动忽略注释的内容。/之间的内容都会被看作注释的内容。CSS 中的注释只有这一种写法，无论是在单行中使用还是跨越多行使用，只要保证注释的内容在/上面示例中，我们将第 9 行与第 13 行代码中的 CSS 样式注释了，通过运行可以看出，注释中的 CSS 样式没有生效。/后就会结束注释，之后出现的*/会被浏览器当作 CSS 样式，这么做的后果就是会导致后续的 CSS 样式无法正常解析。
less 文件写 // 注释报错 怎么修复
04-28
在 less 文件中，使用双斜杠 // 表示注释是无效的，因为 less 中只支持 CSS 的注释语法 /* 注释 */。如果你在 less 文件中使用了 // 注释，会导致 less 报错。 要修复这个问题，你可以将 // 注释替换为 /* 注释 */...
如何在css文件插入注释
03-26
使用双斜杠（//）开头，后跟注释内容，如下所示： ```css /* this is a CSS comment */ .selector { color: red; /* this is a single-line comment */ font-size: 16px; } // this is a single-line comment ...
CSS教程之通用的css hack简介
09-25
双斜杠注释（`//`）是IE无法正确解析的，但其他浏览器可以忽略这部分内容。 ##### 3. **其他浏览器Hack** 除了IE之外，针对Firefox、WebKit内核的浏览器（如Chrome、Safari）、Opera等也有相应的Hack方式。 - **...
CSS 双斜线注解语法
baobao214的专栏
10-21 2061
现况 先来看看现在标准／浏览器到底支不支持双斜线单行注解： span { // font-weight: normal; // line-height: 100%; color: black; // 假注解 margin-left: auto; } span { color: black; } 上面上图（可以编辑）是输入的 CSS，下图是浏览器丢弃解析错误宣告
解决vscode注释vue代码是双斜线问题
zhiyikeji的博客
05-26 4307
1.问题描述： 这种注释对于我们的代码不生效 2.解决方案 2.1 下载插件 Vue 3 Snippets 2.2 安装成功之后配置setting.json 在setting.json中添加以下代码 { "files.associations": { "*.vue": "html" } } 至此注释就正常了 ...
vscode vue 里的less代码识别不了
xigua3188的博客
10-23 6073
1.查看vscode 里插件是否安装vetur,如果没有插件库里搜索vetur,点击install按钮，显示uninstall就说明安装好了； 2.如果还是识别不了less代码，在file-->Preferences-->Settings 找到vetur 拉倒最下面点击Edit in settings.json 添加一行代码： "files.associations": ...
Web前端开发的基础，解决vscode注释vue代码是双斜线问题，4面字节跳动拿到Offer
最新发布
2401_83621634的博客
04-07 468
2.解决方案2.1 下载插件2.2 安装成功之后配置setting.json。
vscode使用html snippets插件无法识别less解决
qq_43470106的博客
04-29 1432
今天在写代码的时候突然发现vscode不停报警告，识别不出less语法，百度了才知道，是我用的html snippets的问题。在使用vscode写vue时如果需要html自动补全的话需要设置 `"files.associations":{ "*.vue":"html" }` 但是使用这个的话用less语法，会出现识别不出的问题，要设置 `"files.associations":{ "*.vue":"html" }` 这样两者就产生了冲突。 解决办法：在settings.json里加一行： "em
CSS---‘样式’基础用法 与 案例
Memory_888的博客
12-23 839
CSS---‘样式’基础用法 ( 持续更新... )1、外部样式表，2、伪类选择器，3、css常用属性，4、显示省略号，5、样式清除，6、CSS三角形，7、CSS水平垂直居中，8、精灵图，9、宽高自适应，10、清除浮动，11、伪元素，12、CSS3---基础（层级选择器、怪异盒模型、渐变、过渡（transition）、2D（transform）、关键帧动画（animation）、3D、 网格布局（display：grid））
HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
diaojilu3861的博客
08-28 1570
<!-- -->是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。/* */是CSS的注释标签/* */（注释代码块）、//（注释单行）是JS的注释标签。 两种注释有各自的使用环境,并且不能相互替代。举例如下： 1、<!--注释内容--> 2、//注释内容 (javascript中插入单行注释) 3、/*注释内容*/ ...
Web开发之HTML<!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
热门推荐
甫式人生
09-19 1万+
<!-- -->是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。/* */是CSS的注释标签/* */（注释代码块）、//（注释单行）是JS的注释标签。两种注释有各自的使用环境,并且不能相互替代。举例如下：1、<!--注释内容--> 2、//注释内容 (在css或javascript中插入单行注释) 3、/*注释内容*/ (在css或javascript中插入多行注释) 一
css注释_CSS注释示例–如何注释CSS
cumi7754的博客
08-16 1599
css注释Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn’t execute. CSS中使用注释来解释代码块或在开发过程中进行临时更改。 注释的代码不执行。 Both single and mu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值