@规则：其他

一个@规则是一个CSS 语句，以 @ 符号开头，后跟一个标识符，并包括直到下一个分号的所有内容或下一个 CSS 块，以先到者为准。

下面是一些@规则：

  • @charset：定义样式表使用的字符集；
  • @import：告诉 CSS 引擎引入一个外部样式表；
  • @namespace：告诉 CSS 引擎必须考虑 XML 命名空间；
  • @font-face：引用外部字体文件；
  • @media：如果满足媒介查询的条件则条件规则组里的规则生效；
  • @keyframes：描述 CSS 动画的帧；
  • @supports：如果满足给定条件则条件规则组里的规则生效；
  • @page：描述打印文档时布局的变化；
  • @document：如果文档样式表满足给定条件则条件规则组里的规则生效。

@charset

@charset 规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，且前面不得有任何字符。因为它不是一个嵌套语句，所以不能在 @规则条件组 中使用。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 style 元素内的样式属性内使用。

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

  • 文件的开头的 Unicode byte-order 字符值。
  • 由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
  • CSS @规则 @charset。
  • link 元素的 charset 属性。 注意： 该方法在 HTML5 标准中已废除，无法使用。
  • 默认为 UTF-8。

@charset 规则的值是一个 web-safe 字符编码组合的字符串，还必须被双引号包围，@charset 只允许一个空格，并且以分号结束。 

/*大小写不敏感*/
@charset "UTF-8";
@charset "utf-8"; 

/* 设置css的编码格式为Unicode UTF-8 */
@charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */
@charset 'UTF-8';       /* 无效的, 使用了错误的引号 */
@charset  "UTF-8";      /* 无效的, 多于一个空格 */
 @charset "UTF-8";      /* 无效的, 在 @charset 之前多了一个空格 */
@charset UTF-8;         /* 缺少引号，不是 CSS 字符串 */

@import

@import 规则用于从其他样式表导入样式规则。@import 规则必须位于所有其他类型的规则之前，@charset 规则除外；因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。

为避免不支持的媒体类型检索资源，可以指定 @import 规则依赖的媒体查询 。这些条件导入在 URI 之后指定以逗号分隔的媒体查询。在没有任何媒体查询的情况下，默认所有的媒体具有相同的效果。

@import url;
@import url list-of-media-queries;
@import url supports( supports-query );
@import url supports( supports-query ) list-of-media-queries;

@import 'custom.css';
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);

@namespace

@namespace 规则用于定义 CSS 样式表中使用的 XML 命名空间。

定义的命名空间可用于限制通用选择器、类型选择器和属性选择器仅选择该命名空间内的元素。@namespace 规则通常仅在处理包含多个名称空间的文档时有用——例如带有内联 SVG 或 MathML 的 HTML5，或混合多个词汇表的 XML。

@namespace 规则在样式表中必需在 @charset 和 @import 后，所有其他@规则和样式声明之前。

在 HTML5 中，已知外来元素将自动分配命名空间。这意味着，HTML 元素默认为 XHTML 命名空间（http://www.w3.org/1999/xhtml），即使在文档中的没有定义 xmlns 属性，同理，SVG 和 Math 元素将被赋予其适当的命名空间（http://www.w3.org/2000/svg 和 http://www.w3.org/1998/Math/MathML）。

/* 默认命名空间 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/* 命名空间前缀名称 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

@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 {}

@keyframes关键帧

@keyframes 规则用于指定动画名称和动画效果。

/* 规定动画语法: from...to...定义的是从开始到结束两个状态 */
@keyframes 动画名称 {
    from{ 开始位置 }  0%
    to{  结束  }  100%
}

/* 规定各个阶段不同的状态的动画(不只有开始于结束状态) */
@keyframes 动画名称 {
    0% {  }
    n1% {   }
    n2% {   }
    n3% {   }
    n4% {   }
    .........
    100% {  }
}

@keyframes goback {
    0% { }
    49% {
        transform: translateX(1000px);
    }
    55% {
        transform: translateX(1000px) rotateY(180deg);
    }
    95% {
        transform: translateX(0) rotateY(180deg);
    }
    100% {
        transform: translateX(0) rotateY(0deg);
    }
}

@supports

@supports 规则用于检测浏览器中是否支持某一个或多个特定的 CSS 功能。这称为特征查询。该规则可以放置在代码的顶层，也可以嵌套在任何其他条件组@规则中。

@supports 规则的条件表达式由一个或多个由逻辑运算符 and、or、not 组合而成的 CSS 属性-值对组成。运算符的优先级可以用括号定义。

最基本的条件表达式是一个简单的声明（属性名后跟一个值，用冒号分隔）。声明必须用括号括起来。如果浏览器中 transform-origin：5% 5% 是有效的，则返回 true：

@supports (transform-origin: 5% 5%) {}

第二个基本支持条件是支持函数，所有浏览器都支持这些语法，但函数本身仍在标准化中。

语法

selector() ： 检测浏览器是否支持选择器语法。

/** 如果支持子选择器，则返回 true **/
@supports selector(A > B) {}

not： 对检测结果取反。下面的例子中，如果浏览器的返回truetransform-origin财产不考虑10em 10em 10em有效：

@supports not (transform-origin: 10em 10em 10em) {}
@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

and： 连接条件表达式，如果连接的两个表达式都为 true，则返回 true。

@supports (display: table-cell) and (display: list-item) {}

or： 连接条件表达式，如果连接的两个表达式有一个为 true，则返回 true。

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

CSS.supports()

CSS API 提供了 supports()方法判断浏览器是否支持给定的 CSS 属性-值，该方法返回布尔值。

注意： 除 IE 6~11，其他主流浏览器都支持该方法。

CSS.supports(propertyName, value)
CSS.supports(supportCondition)

CSS.supports("text-decoration-style", "blink")
CSS.supports("display: flex")
CSS.supports("(--foo: red)")
CSS.supports('(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)')

常见示例

/** 检测 CSS 属性或前缀的支持： **/
@supports (animation-name: test) {}
@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) {}

/** 检测不支持的 CSS 属性 **/
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}

/** 检测自定义属性的支持 **/
@supports (--foo: green) {}

/** 检测选择器的支持 **/
@supports not selector(:is(a, b)) {}
@supports selector(:nth-child(1n of a, b)) {}

@page

@page 规则用于打印文档时修改某些 CSS 属性。它仅支持部分 CSS 属性，支持的属性有：margin、size、marks、bleed 以及页面外边距盒子等，不支持的属性将会被忽略。

@page { margin: 1cm; }
@page :first { margin: 2cm; }

@page 可用的伪类：

  • :blank： 匹配一个空的用户输入元素，包含一个空字符串或其他空输入；
  • :first： 表示打印文档的第一页；
  • :left：表示打印文档的所有左侧页面。注意： 给定页面是【左】还是【右】取决于文档的主要书写方向。例如，如果第一页的主要书写方向是从左到右，那么它将是 :right；如果它的主要书写方向是从右到左，那么它将是 :left 页。
  • :right： 表示打印文档的所有右侧页面。

@document

@document 规则用于指定将样式对一个或多个匹配的 URL 生效。注意： 该规则已被弃用，不推荐使用。

/* 将 CSS 规则应用于:
- URL 为http://www.w3.org/
- http://www.w3.org/Style/ 为前缀的 URL
- 域名是 mozilla.org 或者以 mozilla.org 结尾的域名的 URL 
- 任何独立视频
— 以 https: 开头的 URL
*/
@document url("http://www.w3.org/"),
  url-prefix("http://www.w3.org/Style/"),
  domain("mozilla.org"),
  media-document("video"),
  regexp("https:.*") {
    body {
      color: purple;
      background: yellow;
    }
}

参考资料

MDN CSS @规则

MDN @charset

MDN @import

MDN @supports

© lizhao all right reserved，powered by Gitbook文件修订时间： 2022-01-12 20:24:33

results matching ""

    No results matching ""