常规规则：类似
@[KEYWORD] (RULE);
@charset
@charset "utf-8";
@import
@import 'global.css';
@namespace
举个例子，SVG使用了和HTML一样的元素和CSS属性。如果你为SVG文档和HTML文档同时应用了一个样式文件的话，最好对SVG和HTML做样式分离以避免出现样式覆盖的情况。
/* XHTML命名空间 */ @namespace url(http://www.w3.org/1999/xhtml); /* 内嵌在XHTML的SVG的命名空间 */ @namespace svg url(http://www.w3.org/2000/svg); /* 有了上述声明，就可以只为SVG元素应用CSS规则 */ svg | a { color: white; }
嵌套规则，类似
@[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; } }
@counter-style
@counter-style counter名字{ system : 算法; range : 使用范围; symbols : 符号; or additive-symbols: 符号 prefix : 前缀; suffix : 后缀; pad : 补零(eg. 01,02,03); negative: 负数策略; fallback: 出错后的默认值; speakas : 语音策略; }
@font-face
@font-face { font-family: 'Arial'; src: url('local'); }
@keyframes
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@media
@media all and (min-width: 1280px) { /* 宽度大于1280干嘛嘞... */ }
@page
这个规则用在打印文档时候修改一些CSS属性。使用@page我们只能改变部分CSS属性，例如间距属性margin, 打印相关的orphans, widows, 以及page-break-, 其他CSS属性会被忽略。
@page :first { margin: 1in; }
@supports - 功能查询
通过 @support，你可以在 CSS 中使用一小段的测试来查看浏览器是否支持一个特定的 CSS 功能(这个功能可以是 CSS 的某种属性或者某个属性的某个值)，然后，根据测试的结果来决定是否要应用某段样式。
/ 检查是否支持CSS声明 */
@supports (display: flex) { .module { display: flex; } }
/* 检查多个条件 */ @supports (display: flex) and (-webkit-appearance: checkbox) { .module { display: flex; } }
modernizr
渐进增强和优雅降级
渐进增强(progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
**一般来说，渐进增强主要用于CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。 **
网友评论