大家可能在 CSS 中见到过字符 @然后加一些关键字的用法, 这种用法就称之为 AT 规则, 在 CSS 中, 种类还是很多的, 这里总结列举下.
常规规则
所谓 "常规规则" 指的是语法类似下面的规则:
@[KEYWORD] (RULE)
包括:
@charset
定义字符集. 字符设置据说会被 HTTP 头覆盖. 某些软件, 例如 Dreamweaver 新建 CSS 文件时候, 自动会带有下面所示代码, 但实际开发时候, 作用不大, 因为 meta 中已经有所设置(<meta charset="utf-8">), 会覆盖, 所以我都是直接删掉的.
- @charset "utf-8";
- @import
导入其他 CSS 样式文件. 实际上线时候, 不建议使用, 多请求, 阻塞加载之类. 但, 本地开发可以使用, 用做 CSS 模块化开发, 然后使用一些 (如 grunt) 工具进行压缩并合并. 但是呢, 相比 Less, Sass 等还是有不足, 就是 @import 语句只能在 CSS 文件顶部, 使得文件的前后关系控制, 就不那么灵活.
- @import 'global.css';
- @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);
嵌套规则
所谓 "嵌套规则", 就是带有花括号{}, 语法类似下面的规则:
@[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 浏览器支持, 而且还需要加前缀. 但是, 10 年之后, 也就是 2025 年再来看, 估计就是另外一番景象了.
@font-face
- @font-face {
- font-family: 'MywebFont';
- src: url('myfont.woff2') format('woff2'),
- url('myfont.woff') format('woff');
- }
- @keyframes
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @media
- @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 干嘛干嘛嘞... */ }
- @page
- @page :first {
- margin: 1in;
- }
- /* 检查是否支持 CSS 声明 */ @supports (display: flex) {
- .module { display: flex; }
- }/* 检查多个条件 */ @supports (display: flex) and (-webkit-appearance: checkbox) {
- .module { display: flex; }
- }
来源: http://www.jianshu.com/p/41c56fe0a062