12 个现代 CSS 一行升级

大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 12 Modern CSS One-Line Upgrades。

本期共享的是 ------ 那些我们可以开始使用或提前预习的 CSS 现代属性。

有时，优化我们 App 的 CSS 只需要一行代码就能升级或增强！了解 12 个现代化属性，将其合并到项目中，享受减少技术债务、删除 JS，以及轻松赢得用户体验的乐趣。

本文会科普 3 种不同兼容性的属性：

稳定升级：通过替换旧技术，修复 hack（奇技淫巧）或问题
稳定增强：通过良好支持的现代属性，提供改进的体验
渐进增强：在支持这些属性时提供升级的体验，但不会尚未支持的浏览器中造成损害

稳定升级

以下支持良好的属性可以替换旧技术，辅助修复 hack或长期存在的顽瘴痼疾。

`aspect-ratio`

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

对于高清无码视频，我们可以只使用 aspect-ratio: 16/9 一行代码搞定。对于完美平方，只需要 aspect-ratio: 1，因为隐含的第二个值也是 1。

css 复制代码

/* 16:9 高清无码 */
.aspect-ratio-hd {
  aspect-ratio: 16/9;
}

/* 正方形 */
.aspect-ratio-square {
  aspect-ratio: 1;
}

粉丝请注意，应用的 aspect-ratio 十分宽容，且允许内容优先。这意味着，当内容导致元素在至少一个维度上超过该比率时，元素仍会增长或改变形状，来适应内容。为了制止这种行为，我们可以添加其他维度属性，比如 max-width，这可能是避免扩展到 Flex 或网格容器之外的必备措施。

css 复制代码

/* 
  应用到 Flex 子代元素，
  这些元素受限于父级元素的尺寸
 */
.aspect-ratio-square {
  aspect-ratio: 1;
}

`object-fit`

这实际上是稳定增强中最古老的属性，但它搞定了一个重要问题，并且绝对符合一行代码升级的人设。

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

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

cover：图像调整大小来覆盖元素，并保持其纵横比，使内容不扭曲
scale-down：图像在元素内按需调整大小，使其完全可见，而不会被剪切，并保持其纵横比，如果元素具有不同的渲染纵横比，这可能会导致图像周围出现额外空间

无论哪种情况，object-fit 都是与 aspect-ratio 完美搭配的属性，可确保应用自定义宽高比时图像不会扭曲。

css 复制代码

.image {
  object-fit: cover;
  aspect-ratio: 1;

  /* 可选：限制图像大小 */
  max-block-size: 250px;
}

`margin-inline`

作为众多逻辑属性之一，margin-inline 用于设置水平书写模式下的左右侧内联边距的简写。

一行代码优化有手就行：

css 复制代码

/* 以前的写法 */
margin-left: auto;
margin-right: auto;

/* 现在的写法 */
margin-inline: auto;

逻辑属性已经存在好几年了，现在的浏览器支持率高达 98%，偶尔需要前缀。逻辑属性及其对于拥有国际受众的网站至关重要。

稳定增强

这些支持良好的现代 CSS 属性可以提供改进的体验，并且还可以允许替换旧方法甚至 JS 辅助的解决方案。不太可能需要备胎解决方案，尽管这取决于您的特定 App 的考虑因素，并且始终鼓励测试。

`text-underline-offset`

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

css 复制代码

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

我们可以使用此偏移量来清除下行部分，并提高易读性，特别是当链接紧密分组时，比如链接的项目符号列表。

此升级可能会取代旧的 hack，比如边框或伪元素，甚至渐变背景，尤其是与它的好基友属性"梦幻联动"时：

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

`outline-offset`

当我们想要元素和焦点轮廓之间的距离时，您是否一直在使用 box-shadow 或伪元素，提供自定义轮廓？

粉丝福利！您可能忽略了长期可用的 outline-offset 属性，早在 2006 就有了，它可以将轮廓推离具有正值的元素，或将其拉入具有负值的元素。

css 复制代码

.outline-offset {
  outline: 2px dashed blue;
  outline-offset: var(--outline-offset, 0.5em);
}

粉丝请注意，轮廓不会作为元素盒子大小的一部分进行计算，因此增加距离不会增加元素占用的空间量。这类似于 box-shadow 在不影响元素大小的情况下的渲染方式。

`scroll-margin-top/bottom`

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

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

个人喜欢在样式重置中为任何具有 [id] 属性的元素添加通用起始规则，因为它有可能成为锚链接。

css 复制代码

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

为了在考虑粘性、固定或绝对定位元素的重叠时，获得更给力的解决方案，我们可能需要使用具有后备值的自定义属性。然后，在 JS 的辅助下，测量所需的实际距离，并更新自定义属性值。

css 复制代码

[id] {
  /* 按需使用 JS 更新 --scroll-margin */
  scroll-margin-top: var(--scroll-margin, 2rem);
}

我鼓励您进一步升级此解决方案，并使用等效的逻辑属性： scroll-padding-block-start 和 -block-end。

`color-scheme`

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

如果我们要启用调整整个 App，请在 :root 上设置以下内容，即优先选择 dark 主题，或翻转顺序来优先选择 light 主题。

css 复制代码

:root {
  /* 深色优先 */
  color-scheme: dark light;
  /* 浅色优先 */
  color-scheme: light dark;
}

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

css 复制代码

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

`accent-color`

如果您曾经想更改复选框或单选按钮的颜色，那么您踏破铁鞋得到是 accent-color。使用此属性，我们可以修改单选按钮和复选框的 :checked 外观，以及进度元素和范围输入的填充状态。如果我们没有其他覆盖，浏览器的默认焦点"光环"也可能会被调整。

css 复制代码

:root {
  accent-color: mediumvioletred;
}

考虑将 accent-color 和 color-scheme 添加到我们的基准 App 样式中，快速实现自定义主题管理。

`width: fit-content`

个人最爱的 CSS 隐形宝藏之一是使用 fit-content 将元素"收缩包装"到其内容。

尽管我们可能使用了内联显示值，比如 display: inline-block，将元素的宽度减小到内容大小，但升级到 width: fit-content 可以实现同款效果。width: fit-content 的优点在于，它使 display 值可用，因此不会更改元素在布局中的位置，除非您也对其进行调整。计算盒子的大小会调整为 fit-content 创建的尺寸。

css 复制代码

.fit-content {
  width: fit-content;
}

fit-content 值是启用内在大小调整的若干关键字之一。

请考虑将此技术二次升级为相当于 inline-size: fit-content 的逻辑属性。

渐进增强

渐进增强的 CSS 属性在被支持时可提供升级的体验，且可以放心使用，而不必担心在尚未支持的浏览器中造成损害。这意味着，它们不需要备胎方案，即使它们是现代 CSS 的最新添加内容。

`overscroll-behavior`

包含的滚动区域，即允许滚动溢出的尺寸有限的区域的默认行为是，当滚动在元素中用完时，滚动交互将传递到后台页面。这对于我们的用户而言，最好的情况可能是有点头大，最坏的情况则是直接红温。

使用 overscroll-behavior: contain 会将滚动隔离到所包含的区域，一旦到达滚动边界，就会将其移动到父页面，防止继续滚动。这在诸如导航链接侧边栏之类的上下文中非常有用，该侧边栏可能具有与长文章等主页内容独立的滚动条。

css 复制代码

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

`text-wrap`

截至去年最新的属性之一是 text-wrap，它有两个值可以搞定不平衡行的排版问题。这包括防止"orphans"，这用来描述最后一个文本行中单独存在的一个单词。

第一个可用值是 balance，其目标是平衡每行文本的字符数。

换行文本有六行限制，因此该技术最适合用于标题或其他较短的文本段落。限制应用范围也有助于限制对页面渲染速度的影响。

css 复制代码

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

pretty 的另一个值专门搞定了"orphans"的预防问题，且可以更广泛地应用。pretty 背后的算法将评估文本块中的最后四行，按需调整，确保最后一行有两个或更多单词。

css 复制代码

p {
  text-wrap: pretty;
  max-inline-size: 35ch;
}

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

`scrollbar-gutter`

在某些情况下，滚动条的出现或消失可能会导致不必要的布局变化。举个栗子，当显示对话框覆盖并且背景页面添加 overflow: hidden 防止滚动时，导致从删除不再需要的滚动条发生转变。

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

粉丝请注意，当且仅当用户的系统设置不是"overlay"滚动条时，比如 Mac OS 的默认设置，此属性才有效，其中滚动条只显示为正在滚动的内容上的覆盖。不要为了 scrollbar-gutter 而放弃内边距，因为当使用覆盖滚动条时，我们会失去所有预期空间。

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

本期话题是 ------ 您最常用的是哪一个现代 CSS 属性？

欢迎在本文下方群聊自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端 9 点半》每日更新，坚持阅读，自律打卡，每天一次，进步一点。