大家可能在CSS中见到过字符@
然后加一些关键字的用法,这种用法就称之为AT规则,在CSS中,种类还是很多的,这里总结列举下。
所谓“常规规则”指的是语法类似下面的规则:
@[KEYWORD] (RULE);
包括:
某些软件,例如Dreamweaver新建CSS文件时候,自动会带有下面所示代码,但实际开发时候,作用不大,因为meta中已经有所设置(<meta charset="utf-8">
),会覆盖,所以我都是直接删掉的。
@charset "utf-8";
@import
语句只能在CSS文件顶部,使得文件的前后关系控制,就不那么灵活。
@import 'global.css';
/* XHTML命名空间 */
@namespace url(http://www.w3.org/1999/xhtml);
/* 内嵌在XHTML的SVG的命名空间 */
@namespace svg url(http://www.w3.org/2000/svg);
所谓“嵌套规则”,就是带有花括号{}
, 语法类似下面的规则:
@[KEYWORD] { }
包括:
@document url(http://www.zhangxinxu.com/), url-prefix(www.zhangxinxu.com/wordpress/), domain(zhangxinxu.com), regexp("https:.*") { body { font-family: Comic Sans; } }
由于这个AT规则是CSS4水平的,所以目前的浏览器支持情况很弱,只有FireFox浏览器支持,而且还需要加前缀。但是,10年之后,也就是2025年再来看,估计就是另外一番景象了。
@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); }
用来声明CSS3 animation动画关键帧用的,一笑而过:
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@media all and (min-width: 1280px) { }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { }
@media print { }
@media \0screen\,screen\9 { }
@media screen\9 { }
@page
我们只能改变部分CSS属性,例如间距属性margin
, 打印相关的orphans
, widows
, 以及page-break-*
, 其他CSS属性会被忽略。
@page :first { margin: 1in; }
上面CSS表示:first
页面也要有:left
, :right
页面margin
间距。zxx: //@page
的伪类包括::blank
, :first
,:left
, :right
。
@supports (display: flex) { .module { display: flex; } } @supports (display: flex) and (-webkit-appearance: checkbox) { .module { display: flex; } }
该规则的浏览器兼容性如下: