@charset
@charset CSS @规则指定样式表中使用的字符编码
CSS
@charset "UTF-8";
@charset "utf-8"; /*大小写不敏感*/
/* 设置 css 的编码格式为 Unicode UTF-8 */
@charset 'iso-8859-15'; /* 无效的,使用了错误的引号 */
@charset "UTF-8"; /* 无效的,多于一个空格 */
@charset "UTF-8"; /* 无效的,在 at-rule 之前多了一个空格 */
@charset UTF-8; /* 无效的,缺少单引号 ' 或双引号 ",charset 不是一个有效的 CSS <string> */
@counter-style
@counter-style 是一个 CSS at-rule ,它让开发者可以自定义 counter 的样式
HTML
CSS
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
.items {
list-style: circled-alpha;
}
@font-face
@font-face CSS at-rule 指定一个用于显示文本的自定义字体;字体能从远程服务器或者用户本地安装的字体加载
HTML
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
CSS
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
@font-feature-values
@font-feature-values CSS at-rule 允许作者在font-variant-alternates 中使用通用名称,用于在 OpenType 中以不同方式激活功能
CSS
@font-feature-values Font One {
/* How to activate nice-style in Font One */
@styleset {
nice-style: 12;
}
}
@font-feature-values Font Two {
/* How to activate nice-style in Font Two */
@styleset {
nice-style: 4;
}
}
/* … */
.nice-look {
font-variant-alternates: styleset(nice-style);
} /* Independent of the font */
@import
@import CSS@规则,用于从其他样式表导入样式规则
CSS
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation: landscape);
@keyframes
关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧(或 waypoints)的样式来控制 CSS 动画序列中的中间步骤
示例
@layer
CSS @规则 中的@layer声明了一个 级联层,同一层内的规则将级联在一起,这给予了开发者对层叠机制的更多控制。
HTML
<div class="box">
<p>Hello, world!</p>
</div>
CSS
p {
color: rebeccapurple;
}
@layer type {
.box p {
font-weight: bold;
font-size: 1.3em;
color: green;
}
}
@media
@media CSS at 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分
HTML
<p>
<abbr title="National Aeronautics and Space Administration">NASA</abbr> is a U.S. government agency that is
responsible for science and technology related to air and space.
</p>
CSS
abbr {
color: chocolate;
}
@media (hover: hover) {
abbr:hover {
color: limegreen;
transition-duration: 1s;
}
}
@media not all and (hover: hover) {
abbr::after {
content: ' (' attr(title) ')';
}
}
@namespace
@namespace 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则
CSS
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* 匹配所有的 XHTML <a> 元素,因为 XHTML 是默认无前缀命名空间 */
a {
}
/* 匹配所有的 SVG <a> 元素 */
svg|a {
}
/* 匹配 XHTML 和 SVG <a> 元素 */
*|a {
}
@page
@page at 规则是一种 CSS 规则,用于修改打印页面的不同方面
HTML
<button>打印该页面</button>
<article>
<section>
<h2>标题</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
<section>
<h2>标题</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
<section>
<h2>标题</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
</article>
CSS
@page {
size: landscape;
margin: 20%;
}
section {
page-break-after: always;
break-after: page;
}
@media print {
button {
display: none;
}
}
js
const button = document.querySelector("button");
button.addEventListener("click", () => {
window.print();
});
@property
@property CSS at-rule是CSS Houdini API 的一部分,它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承
HTML
CSS
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
@supports
@supports CSS at-rule 你可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明
CSS
@supports (animation-name: test) {
/* 如果支持不带前缀的 animation-name,则下面指定的 CSS 会生效 */
@keyframes {
/* @supports 是一个 CSS 条件组 at-rule,它可以包含其他相关的 at-rules */
}
}