从任何角度来看，近年来 CSS 都取得了显著的进步。它拥有了更多实用功能，浏览器之间的互操作性得到了改进，并且随着 CSS 逐渐成为一个摆脱各种奇技淫巧和怪癖的统一系统，学习它也变得更加简单。
但真正重要的是现实世界——真正的网站，以及它们对我们制作的事物和使用它们的人们的实际影响。
效果确实显而易见。
虽然这一切都很美妙，但实际上，我对 CSS 的热情来自以下“科学”数据：
饼图：
CSS 在网站中的使用比例
你觉得 WordPress 规模大？看看 CSS 吧，哈哈。
接下来，让我们看看五个对现实世界开发真正重要的 CSS 新特性。
逻辑属性与布局
首先，让我们从一个实际案例入手，看看这篇文章的布局：
截图展示了 Safari 浏览器中打开的文章页面。页面设计以一张全屏照片为主，标题和副标题被安置在左下角。顶部黑色横条内有 CNN 的红色 logo 和 Twitter、Facebook 的图标。
📰 -> “I Just Wanna Surf”
作者：Leah Asmelash，摄影：Gabriella Angotti-Jones
设计非常精美。这篇文章是那种经过“艺术指导”的特别设计内容，脱离了新闻网站的普通模板。它通常用于那些需要额外关注（以及更多流量）的特别文章，效果显然很不错。
设计师和开发者为这篇文章付出了努力 👩🎨。整体效果很好，排版优雅，响应式设计也到位。
第二张截图展示了该文章在 iPhone 14 Pro Max 模拟器中的效果：图片缩小至页面顶部的三分之一，标题和正文内容在其下方。
我们已经进入响应式设计的时代十多年了，看到这样的文章能顺利调整到移动友好的布局，真令人欣慰。
不过，即使如此，我们仍能发现一些 CSS 可以用更新的方法替代，从而带来切实的好处，或者至少能让我借此机会阐明 CSS 的几个要点。
CSS 逻辑属性示例
在大屏幕设备上，常见的做法是将内容区域居中。通过限制内容的行宽使其易于阅读，这是一种不错的选择。以下是一种常见的实现方法：
header {
max-width: 64rem;
margin-left: auto;
margin-right: auto;
height: 100vh;
}
注意，这里使用了视口单位设置 height 值，定义了文章的头部区域。设计师希望用户进入文章时能先看到一张大照片，标题则放在左下角。
下面是一个使用逻辑属性实现同样效果的版本：
header {
max-inline-size: 64rem;
margin-inline: auto;
block-size: 100dvh;
}
与前者效果相同，但逻辑属性使用了更符合逻辑的命名方式：
-
max-inline-size替代max-width，根据文本流动方向限制元素大小。 -
block-size替代height，表示垂直方向的尺寸。 -
margin-inline为水平两侧的简写，简化了代码。
逻辑属性核心概念
-
inline：文本流动的方向（通常是水平的）。 -
block：与文本流动方向垂直的方向（通常是垂直的）。
例如，以下是一些逻辑属性与传统属性的对比：
| 传统属性 | 对应的逻辑属性 |
|---|---|
width |
inline-size |
right |
inset-inline-end |
margin-left |
margin-inline-start |
overflow-x |
overflow-inline |
resize: horizontal |
resize: inline |
text-align: right |
text-align: end |
逻辑属性通过一致的命名方式，更加直观且易于理解，特别是在多语言场景中尤为重要。例如：
- 使用
margin-inline-end可以确保按钮在从左到右（LTR）和从右到左（RTL）语言环境下的布局一致。 - 传统的硬编码值可能导致翻译后的页面看起来不对劲，而逻辑属性可以动态适配。
改进后的案例
通过逻辑属性改写文章头部的布局代码：
.article-header {
position: absolute;
max-inline-size: 50%;
inset-block-end: 1rem;
inset-inline-start: 1rem;
text-align: start;
}
这样，当页面被翻译成 RTL 语言（如阿拉伯语）时，文本会自动调整到更合适的位置，例如右下角，而不是继续对齐到左侧，从而带来更好的用户体验。
