CSS 机制 At-rule

常规规则

@charset - 编码

定义字符集。⽤于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果；

某些软件，例如 Dreamweaver 新建 CSS 文件时候，自动会带有下面所示代码，但实际开发时候，作用不大，因为 meta 中已经有所设置 (<meta charset="utf-8">)，会覆盖，所以我都是直接删掉的。

css

@charset "utf-8";

@import - 导入

导入其他 CSS 样式文件。除了 @charset 规则不会被引入，@import 可以引⼊另⼀个文件的全部内容。实际上线时候，不建议使用，多请求，阻塞加载之类。但本地开发可以使用，用做 CSS 模块化开发，然后使用一些（如 grunt) 工具进行压缩并合并。但是呢，相比 less, sass 等还是有不足，就是 @import 语句只能在 CSS 文件顶部，使得文件的前后关系控制，就不那么灵活。

css

@import 'index.css';
@import url('index.css');

1
2

@namespace - 命名空间此规则应用到 XML HTML(XHTML) 上特别有用，因为这样的话 XHTML 元素可以作为选择器在 CSS 中使用。

css

/* XHTML命名空间 */
@namespace url(http://www.w3.org/1999/xhtml);

/* 内嵌在XHTML的SVG的命名空间 */
@namespace svg url(http://www.w3.org/2000/svg);

1
2
3
4
5

嵌套规则

@doument

CSS 4.0 规范有相关说明。如果文档满足给定的一些条件，就可以应用我们指定的一些样式。比如说，这个 CSS 文件被子站 A 调用，和被子站 C 调用，我们可以通过域名匹配来执行不同的 CSS 样式。这样，我们可以有效避免冲突，或者防止外链之类

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; }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@font-face - 字体

自定义字体用的。IE6 也支持

css

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

1
2
3
4
5
6

@### keyframes - 动画 - 关键帧

用来声明 CSS3 animation 动画关键帧

css

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

1
2
3
4
5
6
7
8

@media - 响应式

媒介查询

css

@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干嘛干嘛嘞... */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@page

page⽤于分页媒体访问网页时的表现设置，页面是⼀种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒，这个规则用在打印文档时候修改一些 CSS 属性。使用 @page 我们只能改变部分 CSS 属性，例如间距属性 margin, 打印相关的 orphans, widows, 以及 page-break-*, 其他 CSS 属性会被忽略。

css

@page :first {
   margin: 1in;
}
/* 上面CSS表示:first页面也要有:left, :right页面margin间距。zxx: */
/* @page的伪类包括：:blank, :first, :left,  */

1
2
3
4
5

@support

是否支持某 CSS 属性声明的 AT 规则，浏览器对其支持性越来越好了

css


/* 检查是否支持CSS声明 */
@supports (display: flex) {
  .module { display: flex; }
}

/* 检查多个条件 */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}

1
2
3
4
5
6
7
8
9
10
11

CSS 机制 At-rule #

常规规则 #

@charset - 编码 #

@import - 导入 #

嵌套规则 #

@doument #

@font-face - 字体 #

@### keyframes - 动画 - 关键帧 #

@media - 响应式 #

@page #

@support #