[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/)