CSS注释开头加感叹号为何会被浏览器识别为有效属性代码？

感叹号本身的标准作用 #

CSS 官方规范中，/*! 开头的内容本质还是合法的 CSS 注释，浏览器原生不会对开头的!做特殊处理。加!的作用是给前端工程化的压缩工具（比如 cssnano、terser 内置的 CSS 压缩能力）做标记：

• 普通/* */包裹的注释，在生产环境压缩时会被直接删除
• 以/*!开头的注释，会被压缩工具识别为「重要注释」（一般用来放版权声明、开源许可内容），压缩时会保留不会被删掉

你遇到的注释内属性生效的原因 #

正常场景下/*!visibility:hidden*/一定会被浏览器识别为注释，属性不会生效，你遇到的生效情况大概率是以下两种原因之一：

• 该 CSS 文件经过了项目自定义的编译脚本处理：部分 React 技术栈的工程化方案会用特殊格式的注释做条件编译标记，在构建时会把符合规则的/*! */里的代码拆出来变成有效 CSS 代码，你在浏览器里看到的可能是 sourceMap 映射后的原始代码，实际运行的代码已经去掉了注释包裹
• 前面的 CSS 代码存在语法错误：比如存在未闭合的引号、未闭合的选择器括号、语法错误的@规则等，会导致浏览器解析到这一行时，/*没有被识别为注释的起始标记，后续的属性就会被当成有效代码解析

内容的提问来源于stack exchange，提问作者altern