css --- 你不知道的条件 css条件CSS（Conditional CSS）现在被纳入到 CSS Conditi

条件CSS的简介

条件CSS（Conditional CSS）现在被纳入到 CSS Conditional Rules Module Level 3 模块中。事实上，条件CSS的开发源于在多数浏览器上修正CSS渲染bug的需求，以确保尽量多的用户看到正确的网站设计。核心思想是建立在IE条件注释方法，并扩展到包含其他的浏览器，而且将条件声明内联到CSS定义里面。

条件CSS分类

三个@规则

@media
@supports
@viewport

其中@media和@supports两个规则是我们常见的规则，也是真正的条件CSS，而@viewport并不常见，但也不是真正的条件。

CSS中的@规则

CSS的@规则（at-rule）是一条语句，它为CSS提供了执行或如何执行的指令。

@规则的每个语句都是以@开头，后面直接跟着相应的关键词，这些关键词充当CSS应该做什么的标识符。

CSS的@规则主要分为常规规则和嵌套规则两大类。

常规规则


@[关键词](规则)

常规规则常见的主要：

$\color{red}{@charset}$

大家不知道有没有印象，早期在创建.scss或.less文件时都会要求在第一行中使用@charset来声明字符集，比如：

@charset 'utf-8'

$\color{red}{@import}$

允许用户从其他样式表导入样式规则

@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville");
@import url("print.css") print;
@import url("tv.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

导入样式规则时，就好像文件的内容就在规则所在的位置一样。这些规则必须先于所有其他类型的规则， $\color{red}{@charset}$ 规则除外，否则 $\color{red}{@import}$ 规则会不生效。

$\color{red}{@namespace}$

对于很多同学而言会感到陌生。从词面上来了解，它是用来声明一个命名空间前缀，并将其与给定的命名空间关联起来。然后可以在命名空间限定的名称中使用此命名空间前缀。该规则对于将CSS应用到XHTML中特别有用，这样一来，XHTML元素就可以用作CSS中的选择器。可以使用定义的命名空间来限制泛型、类型和属性选择器，只选择该命名空间中的元素。@namespace规则通常只在处理包含多个命名空间的文档时有用，比如包含内联SVG或MathML的HTML，或者包含多个词汇表的XML。

特别提醒：

1. 任何@namespace规则都必须遵循所有@charset和@import规则，并位于样式表中所有其他@规则和样式声明之前

2. @namespace规则可以用于定义样式表的默认命名空间。定义默认命名空间时，所有通用选择器和类型选择器（不包含属性选择器）仅应用于该命名空间中的元素

3. @namespace规则还可以用于定义命名空间的前缀。如果泛型、类型和属性选择器的前缀是命名空间的前缀，那么该选择器只在元素或属性的命名空间和名称匹配时才匹配

嵌套规则

嵌套规则和常规规则不同的是，在规则后面会带一个花括号{}

@[关键词] {
    /* 样式规则 */
}

$\color{red}{@font-face}$

$\color{red}{@keyframes}$

$\color{red}{@@media}$

$\color{red}{@supports}$

未完待续。。。。

参考资料：大漠老师的css中的规则