1. 使用 object-fit 优化图像缩放

object-fit 属性使得 img 元素 或其他替换元素的行为类似于其内容的容器，并使其内容采用类似于 background-size 的调整大小行为。最常用的值是 cover 和 scale-down：

• cover：图像调整大小以覆盖整个元素，并保持其宽高比，以防止内容失真。
• scale-down：图像在需要时调整大小以完全可见，不被裁剪，并保持其宽高比。如果元素的渲染宽高比不同，这可能导致图像周围有额外的空间（“黑边”）。

示例：

.image {
  object-fit: cover;
  aspect-ratio: 1;
  max-block-size: 250px;
}

2. 使用 margin-inline 简化内联边距

margin-inline 是一个逻辑属性，作为设置内联方向（水平书写模式下的左和右）边距的简写形式。这可以简化代码，使其更加直观和易读。

示例：

/* 传统写法 */
margin-left: auto;
margin-right: auto;
 
/* 现代写法 */
margin-inline: auto;

3. 使用 text-underline-offset 控制下划线距离

text-underline-offset 允许您控制文本基线和下划线之间的距离。这可以避免下划线与字母的降部（descenders）相交，从而提高可读性。

示例：

a {
  text-underline-offset: 0.25em;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

4. 使用 outline-offset 调整焦点轮廓

outline-offset 允许您通过正数值将轮廓推离元素，或通过负数值将轮廓拉入元素。这在处理固定导航栏覆盖内容的问题时非常有用。

示例：

[id] {
  scroll-margin-top: 2rem;
}
 
[id] {
  outline: 2px dashed blue;
  outline-offset: var(--scroll-margin, 2rem);
}

5. 使用 scroll-margin-top 处理固定导航栏

scroll-margin-top 允许您在滚动到元素时增加上方的空间，以补偿固定导航栏占用的空间。这可以防止导航栏覆盖内容。

示例：

[id] {
  scroll-margin-top: 2rem;
}

6. 使用 color-scheme 自定义浏览器 UI 元素

color-scheme 属性允许您选择性地适应浏览器的 UI 元素，包括表单控件、滚动条和 CSS 系统颜色。通过设置 color-scheme，您可以要求浏览器以浅色或深色方案渲染这些元素。

示例：

:root {
  color-scheme: dark light;
}
 
.dark-background {
  color-scheme: dark;
}

7. 使用 accent-color 自定义表单控件颜色

accent-color 属性允许您更改复选框、单选按钮、进度条和范围输入的默认颜色。这可以帮助您快速实现主题管理，提升用户体验。

示例：

:root {
  accent-color: mediumvioletred;
}

8. 使用 width: fit-content 动态调整宽度

fit-content 使元素根据其内容“收缩包裹”，而不会改变元素的显示类型。这对于需要动态调整宽度的元素非常有用。

示例：

.fit-content {
  width: fit-content;
}
 
.fit-content-logical {
  inline-size: fit-content;
}

9. 使用 overscroll-behavior 防止滚动传递

overscroll-behavior 属性可以控制滚动区域在达到边界时的行为。设置为 contain 时，滚动将仅限于当前区域，不会传递到父页面。

示例：

.sidebar,
.article {
  overscroll-behavior: contain;
}

10. 使用 text-wrap 改善文本排版

text-wrap 属性解决了排版中常见的不平衡行问题，包括防止“孤儿”（即最后一行中单独出现的单词）。

示例：

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
  max-inline-size: 25ch;
}
 
p {
  text-wrap: pretty;
  max-inline-size: 35ch;
}

11. 使用 scrollbar-gutter 预留滚动条空间

scrollbar-gutter 属性允许在布局中预留滚动条的空间，从而防止因滚动条的出现或消失而导致的布局变化。

示例：

.scroll-container {
  scrollbar-gutter: stable both-edges;
  padding: 1rem;
  height: 300px;
  overflow-y: auto;
}

12.使用 aspect-ratio 维持元素的比例

aspect-ratio 是一个现代 CSS 属性，允许您指定元素的宽高比，确保元素在不同屏幕尺寸和布局中保持一致的比例。这对于响应式设计和媒体元素（如图片和视频）尤其有用。

示例：

.image {
  aspect-ratio: 16 / 9; // 设置元素的宽高比为16:9，常用于宽屏图片和视频。
  width: 100%; // 设置元素的宽高比为4:3，常用于标准比例的图片和视频。
  max-width: 600px;
}
 
.video-container {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 800px;
}

结语

以的 CSS 升级方案，不仅简化了代码，还提升了用户体验。通过合理使用这些新属性，可以更高效地解决常见的布局和样式问题。