有趣又实用的 CSS 特性

分页媒体 @page，和媒体查询一样，同属于 At Rules 大家庭中其中一员。它可以用来指定页面框的各个方面，例如其尺寸、方向和边距等 (不仅限于打印使用)。

目前浏览器实现动画的方式有如下两种 JS 动画 和 CSS 动画，本篇详细讲解 CSS 动画：CSS Transition过渡 和 CSS Animation 动画。

本篇主要讲解了 CSS Nesting 原生嵌套语法的定义和使用。并相比于 CSS 预处理器，简述了它们的区别和优势。

CSS 社区模块化方案 `OOCSS`、`BEM`、`SMACSS`、`ITCSS`、`CSS Modules` 、`CSS-In-JS` 以及 `CSS 原生作用域@scope`。

由于不同浏览器对 Web 标准的支持度各有不同，所以在使用较新的语法或特性时，我们通常使用特性查询，即 `@supports` 来应用支持或不支持某个属性-值对的样式。

级联层提供了一种结构化的方式来组织和平衡单个源中的关注点。单个级联层内的规则级联在一起，而不与层外的样式规则交错。

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其应用特定的 CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

容器查询 即 `@container` 规则，它可以使你能够根据元素容器不同的大小尺寸，对其内部元素进行特定样式的设置和布局。完美解决了组件根据父容器尺寸进行不同的适配和布局的需求。