介绍一个和深色模式相关的CSS属性：color-scheme

一、什么是 color-scheme？

color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案，语法如下…

本文介绍 CSS 视口的新引入的长度单位，专为适配移动设备的动态工具栏而设计。

大型、小型和动态视口单元

新的 CSS 单元，用于处理带有动态工具栏的移动视口。

早在去年 12 月，我们就写了一篇文章，详细介绍了 CSS 嵌套的三种不同选择。在其中，我们解释了选项 3、选项 4 和选项 5 之间的区别，并通过一系列示例演示了每个选项的工作原理。然后我们问了一个简单的问题：“哪个选项最适合 CSS 的未来？”

Web 开发人员非常清楚地回应了民意调查。选项 3 以压倒性优势获胜。

所以现在，Safari 和 Chrome 都实现了选项 3。两周前，也就是 1 月 25 日，CSS Nesting在Safari Technology Preview 162中默认启用。如果您有 Mac，只需下载并打开 …

-webkit-text-size-adjust的用法如下：
1、之前可以设置一个百分比然后可以在网页上（pc）显示小于12px的字体，但后来谷歌新版本已经不支持这个属性了。如果还想实现小于12px的字体，要用-webkit-transform:scale(0.8)
2、在移动设备上如手机和平板横屏会导致字体变大，-webkit-text-size-adjust: 100%可以禁止字体变化。
3、-webkit-text-size-adjust放在body上会导致页面缩放失效
4、body会继承定义在html的样式
5、用-webkit-text-size-adjust不要定义成可继承的或全局的

…

默认情况下，an<img>占用零空间，直到浏览器加载足够的图像以知道其尺寸：

重置

运行演示时，您会<figcaption>立即看到。然后，几秒钟后，这一段和随后的页面内容向下移动，为图像腾出空间。这使得用户体验非常令人沮丧，因为内容从用户的眼睛/手指/指针下方移出。

十多年来，我们不得不使用愚蠢的技巧来手动应用纵横比，然后，典型的，两个更好的解决方案几乎同时出现。它们是 CSSaspect-ratio和width&height表示性提示。

那么，您应该使用哪个？首先，让我们看看这些功能是如何工作的，因为那里有很多错误信息……

CSS 纵横比

如果你这样做：

.aspect-ratio-demo {
  aspect-ratio: 16 / 9;
}

......你得到这个：

该功能于 2021 年末登陆 Safari 15 …