CSS：你未必知道的@规则

at-rule 是一个声明，为CSS提供执行或怎么表现的指令。每个声明以 @ 开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。这是一个通用的语法，尽管每个 at-rule 有其它语法变体。

常规规则

常规规则遵循下面的语法：

1. @[KEYWORD] (RULE);

@charset 这个规则定义了浏览器使用的字符集，如果样式表包含非 ASCII characters (e.g: UTF-8 )。注意，被放在 HTTP头部 的字符集将会覆盖 @charset 规则

1. @charset "UTF-8";

@import 这个规则指示请求样式表，在这一行，如果内容是正确的，就会引入一个外部的CSS文件。

1. @import 'global.css';

1. /* Namespace for XHTML */
2. @namespace url(http://www.w3.org/1999/xhtml);
4. /* Namespace for SVG embedded in XHTML */
5. @namespace svg url(http://www.w3.org/2000/svg);

嵌套规则

嵌套规则包含了额外的子集声明，其中一些声明只能用于特定情况。

1. @[KEYWORD] {
2. /* Nested Statements */
3. }

@document 这个规则为样式表指定了条件：只能应用于特定页面。举个粟子，我们提供一个URL，然后为这个特定的页面自定义样式，在其他页面中，这些样式会被忽略。

1. @document
2. /* Rules for a specific page */
3. url(http://css-tricks.com/),
5. /* Rules for pages with a URL that begin with... */
6. url-prefix(http://css-tricks.com/snippets/),
8. /* Rules for any page hosted on a domain */
9. domain(css-tricks.com),
11. /* Rules for all secure pages */
12. regexp("https:.*")
13. {
15. /* Start styling */
16. body { font-family: Comic Sans; }
18. }

@font-face 这个规则允许在web页面上加载自定义字体，对自定义字体有 不同程度的支持 ，但是这个规则接受语句创建和提供这些字体。

1. @font-face {
2. font-family: 'MyWebFont';
3. src: url('myfont.woff2') format('woff2'),
4. url('myfont.woff') format('woff');
5. }

@keyframes 在诸多CSS属性中，这个规则是 关键帧 动画 的基础,并允许我们标记动画开始和结束的标志。

1. @keyframes pulse {
2. 0% {
3. background-color: #001f3f;
4. }
5. 100% {
6. background-color: #ff4136;
7. }
8. }

@media 这个规则包含条件声明，可用于为特定屏幕指定样式，这些声明可以包含屏幕大小，在 适屏样式 中会很有用.

1. /* iPhone in Portrait and Landscape */
2. @media only screen
3. and (min-device-width: 320px)
4. and (max-device-width: 480px)
5. and (-webkit-min-device-pixel-ratio: 2) {
7. .module { width: 100%; }
9. }

或者只在文档打印时运用样式

1. @media print {
3. }

@page 这个规则为将要打印的单独页面定义样式。特别的是，它能为页面伪元素设置外边距： :first 、 :left 和 :right

1. @page :first {
2. margin: 1in;
3. }

@supports 这个规则可测试浏览器知否支持某个特性/功能，如果满足条件，将会为这些元素应用特定样式。有点像 Modernizr ,但确实是CSS属性。

1. /* Check one supported condition */
2. @supports (display: flex) {
3. .module { display: flex; }
4. }
6. /* Check multiple conditions */
7. @supports (display: flex) and (-webkit-appearance: checkbox) {
8. .module { display: flex; }
9. }

浏览器对@supports的支持情况：

for more information of @supports,click here: @supports

总结

at-rule 可以使CSS做一些疯狂有趣的事情。尽管文章中的示例很基础，但是可以看到，对于特定的条件，它们是如何使用样式的，从而创建匹配特定场景的用户体验和交互。

英文原文： The At-Rules of CSS