重置CSS (Reset CSS) 最近因 @Elad 发布的最新版本而又热闹起来。加上我又热衷于 CSS，只要是有关于 CSS 最有趣、最新、最实用的方面，我都希望能第一时间在国内的社区呈现（分享）。那么问题来了，重置 CSS 已是很古老的话题了，在今天有啥好聊的呢？原本我也是这么想的，但 @Elad 最新版本的重置 CSS 项目，它还是非常有意思的，我觉得有必要拿出来和大家一起分享，或者说聊聊这里面有关于 CSS 方面的新特性。如果你对这方面的话题感兴趣（想一探究竟），那么接下来的内容值得你花点时间阅读。

稍微接触过 CSS 的 Web 开发者，级联（层叠）和继承 是 CSS 领域中的一个非常重要的概念。该功能模块在 W3C 规范中也经历了多个版本的迭代，至今天已有多个版本了（CSS2.2、Level3、Level4 和 Level5），这也足以说明其在 CSS 中的重要性。对于 Web 者而言，在编写 CSS 时，必须仔细考虑如何编写和组织代码。特别是在一个大型项目或多人协作开发的项目中，级联很容易给项目开发造成不少的障碍，比如说代码相互覆盖，选择器权重造成样式的冲突等。为了在这些情况下重新获得对级联（层叠）的控制，CSS Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性，即 @layer 规则（一个新的 @ 规则，也就是大家所说的 at-rule 规则），该规则让 CSS 有了层的概念，可以将 CSS 完全封装起来，以便导入。这意味着模块、脚本或其他任何导入你的项目的东西都可以有完全独立的 CSS，从而解决了样式相互覆盖的老问题，也解决了选择器权重造成的样式冲突问题。它还可以让我们更灵活地使用用自定义导入语句，将CSS添加到到页面中。接下来，让我们来看看它们是什么，我们如何使用它们，以及它们带来了什么好处。

CSS的原生嵌套、作用域（@scope）、级联层（@layer）和容器查询（@container）被称为 下一代 CSS，并且在整个社区得到热议。比如，刚举办的 W3C TPAC 会议就专门有一个这方面的话题。尤其是容器查询（@container），更令人兴奋。从基于页面的响应式设计到基于容器的响应式设计的转变，将对Web设计生态系统的发展产生巨大的影响。因为，容器查询将使单个元素有可能根据局部的环境进行调整，而不是依赖整个视窗的尺寸。从今天开始，我将和大家一起进入容器查询的世界，和大家一起了解为什么需要容器查询，它们将来何使Web设计和开发变得更轻松，最重要的是，容器查询将现更强大的组件和布局，尤其是响应式的布局。

从《初探CSS容器查询》一文中我们知道了容器查询是是什么以及它的作用。使用 contain来创建一个包含上下文，同时使用 @container 规则，可以在符合条件下为查询容器的后代单独指定样式规则。简单地说，可以使用 CSS 容器查询，让同一个组件根据其容器的不同尺寸向用户呈现不同的UI效果。该特性目前是 CSS Containment Level 3 中的一个特性，这个功能模块中除了 contain 和 @container 之外，还新增了一个容器属性 container，也可以使用 container 和 @container 结合实现容器查询效果。在这篇文章中，我们就来看看 container 和 @container 是如何工作的，它们可能会有哪些功能！感兴趣的同学，请继续往下阅读！

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革，十年后的今天，CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大，但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过，庆幸的是，现代的一些 Web 技术（比如，Flexbox、Grid、媒体查询和比较函数等）让我们离容器查询特性更近一步。今天我们来看看，这些现代Web技术是如何让我们离容器查询更近一步。

前段时间我们花了几篇篇幅的内容来介绍 CSS 容器查询特性的使用，并且介绍了现代 Web 布局技术让我们离 CSS 容器查询更近一步，但这些内容都只是和大家聊的是如何使用，以及其对 Web 开发者带来的变化。在介绍 CSS 容器查询特性的时候，也提到过，CSS 容器查询特性除了给 Web 开发者带来变化的同时也给 Web 设计者带来变化。那么，今天我们来和大家一起聊聊 CSS 容器查询给设计将带来什么样的变化。感兴趣的同学，请继续往下阅读。

最近在团队内搞Design Token 输出 CSS 或 JavaScript 变量的一些事情，希望使用 Design Tokens 来描述一个组件的可变参数，从而基于一个 UI 设计能动态输出多个 UI 效果。为此从颜色系统这一块着手，希望使用 Design Token 和 CSS 变量能构建一个具有可访问性的颜色系统。在这篇文章中想和大家一起聊聊这方面的话题，希望大家感兴趣。

这是有关于响应式图片使用的第三部分，在第一部分中主要和大家一起聊了些和响应式布局相关的概念和术语；第二部分主要和大家聊的是<img>新增属性srcset和sizes如何让我们根据用户代理环境加载不同尺寸的图片。而今天将和大家一起探讨 HTML5中的<picture>元素又是如何帮助我们根据用户代理的环境加载不同的图片。如果你对这方面感兴趣的话，请继续往下阅读。

前面我们花了较多的篇幅围绕着 HTML 的 <img> 和 <picture> 元素是如何构建响应式图片。在 <img> 标签元素上可以使用 srcset 和 sizes 属性大不同环境下提供不同尺寸的图片；在 <picture> 中使用 <source> ，并且结合media、srcset、sizes和type等属性可以为用户提供不同图片（环境不同提供不同的图片）和不同类型图片（type指定图片类型）等。但在 Web 开发中，很多时候还会使用背景图片（background-image）、边框图片（border-image）和蒙板图片（mask-image）等。我们接下来围绕着 CSS 中的背景图片（background-image）来展开，换句话说，在background-image中是否也可以像 <img> 和 <picture> 一样，根据用户环境来提供不同的图片。

CSS 的 border-radius 技术已经是非常成熟的技术了，在现代 Web 开发的过程中，实现圆角的效果都是使用 border-radius 来实现。使用 border-radius 来给一个盒子添加圆角效果已经是最为常见，最简单的技术了，但前段时间在 Twitter 上看到 @Ahmad Shadeed 发的一条推特信息说：“Facebook 应用在border-radius上使用了 CSS 的比较函数（比如 min()和max()）来实现按条件给元素设置圆角效果”。这一说法并得到了 Facebook 的工程师 @Frank Yan的确认。Facebook 的工程师使用了一种被称为 “Fab Four” 技术，可以让圆角根据一定的条件来设置不同的值。不知道你是否对该技术感到好奇呢？CSS 是如何有条件地将border-radius设置不同的值。如果您感兴趣的话，请继续往下阅读。