@-rule 语句

@-rule 语句

@-rule 语句类比C语言中的预处理指令。预处理指令告诉编译器在编译之前，css源码需要先通过预处理器处理。
重点@supports、@media条件判断规则语句，可以相互嵌套使用。语法上结尾没有分号。

@charset

语法

@charset "utf-8";        //正确写法，大小写不敏感
@charset 'utf-8';        //错误写法，不能是单引号
@charset  'utf-8';        //错误写法，中间有两个空格
 @charset "utf-8";    //错误写法，@前面不能有空格

关键点1必须放在样式表的第一行。
关键点2定义样式表的字符编码的方式很多，浏览器的查找字符编码的规则顺序如下，一旦找到就会停止：

找css文件字节流的开头的BOM（Byte Order Mark字节顺序标记）。但是现在编辑器的一般字符编码是utf-8无BOM。
找http响应头中content-type属性值中的字符编码。
css中的@charset。
元素中的charset属性。
默认字符编码utf-8。
@import
语义引入外部样式表。
关键点1必须放在其他@-rule的前面，除@charset以外。

语法支持媒体查询。
例子

@import url() screen and (min-width: 200px);

@namespace

语义避免HTML、SVG、MathML标记语言产生命名冲突，解决方法就是给各自的命名空间加上前缀。
关键点1用于处理多个标记语言的文档时才有用。
关键点2必须写在@charset和@import后面。

例子

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);  

a{ ... }    //匹配HTML中的<a>元素
svg|a{ ... }        //匹配SVG中的<a>元素
*|a{ ... }        //匹配HTML和SVG中的<a>元素

@supports

语义基于css的特征查询，条件判断是否解释样式规则。目的是为了检查浏览器css的兼容性。
关键点该条件规则查询没必要放在规则语句前面。
例子下面代码中@supports中的属性，根据特异性算法，会被下面的属性覆盖，而不起作用。最好将@supports语句放在后面，以实现回退。

@supports(width: 1px){
  div{
    width: 100px;
    height: 100px;
    background-color: pink;
  }
}       

div{           
  width: 200px;
  height: 200px;
  background-color: cadetblue;
}

@media

语义基于媒体查询，条件判断是否解释样式规则。
关键点该条件规则查询没必要放在规则语句前面。

@font-face

语义引入外部字体文件。
语法

font-family
src：多个字体格式类型，用逗号分隔。最终浏览器只会选择一个合适的字体格式文件。
- local( )：参数是字体的名字。浏览器先查看本地有没有该字体。
- url()
- format()：给浏览器一个字体格式的线索，以便于浏览器选择合适的字体格式。

例子format( )参数中的字符串不是字体文件的后缀。

@font-face{
    font-family: font;
  src: local("font"),
         url("font/Bafora Regular Demo.otf") format('truetype');
}

@page

语义修改打印页面的样式，但是只能使用margin等特定的属性。

@namespace

语义为了解决HTML中引入多个命名空间（、

@keyframes

语义定义动画帧。

思考总结

和@import的区别？

从定义上来说，是HTML标签，@import是CSS预处理指令。
从DOM操作来看，@import不能进行DOM操作。
从JS引擎解析来说，都是引入CSS样式表。但是在加载时是异步加载。而@import是等页面加载完才会加载，这会导致页面加载比较慢，因此如果不是为了响应式布局尽量减少使用。
从兼容性来看，@import支持IE5以上。不存在兼容性。