@规则
@charset
样式表的第一个元素,前面不得有任意字符,只有第一个会被使用,属性值大小写不敏感且必须用双引号,主常用于让content属性使用非ASCII字符
浏览器查找样式表字符编码顺序:
- BOM(byte-order mark)
- Content-Type: Http header中的charset属性
- @charset
- link元素的charset属性(HTML5标准已废弃)
- 假设文档是UTF-8
@import
必须先于除@charset之外的规则,常用于避免为不支持的媒体类型检索资源
同步加载,会产生FOUC(Flash of Unstyled Content)问题
@namespace
位于@charset和@import之后,在其他任何规则之前,定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间内,常用于处理包含多个命名空间的文档,比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML
外语元素会自动加上命名空间,默认是http://www.w3.org/1999/xhtml,<svg>和<math>元素分别会加上对应的命名空间(http://www.w3.org/2000/svg 和 http://www.w3.org/1998/Math/MathML)
嵌套@规则
可以用在条件规则组中
@media
也可以在link标签中使用<link rel="stylesheet" media="screen and (min-width:900px)" href="widescreen-style.css"/>
对大小写敏感
未匹配的样式也会被下载,但不会被应用
可以使用not、and、or、only逻辑运算符
媒体类型
- all 所有设备,默认
- screen 彩色电脑屏幕
- speech
媒体特性
- width
- height
- aspect-radio 可见区域宽高比
- orientation 高度是否大于宽度
- resolution 分辨率
- scan
- grid
@page
@supports
支持条件,类似于if判断
有not(和and or连用要带括号)、and、or操作符