有时，改进您的应用程序 CSS 只需要一行升级或增强！了解 12 个属性，开始整合到您的项目中，并享受减少技术债务、删除 JavaScript 和轻松赢得用户体验的乐趣。
探索以下类别的属性：
稳定升级
aspect-ratio
您是否曾经使用过“填充技巧”来强制视频嵌入的纵横比（如 16：9）？截至 2021 年 9 月，aspect-ratio 属性在 evergreen 浏览器中是稳定的，并且是定义纵横比所需的唯一属性。
对于高清视频，您可以只使用 aspect-ratio： 16/9。对于完美正方形，只需要 aspect-ratio： 1 ，因为隐含的第二个值也是 1。
.aspect-ratio-hd {
aspect-ratio: 16/9;
}
.aspect-ratio-square {
aspect-ratio: 1;
}值得注意的是，应用的纵横比是宽容的，并且允许内容优先。这意味着，当内容导致元素在至少一个维度上超过比率时，元素仍将增长或改变形状以适应内容。为了防止或控制这种行为，你可以添加额外的维度属性，比如 max-width，这可能是避免扩展出 Flex 或 grid 容器所必需的。
如果您犹豫是否要完全替换填充技巧，但仍希望提供一些尺寸护栏，请查看 Smol 纵横比库，了解逐步增强的纵横比解决方案。
object-fit
这实际上是此列表中最古老的属性，但它解决了一个重要问题，并且绝对符合单行升级的情绪。
使用 object-fit 会导致 img 或其他被替换的元素充当其内容的容器，并使这些内容采用类似于 background-size 的大小调整行为。
虽然有一些值可用于 object-fit，但以下是您最有可能使用的值：
cover- 图像调整大小以_覆盖_元素，并保持其纵横比，以便内容不会失真缩小- 图像在元素_内_调整大小（如果需要），使其完全可见而不被剪切并保持其纵横比，如果元素具有不同的呈现纵横比，这可能会导致图像周围出现额外的空间（“信箱”）
无论哪种情况，object-fit 都是与 aspect-ratio 配对的出色属性，可确保在应用自定义纵横比时图像不会失真。
“Use of object-fit with aspect-ratio” 的 CSS
.image {
object-fit: cover;
aspect-ratio: 1;
/* Optional: constrain image size */
max-block-size: 250px;
}回顾一下我在这个免费的 Egghead 视频课程中对 object-fit 的解释。
margin-inline
margin-inline 是许多逻辑属性之一，用作设置 inline （在水平书写模式下的 left 和 right） 外边距的简写。
此处的替换很简单：
/* Before */
margin-left: auto;
margin-right: auto;
/* After */
margin-inline: auto;逻辑属性已经存在了几年，现在支持超过 98% （偶尔会有前缀）。查看 Ahmad Shadeed 的这篇文章，了解有关使用逻辑属性及其对拥有国际受众的网站的重要性的更多信息。
稳定增强功能
这些得到充分支持的现代 CSS 属性可以提供更好的体验，并且还可能允许替换旧方法甚至 JavaScript 辅助解决方案。不太可能需要回退解决方案，尽管这取决于您的特定应用程序注意事项，并且始终鼓励进行测试。
text-underline-offset
使用 text-underline-offset 允许您控制文本基线和下划线之间的距离。此属性已成为我的标准重置的一部分，应用如下：
a:not([class]) {
text-underline-offset: 0.25em;
}您可以使用此偏移量来清除下行字母以及（主观地）提高易读性，尤其是在链接分组得很近时，例如链接的项目符号列表。
此升级可能会替换旧的 hack，如边框或伪元素，甚至是渐变背景，尤其是在与其朋友一起使用时：
- text-decoration-color 更改下划线颜色
- text-decoration-thickness to change the underline stroke thickness.
outline-offset （轮廓偏移）
当您希望焦点上元素和轮廓之间保持距离时，您是否一直在使用 box-shadow 或伪元素来提供自定义轮廓？
好消息！长期可用的 outline-offset 属性（早在 2006 年！）可能是您错过的，它可以将轮廓从正值的元素中推开，或者将其拉入具有负值的元素中。
在演示中，灰色实线是元素边框，蓝色虚线是通过 outline-offset 定位的轮廓。
.outline-offset {
outline: 2px dashed blue;
outline-offset: var(--outline-offset, .5em);
}
提醒：轮廓_不会_作为元素框大小的一部分进行计算，因此增加距离不会增加元素占用的空间量。这类似于在不影响元素大小的情况下渲染 box-shadow 的方式。
详细了解如何使用 outline-offset 作为焦点可见性的辅助功能改进。
scroll-margin
scroll-margin 属性集（以及相应的 scroll-padding）允许在滚动位置的上下文中向元素添加偏移量。换句话说，添加 scroll-padding-top 可以增加元素上方的滚动偏移量，但不会影响其在文档中的布局位置。
为什么这很有用？嗯，它可以缓解在激活锚链接时由粘性导航元素覆盖内容引起的问题。使用 scroll-margin-top，当通过导航滚动到元素时，我们可以增加元素上方的空间，以考虑粘性导航所占用的空间。
我喜欢在我的重置中为任何具有 [id] 属性的元素包含一个通用的起始规则，因为它有可能成为锚链接。
[id] {
scroll-margin-top: 2rem;
}在关于基于组件的体系结构的现代 CSS 文章中探讨了另一种选择器，该选择器也在此站点上使用，可以使用文章目录侧边栏中的链接进行测试。
在考虑粘性、固定或绝对定位元素的重叠时，要获得更可靠的解决方案，您可能需要使用具有 fallback 值的自定义属性。然后，在 JavaScript 的帮助下，测量所需的实际距离并更新自定义属性值。
[id] {
/* Update --scroll-margin with JS if needed */
scroll-margin-top: var(--scroll-margin, 2rem);
}我鼓励您进一步更新此解决方案，并使用等效的逻辑属性：scroll-padding-block-start 和 -block-end。
color-scheme
您可能熟悉用于自定义深色和浅色主题的 prefers-color-scheme 媒体查询。CSS 属性 color-scheme 是调整浏览器 UI 元素（包括表单控件、滚动条和 CSS 系统颜色）的可选选项。该适配要求浏览器使用浅色或深色方案呈现这些项目，并且该属性允许定义首选项顺序。
如果要启用调整整个应用程序，请在 ：root 上设置以下内容，表示优先使用深色主题（或翻转顺序以优先使用浅色主题）。
:root {
color-scheme: dark light;
}您还可以在单个元素上定义颜色方案，例如调整具有深色背景的元素中的表单控件以提高对比度。
.dark-background {
color-scheme: dark;
}从 Sara Joy 的演示文稿中了解如何使用配色方案轻松实现深色模式，以及有关合并此功能的更多信息。
accent-color
如果您曾经想更改复选框或单选按钮的颜色，那么您一直在寻找强调色。使用此属性，您可以修改单选按钮和复选框的 ：checked 外观，以及 progress 元素和 range 输入的填充状态。如果您没有其他覆盖，也可以调整浏览器的默认焦点 “halo”。
CSS for “Effect of using accent-color”
:root {
accent-color: mediumvioletred;
}收音机 Checkbox 范围 进展
考虑将 accent-color 和 color-scheme 添加到您的基线应用程序样式中，以快速实现自定义主题管理。
如果您需要更全面的表单控件自定义样式，请查看从单选按钮开始的现代 CSS 系列。
宽度： fit-content
我最喜欢的 CSS 隐藏宝藏之一是使用 fit-content 将元素“收缩包装”到其内容中。
虽然你可能已经使用了内联显示值（如 display： inline-block）将元素的宽度减小到内容大小，但升级到 width： fit-content 将实现相同的效果。width： fit-content 的优点是它使显示值可用，因此不会更改元素在布局中的位置，除非你也调整它。计算的框大小将根据 fit-content 创建的尺寸进行调整。
“fit-content 的基本用法”的 CSS
.fit-content {
width: fit-content;
}
fit-content 值是启用内部大小的几个关键字之一。
考虑将此技术二次升级到等效于 inline-size： fit-content 的逻辑属性。
渐进式增强功能
这最后一组属性在受支持时提供升级体验，并且可以使用而不必担心在不支持的浏览器中造成损害。这意味着它们不需要 fallback 方法，即使它们是现代 CSS 的最新成员。
overscroll-behavior （超滚动行为）
包含的滚动区域（允许滚动溢出的维度有限的区域）的默认行为是，当滚动在元素中用完时，滚动交互将传递到后台页面。这在最好的情况下可能会令人不安，在最坏的情况下可能会让您的用户感到沮丧。
使用 overscroll-behavior： contain 会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
.sidebar, .article {
overscroll-behavior: contain;
}
text-wrap
最新的属性之一（截至 2023 年）是 text-wrap，它有两个值来解决不平衡行的排版问题。这包括防止 “orphans”，它描述了一个孤独的词单独位于文本的最后一行。
第一个可用值是 balance，它的目标是使每行文本的字符数均匀分布。
换行文本限制为六行，因此该技术最适合用于标题或其他较短的文本段落。限制应用程序范围还有助于限制对页面呈现速度的影响。
用于 “Applying text-wrap： balance” 的 CSS
:is(h1, h2, h3, h4, .text-balance) {
text-wrap: balance;
/* For demonstration */
max-inline-size: 25ch;
}此文本已通过 text-wrap 进行平衡
此文本未通过 text-wrap 进行平衡
pretty 的另一个价值专门解决了防止孤儿的问题，并且可以更广泛地应用。pretty 背后的算法将评估文本块中的最后四行，以根据需要进行调整，以确保最后一行包含两个或多个单词。
用于 “Applying text-wrap： balance” 的 CSS
p {
text-wrap: pretty;
/* For demonstration */
max-inline-size: 35ch;
}
pretty 的另一个价值专门解决了防止孤儿的问题，并且可以更广泛地应用。pretty 背后的算法将评估文本块中的最后四行，以根据需要进行调整，以确保最后一行包含两个或多个单词。
使用文本换行是一项很好的渐进式增强功能。但是，任何调整都不会更改元素的计算宽度，因此某些布局中的副作用可能是文本旁边不需要的空间增加。
scrollbar-gutter
在某些情况下，滚动条的出现或消失可能会导致不需要的布局偏移。例如，当显示对话框叠加层并且[[背景页面添加 overflow： hidden 以防止滚动]]时，导致不再需要的滚动条发生偏移。
现代 CSS 属性 scrollbar-gutter 允许在布局中为滚动条预留空间，从而防止这种不需要的偏移。当不需要滚动条时，浏览器仍会将间距绘制为除了滚动容器上的任何填充之外创建的额外空间。
重要说明：仅当用户的系统设置_不是_针对“叠加”滚动条时，此属性才有效，就像 Mac OS 的默认设置一样，其中滚动条仅显示为正在主动滚动的内容上的叠加。不要放弃 padding 以支持
scrollbar-gutter，因为在使用覆盖滚动条时，您将失去所有预期的空间。
由于这是视觉上明显的额外空间，因此您可以选择使用两个关键字来分配此属性： scrollbar-gutter: stable both-edges 。使用 stable 本身只会在滚动条所在的位置添加一个装订线，而添加 both-edges 首选项也会在滚动容器的另一侧添加空间。这可确保在布局尚不需要滚动条可见时实现视觉平衡。请参阅 Ahmad Shadeed 提供的使用 scrollbar-gutter 的可视化。