三水

Appearance

@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 */
  }
}