带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（15）https://developer.aliyun.com/article/1340881?groupCode=taobaotech
在forced-colors媒体查询特性中重新定义了 --dialog-border-width 的值。这样做的原因是一个非常有意思的调整。它把细的焦点框（outline）变成了一个粗的。这样调整有助于显示模态框的外部边界，并传达它是漂浮在页面 其他内容之上的信息。强制色彩模式删除了模态框的盒子阴影（box-shadow），所以我们不能在这种专门的浏览 模式下依赖这种视觉效果：
如果你对上面提到的媒体查询特性感兴趣的话，可以深入阅读下面这几篇文章：
- Media features
（地址：https://web.dev/learn/design/media-features/）
- CSS媒体查询新特性
（地址：https://www.w3cplus.com/css/new-css-media-queries.html）
- 系统偏好设置的那些事儿
（地址：https://www.w3cplus.com/css/css-system-things.html）
- 图解CSS: CSS媒体查询
（地址：https://www.w3cplus.com/css/css-media-queries-guide.html）
响应容器的需求
CSS的媒体查询引发了一场响应式设计的革命，为开发者提供了一种方法来查询用户代理或设备环境的各个方面， 比如视窗的大小或用户偏好来改变 Web 页面的风格。直到现在，媒体查询还做不到让元素的样式能根据一个最近的容器的大小来改变样式风格。也正因此，大家一直期待的容器查询来了。
很难想象，从基于页面的响应式设计（媒体查询）到基于容器的响应式设计（容器查询）的转变，对设计生态系统的发展会起到什么作用？
为了回答这个问题，接下来我们分几个方面来介绍，希望能给大家带来一定的思考，从而得到自己想要的答案。
容器查询的发展历程
正如我在《2022年的CSS》（地址：https://www.w3cplus.com/css/what-is-new-css-in-2022.html）一文 中所提到的那样。一直以来，CSS 容器查询都是大家期待的一个特性，在这几年的CSS发展报告中，他一直位居第一：
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（17）https://developer.aliyun.com/article/1340878?groupCode=taobaotech
