了解 12 个属性 减少技术债务

avatar
前端工程师 @稀土

有时，改进您的应用程序 CSS 只需要一行升级或增强！了解 12 个属性，开始将其合并到您的项目中，并享受减少技术债务、删除 JavaScript 以及轻松赢得用户体验的乐趣。 探索以下类别的属性：

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

稳定升级

以下受良好支持的属性可以通过替换旧技术来帮助修复黑客或长期存在的问题。

aspect-ratio 纵横比

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

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

长宽比的基本使用

.aspect-ratio-hd {
  aspect-ratio: 16/9; // HD 16:9 高清16:9
}

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

值得注意的是，应用的 aspect-ratio 是宽容的，并且允许内容优先。这意味着当内容导致元素在至少一个维度上超过该比率时，元素仍将增长或改变形状以适应内容。为了防止或控制这种行为，您可以添加其他维度属性，例如 max-width ，这可能是避免扩展到 Flex 或网格容器之外所必需的。

// 宽容的纵横比
/* Applied to the flexbox children which have a size constraint from their parent */
.aspect-ratio-square {
  aspect-ratio: 1;
}

object-fit 对象匹配

这实际上是此列表中最古老的属性，但它解决了一个重要问题，并且绝对符合单线升级的情绪。使用 object-fit 会导致 img 或其他替换元素充当其内容的容器，并使这些内容采用类似于 background-size 的调整大小行为。 虽然 object-fit 有几个可用的值，但以下是您最有可能使用的值：

  • cover - the image resizes to cover the element, and maintains its aspect-ratio so that the content is not distorted
    cover - 图像调整大小以覆盖元素，并保持其纵横比以使内容不扭曲
  • scale-down - the image resizes (if needed) within the element so that it is fully visible without being clipped and maintains its aspect-ratio, which may lead to extra space (”letterboxing”) around the image if the element has a different rendered aspect-ratio
    scale-down - 图像在元素内调整大小（如果需要），使其完全可见而不会被剪切并保持其纵横比，这可能会导致图像周围出现额外的空间（“信箱”），如果元素具有不同的渲染纵横比

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

// 使用具有纵横比的对象拟合
.image {
  object-fit: cover;
  aspect-ratio: 1;

  /* Optional: constrain image size */
  max-block-size: 250px;
}

margin-inline 边距内联

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

这里的替换很简单：

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

/* After */
margin-inline: auto;

逻辑属性已经存在几年了，现在的支持率高达 98%（偶尔有前缀）。

稳定增强

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

text-underline-offset 文本下划线偏移

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

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

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

此升级可能会取代旧的黑客，如边框或伪元素，甚至渐变背景，特别是与它的朋友一起使用时：

outline-offset 轮廓偏移

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

好消息！您可能错过了长期可用的 outline-offset 属性（早在 2006 年！），它可以将轮廓推离具有正值的元素或将其拉入具有负值的元素。 在演示中，灰色实线是元素边框，蓝色虚线是通过 outline-offset 定位的轮廓。

// 正负轮廓偏移
.outline-offset {
  outline: 2px dashed blue;
  outline-offset: var(--outline-offset, .5em);
}

Positive offset 正偏移Negative offset 负偏移量

提醒: 轮廓不会作为元素框大小的一部分进行计算，因此增加距离不会增加元素占用的空间量。这类似于 box-shadow 在不影响元素大小的情况下呈现的方式。

了解有关使用轮廓偏移作为焦点可见性的辅助功能改进的更多信息(moderncss.dev/modern-css-…) for focus visibility.

scroll-margin-top/bottom 滚动边距顶部/底部

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

为什么这有用？嗯，它可以缓解激活锚链接时粘性导航元素覆盖内容所引起的问题。使用 scroll-margin-top 我们可以在通过导航滚动到元素时增加元素上方的空间，以考虑粘性导航占用的空间。我喜欢在重置中为任何具有 [id] 属性的元素添加通用起始规则，因为它有可能成为锚链接。

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

现代 CSS 文章中关于基于组件的架构探讨了一种替代选择器，该选择器也在本网站上使用，可以使用文章目录侧栏中的链接进行测试。

为了在考虑粘性、固定或绝对定位元素的重叠时获得更强大的解决方案，您可能需要使用具有后备值的自定义属性。然后，在 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 系统颜色。适应要求浏览器使用 light 或 dark 方案呈现这些项目，并且该属性允许定义优先顺序。

如果您要启用调整整个应用程序，请在 :root 上设置以下内容，即优先选择 dark 主题（或翻转顺序以优先选择 light 主题）。

:root {
	color-scheme: dark light;
}

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

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

了解如何使用配色方案实现简单的深色模式,以及有关合并此功能的更多信息。

accent-color 强调色

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

// 使用强调色的效果
:root {
  accent-color: mediumvioletred;
}

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

如果您需要更全面的表单控件自定义样式，请查看从单选按钮开始的现代 CSS 系列(moderncss.dev/pure-css-cu…).

fit-content

我最喜欢的 CSS 隐藏宝石之一是使用 fit-content 将元素“收缩包装”到其内容。

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

// fit-content 的基本用法
.fit-content {
  width: fit-content; // 使用适合内容
}

 fit-content是启用内在大小调整的几个关键字之一.

渐进式增强

最后一组属性在受支持时可提供升级的体验，并且可以使用而不必担心在不支持的浏览器中造成损害。这意味着它们不需要后备方法，即使它们是现代 CSS 的最新添加内容。

overscroll-behavior 过度滚动行为

包含的滚动区域（允许滚动溢出的尺寸有限的区域）的默认行为是，当滚动在元素中用完时，滚动交互将传递到后台页面。这对于您的用户来说，充其量可能是令人不快，最坏的情况是令人沮丧。

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

// 过度滚动行为的基本用法
.sidebar, .article {
  overscroll-behavior: contain;
}

参考：moderncss.dev/12-modern-c…

text-wrap 文本换行

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

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

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

// 应用文本换行：平衡
:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;

  /* For demonstration */
  max-inline-size: 25ch;
}

p {
  text-wrap: pretty;

  /* For demonstration */
  max-inline-size: 35ch;
}

参考：moderncss.dev/12-modern-c…

scrollbar-gutter

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

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

重要提示：仅当用户的系统设置不是“覆盖”滚动条时（如 Mac OS 的默认设置），此属性才有效，其中滚动条仅显示为正在滚动的内容上的覆盖。不要为了 scrollbar-gutter 而放弃内边距，因为当使用覆盖滚动条时，您将失去所有预期的空间。

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

avatar
文章
阅读
粉丝