[TOC] # 常规规则 所谓“常规规则”指的是语法类似下面的规则： ~~~ @[KEYWORD] (RULE); ~~~ ## @charset 定义字符集。字符设置据说会被HTTP头覆盖。 ~~~ @charset "utf-8"; ~~~ <br> ## @import 导入其他CSS样式文件。实际上线时候，不建议使用，多请求，阻塞加载之类。但，本地开发可以使用，用做CSS模块化开发，然后使用一些(如grunt)工具进行压缩并合并。 相比less, sass等还是有不足，`@import`语句只能在CSS文件顶部，使得文件的前后关系控制，就不那么灵活。 ~~~ @import 'global.css'; ~~~ <br> ## @namespace 此规则应用到XML HTML(XHTML)上特别有用，因为这样的话XHTML元素可以作为选择器在CSS中使用。 ``` /* XHTML命名空间 */ @namespace url(http://www.w3.org/1999/xhtml); /* 内嵌在XHTML的SVG的命名空间 */ @namespace svg url(http://www.w3.org/2000/svg); ``` <br> # 嵌套规则 所谓“嵌套规则”，就是带有花括号`{}`, 语法类似下面的规则： ~~~ @[KEYWORD] { /* 嵌套语句 */ } ~~~ ## @document CSS 4.0规范有相关说明。如果文档满足给定的一些条件，就可以应用我们指定的一些样式。比如说，这个CSS文件被子站A调用，和被子站C调用，我们可以通过域名匹配来执行不同的CSS样式。这样，我们可以有效避免冲突，或者防止外链之类。 ~~~ @document /* 页面URL需要是 */ url(http://www.zhangxinxu.com/), /* 页面URL的开头必须是... */ url-prefix(www.zhangxinxu.com/wordpress/), /* 该域上的所有页面 */ domain(zhangxinxu.com), /* 所有https协议页面 */ regexp("https:.*") { /* 开始样式 */ body { font-family: Comic Sans; } } ~~~ 由于这个AT规则是CSS4水平的，所以目前的浏览器支持情况很弱，只有FireFox浏览器支持，而且还需要加前缀。 <br> ## @font-face 自定义字体 ~~~ @font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); } ~~~ <br> ## @keyframes 用来声明CSS3 animation动画关键帧用： ~~~ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } ~~~ <br> ## @media 媒介查询，如响应式宽度，retina屏幕判断，打印屏幕，IE7,IE8浏览器的hack等。 ~~~ @media all and (min-width: 1280px) { /* 宽度大于1280 */ } ~~~ ~~~ @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { /* Retina屏幕 */ } ~~~ ~~~ @media print { /* 打印 */ } ~~~ ~~~ @media \0screen\,screen\9 { /* IE7,IE8 */ } ~~~ ~~~ @media screen\9 { /* IE7*/ } ~~~ <br> ## @page 这个规则用在打印文档时候修改一些CSS属性。使用`@page`我们只能改变部分CSS属性，例如间距属性`margin`, 打印相关的`orphans`,`widows`, 以及`page-break-*`, 其他CSS属性会被忽略。 ~~~ @page :first { margin: 1in; } ~~~ 上面CSS表示`:first`页面也要有`:left`,`:right`页面`margin`间距。zxx: //`@page`的伪类包括：`:blank`,`:first`,`:left`,`:right`。 <br> ## @supports 是否支持某CSS属性声明的AT规则。 ``` /* 检查是否支持CSS声明 */ @supports (display: flex) { .module { display: flex; } } /* 检查多个条件 */ @supports (display: flex) and (-webkit-appearance: checkbox) { .module { display: flex; } } ``` 该规则的[浏览器兼容性](http://caniuse.com/css-supports-api/embed)如下：  <br> <br> # 参考资料 [博闻强识：了解CSS中的@ AT规则](https://www.zhangxinxu.com/wordpress/2015/08/know-css-at-rules/)