CSS中一些@規則的用法小結

 　　at-rule是一個聲明，為CSS提供執行或怎麼表現的指令。每個聲明以@開頭,後緊跟一個可用的關鍵字，這個關鍵字充當一個標識符，用於表示CSS該做什麼。這是一個通用的語法，盡管每個at-rule有其它語法變體。

　　常規規則

　　常規規則遵循下面的語法：

　　代碼如下:

　　@[KEYWORD] (RULE);

　　@charset

　　這個規則定義了浏覽器使用的字符集，如果樣式表包含非ASCII characters (e.g:UTF-8)。注意，被放在HTTP頭部的字符集將會覆蓋@charset規則

　　代碼如下:

　　@charset "UTF-8";

　　@import

　　這個規則指示請求樣式表，在這一行，如果內容是正確的，就會引入一個外部的CSS文件。

　　代碼如下:

　　@import 'global.css';

　　雖然流行的CSS預處理器都支持@import，但是應該指出的是，它們的工作原理不同於原生的CSS：預處理器會抓取CSS文件並將它們處理成一個CSS文件，對原生CSS，每一個@import都是一個獨立的HTPP請求。

　　@namespace

　　對於將CSS應用在XML HTML(XHTML)，這個規則是非常有用的，因為XHTML元素能在CSS中被作為一個選擇器使用。

　　代碼如下:

　　/* Namespace for XHTML */

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

　　/* Namespace for SVG embedded in XHTML */

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

　　嵌套規則

　　嵌套規則包含了額外的子集聲明，其中一些聲明只能用於特定情況。

　　代碼如下:

　　@[KEYWORD] {

　　/* Nested Statements */

　　}

　　@document

　　這個規則為樣式表指定了條件：只能應用於特定頁面。舉個粟子，我們提供一個URL，然後為這個特定的頁面自定義樣式，在其他頁面中，這些樣式會被忽略。

　　代碼如下:

　　@document

　　/* Rules for a specific page */

　　url(http://css-tricks.com/),

　　/* Rules for pages with a URL that begin with... */

　　url-prefix(http://css-tricks.com/snippets/),

　　/* Rules for any page hosted on a domain */

　　domain(css-tricks.com),

　　/* Rules for all secure pages */

　　regexp("https:.*")

　　{

　　/* Start styling */

　　body { font-family: Comic Sans; }

　　}

　　@font-face

　　這個規則允許在web頁面上加載自定義字體，對自定義字體有不同程度的支持，但是這個規則接受語句創建和提供這些字體。

　　代碼如下:

　　@font-face {

　　font-family: 'MyWebFont';

　　src: url('myfont.woff2') format('woff2'),

　　url('myfont.woff') format('woff');

　　}

　　@keyframes

　　在諸多CSS屬性中，這個規則是關鍵幀 動畫的基礎,並允許我們標記動畫開始和結束的標志。

　　代碼如下:

　　@keyframes pulse {

　　0% {

　　background-color: #001f3f;

　　}

　　100% {

　　background-color: #ff4136;

　　}

　　}

　　@media

　　這個規則包含條件聲明，可用於為特定屏幕指定樣式，這些聲明可以包含屏幕大小，在適屏樣式中會很有用.

　　代碼如下:

　　/* iPhone in Portrait and Landscape */

　　@media only screen

　　and (min-device-width: 320px)

　　and (max-device-width: 480px)

　　and (-webkit-min-device-pixel-ratio: 2) {

　　.module { width: 100%; }

　　}

　　或者只在文檔打印時運用樣式

　　代碼如下:

　　@media print {

　　}

　　@page

　　這個規則為將要打印的單獨頁面定義樣式。特別的是，它能為頁面偽元素設置外邊距：:first、:left和:right

　　代碼如下:

　　@page :first {

　　margin: 1in;

　　}

　　@supports

　　這個規則可測試浏覽器知否支持某個特性/功能，如果滿足條件，將會為這些元素應用特定樣式。有點像Modernizr,但確實是CSS屬性。

　　代碼如下:

　　/* Check one supported condition */

　　@supports (display: flex) {

　　.module { display: flex; }

　　}

　　/* Check multiple conditions */

　　@supports (display: flex) and (-webkit-appearance: checkbox) {

　　.module { display: flex; }

　　}

　　總結

　　at-rule可以使CSS做一些瘋狂有趣的事情。盡管文章中的示例很基礎，但是可以看到，對於特定的條件，它們是如何使用樣式的，從而創建匹配特定場景的用戶體驗和交互。