12个更现代化的CSS单行优化技巧

本文翻译自 12 Modern CSS One-Line Upgrades，作者：Stephanie Eckles，略有删改。

有时候，改进你的CSS只需要一行代码即可增强！本文了解12个属性，开始将其整合到您的项目中，并享受减少技术债务，删除JavaScript和轻松赢得用户体验。

将分为以下类别的特性：

• 稳定升级：通过替换旧技术来修复黑客或问题
• 稳定的增强功能：通过支持良好的现代属性提供更好的体验
• 渐进式增强：在支持这些属性时提供升级的体验，而不会在不支持的浏览器中造成损害

稳定升级

以下支持的属性可以通过替换旧技术来帮助修复历史hack或长期存在的问题。

aspect-ratio

您是否曾经使用“padding hack”来强制视频嵌入采用 16:9 等宽高比？截至 2021 年 9 月，aspect-ratio 属性在常用浏览器中保持稳定，并且是定义宽高比所需的唯一属性。

对于高清视频，您可以使用aspect-ratio: 16/9。对于完美的正方形，只需要aspect-ratio: 1，因为默认的第二个值也是1。

object-fit

这实际上是这个列表中最古老的属性，但它解决了一个重要的问题，并且绝对符合单行升级的感觉。

使用object-fit会导致img或其他被替换的元素充当其内容的容器，并使这些内容采用类似于background-size的行为。

虽然有一些值可用于object-fit，但以下是您最有可能使用的值：

• cover - 图像调整大小以覆盖元素，并保持其纵横比，以便内容不失真
• scale-down - 图像在元素内调整大小，以便它完全可见而不被剪切并保持其纵横比，如果元素具有不同的渲染纵横比，则可能导致图像周围的额外空间

在任何一种情况下，object-fit都是与aspect-ratio配对的优秀属性，以确保在应用自定义宽高比时图像不会失真。

margin-inline

这个属性已经可用了几年，现在支持率高达98%。margin-inline用作设置行内（水平书写模式下的左和右）边距的简写。

这里的替换很简单：

/* Before */
margin-left: auto;
margin-right: auto;

/* After */
margin-inline: auto;

稳定的增强功能

这些得到良好支持的现代CSS属性可以提供更好的用户体验。它们使得网页设计和开发更加高效和便捷。替代旧方法，并减少对后备解决方案的依赖。但是否需要后备方案还取决于具体应用场景，并且测试仍然是必要的。

text-underline-offset

使用text-underline-offset可以控制文本基线和下划线之间的距离。此属性已成为我的标准重置的一部分，应用如下：

a:not([class]) {
    text-underline-offset: 0.25em;
}

您可以使用此偏移量来优化下划线部分，提高可读性，特别是当链接被分组在非常接近的位置时，例如链接有项目符号列表。

这个升级可能会取代旧的hack，比如边框或伪元素，甚至是渐变背景：

• text-decoration-color 更改下划线颜色
• text-decoration-thickness 更改下划线笔划粗细。

outline-offset

当您希望元素与焦点上的轮廓之间保持距离时，您是否一直在使用 box-shadow 或伪元素来提供自定义轮廓？

好消息啊！长期可用的outline-offset可能是您错过的一个元素，它允许将轮廓推离具有正值的元素或将其拉入具有负值的元素。

下面演示中，灰色实线是元素边框，蓝色虚线是通过outline-offset定位的轮廓。

提醒事项：轮廓不作为元素框大小的一部分计算，因此增加距离不会增加元素占用的空间量。这类似于box-shadow的渲染方式，而不会影响元素的大小。

scroll-margin-top/bottom

scroll-margin属性集（以及相应的scroll-padding）允许在滚动位置的上下文中向元素添加偏移量。换句话说，添加scroll-padding-top可以增加元素上方的滚动偏移量，但不会影响其在文档中的布局位置。

为什么这是有用的？它可以缓解当激活链接时，由覆盖内容的粘性导航元素引起的问题。使用scroll-margin-top，我们可以在通过导航滚动到元素时增加元素上方的空间，以考虑粘性导航占用的空间。

我喜欢在我的reset css 中为任何具有[id]属性的元素设置这个规则，因为它有可能成为一个锚链接。

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

color-scheme

您可能熟悉用于自定义深色和浅色主题的prefers-color-scheme媒体查询。CSS属性color-scheme是一个可选择的选项，用于调整浏览器UI元素，包括表单控件、滚动条和CSS系统颜色。适配要求浏览器使用light或dark方案呈现这些项，并且属性允许定义首选项顺序。

如果您要调整整个应用程序，请在:root上设置以下内容，即首选dark主题。

:root {
    color-scheme: dark light;
}

您还可以在单个元素上定义color-scheme，例如调整具有深色背景的元素内的表单控件以提高对比度。

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

accent-color

如果您曾经想要改变复选框或单选按钮的颜色，您可能会发现 accent-color 属性非常有用。通过使用此属性，您可以自定义单选按钮和复选框在选中状态下的外观，以及进度条和范围输入的填充颜色。

可以考虑将 accent-color 和 color-scheme 同时添加到您的基础应用样式中，以便快速实现自定义主题管理。

width: fit-content

我最喜欢的 CSS 隐藏技巧之一是使用 fit-content 来适应内容的大小。虽然您可能使用过 display: inline-block 这样的行内显示值来将元素的宽度缩小到内容大小，但将宽度设置为 width: fit-content 也能实现相同的效果。width: fit-content 的优点在于它保留了显示值，因此不会改变元素在布局中的位置，除非您也调整该值。计算出的盒子大小将根据 fit-content 创建的尺寸进行调整。

渐进式增强

这一组属性在被支持时提供了更好的体验，并且可以在不支持的浏览器中使用时无需担心造成问题。这意味着尽管它们是现代 CSS 的较新添加，但不需要考虑回退方法。

overscroll-behavior

默认情况下，包含滚动区域的行为是，当元素中的滚动结束时，滚动交互会传递到背景页面。这对用户来说，体验可能不太友好。

使用 overscroll-behavior: contain 可以将滚动限制在包含区域内，防止在达到滚动边界后继续滚动并将其移动到父页面。这在某些上下文中非常有用，例如导航链接的侧边栏，它可能与主页面内容（如长文章或文档页面）有独立的滚动。

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

text-wrap

截至 2023 年，最新的属性之一是 text-wrap，它有两个值，可以解决排版中不平衡行的问题。这包括防止“orphans”现象，即在最后一行文本中独自存在的孤零零的单词。

第一个可用的值是 balance，其目标是使每行文本的字符数量均匀分布。该技术对包裹文本的行数有限制，最多为六行，因此最适合用于标题或其他较短的文本段落。限制应用范围也有助于减少对页面渲染速度的影响。

pretty是另一个值专门用于防止“orphans”，可以更广泛地应用。pretty背后的算法将评估文本块中的最后四行，以根据需要进行调整，以确保最后一行包含两个或更多单词。

使用text-wrap是一个很好的渐进式增强。任何调整都不会更改元素的计算宽度，因此某些布局中的副作用可能是增加文本旁边不需要的空间。

scrollbar-gutter

在某些情况下，滚动条的出现或消失可能会导致不必要的布局偏移。例如当显示对话框覆盖时，背景页面添加overflow: hidden以防止滚动，从而导致从移除不再需要的滚动条的转变。

现代CSS属性scrollbar-gutter允许在布局中为滚动条保留空间，这可以防止不必要的移动。当不需要滚动条时，浏览器仍然会绘制一个空间，作为除了滚动容器上的任何填充之外创建的额外空间。

由于这是视觉上明显的额外空间，您可以选择使用两个关键字来分配此属性：scrollbar-gutter: stable both-edges。使用stable本身只会在滚动条所在的位置添加一个空间，而添加both-edges首选项也会在滚动条的另一侧添加空间。这确保了在布局不需要滚动条可见时的视觉平衡。

总结

文本介绍了12个现代CSS属性，这些属性可以帮助开发者通过简单的一行代码升级来改善网页应用的CSS，减少技术债，去除JavaScript依赖，并提升用户体验。这些属性分为三类：稳定升级、稳定增强和渐进增强，涵盖了从修复旧技术问题到提供更好的用户体验。