2020 年值得学习的 3 个未充分利用的 CSS 功能

2025-06-04

2020 年值得学习的 3 个未充分利用的 CSS 功能

CSS 功能强大，属性和值可以用来实现各种令人惊叹的设计。强大的功能也带​​来了许多需要记住的内容。

如果您不了解工具箱中的所有工具，那么您如何找到适合工作的工具呢？

在这篇文章中，我们将介绍三种较少使用但对于 CSS 中的各种工作非常有用的工具。

ch1. 如何用单位获得可读的行长

CSS 中有大量令人惊叹的长度单位，那么为什么只让px和rems 占据主导地位呢？

我们早就知道，行距与用户阅读内容的难易程度息息相关。在使用像素等静态长度确定合适的尺寸时，我们遇到了更多问题。现在，chCSS 中的长度单位就出现了。

单位的定义ch是当前字体大小下字符的宽度0。虽然并非完美，但这使我们能够将内容列的宽度指定为“理想”的字符数。在上面链接的 Smashing Magazine 文章中，作者指出舒适的行长应在 45 到 85 个字符之间。我们无需进行计算并确定合适的像素数，而是可以使用“字符单位”来保持平衡。

.centered-column {
    width: 90vw;
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}
Enter fullscreen mode Exit fullscreen mode

通过此代码片段，您现在拥有一个永远不会超过最大建议值的居中列。

如果您在各个断点处调整字体大小，列的最大宽度将会扩大或缩小。如果您决定更改字体，最大宽度也会随之调整。

这里要提醒大家的是，不要用它来进行精确测量。它应该始终是近似值。由于单位与字体中的字形ch无关，因此每行上的字符数可能会更多或更少。请看这个相对简单的例子。0

图片显示并排的四个 0 和一组 M，其中只有 2 个 M 可以并排

在上图中，只有两个M字符与四个字符占用了相同的空间0。这是因为每个大写字母 M 的宽度大约为 36 像素；每个字母 0 的宽度为 20 像素。再加上每种字体的字形不同，结果会不太精确。由于我们的代码示例不考虑精度，只希望行长在75 个字符左右，所以结果比较安全。

2. 如何使用 CSS 属性选择器简化 CSS

单位不太流行，我ch并不感到意外。它们感觉与设计密切相关。然而，属性选择器的缺乏使用却让我感到震惊。它们功能多样，而且感觉非常程序化。

从本质上讲，属性选择器允许您选择具有特定属性或具有特定属性值的 HTML 元素。

我最喜欢的属性选择器新用途之一来自Andy Bell 令人惊叹的新 CSS 重置。

在他的重置方法中——其中充满了经过深思熟虑的配置——他使用属性选择器来移除那些带有类名的uls 和ols 的边距和内边距。这样做的原因是，如果你给项目设置了类名，你很可能也会重置列表的样式。如果你没有设置类名，你可能需要项目符号列表或编号列表。

ul[class],  
ol[class] {  
    padding: 0;  
    margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

您也可以将其应用于具有target属性的锚标签。将其与元素结合使用，::after可以为链接添加一个小图标，以便将用户引导至弹出窗口。

a[target] {
    padding-right: 2ch;
}

a[target]::after {
    background-image: url(icon.svg);
    width: 1.75ch;
    height: 1em;
    ...etc.
}
Enter fullscreen mode Exit fullscreen mode

对于图标使用相同的方法，您可以将 Twitter 徽标应用于以 Twitter URL 开头的任何 URL。

a[href^="https://twitter.com"] {
    ...styles
}
Enter fullscreen mode Exit fullscreen mode

这将针对任何以字符串“ https://twitter.comhref ”开头的锚标签。

相反，您也可以检查字符串的末尾，以便.pdf找到页面上所有 PDF 的链接。

a[href$=".pdf"] {
     ...styles
}
Enter fullscreen mode Exit fullscreen mode

使用属性选择器可以做出很多实用的方案。我希望更多人了解并使用它们。

3. 如何使用 CSS 多列创建多列流动文本或元素

桌面版 3 列、平板电脑版 2 列的多列图片

即使在 CSS Grid 出现之前，我们也可以在表格之外的列中进行一些小改动。CSS 多列是一种规范，它允许文本和元素跨多列流动。

您可以将它与任意数量的文本一起使用，并为其指定特定的列数或要匹配的列宽。

这可以在博客文章中间创建有趣的插页布局。

.column-content {
    column-width: 250px; /* Columns with max-width of 250px
/*  column-count: 2;        Always 2 columns */
    column-gap: 2rem;    /* Columns with 2rem of space in between */
}
Enter fullscreen mode Exit fullscreen mode

您还可以做更多的事情，比如column-rule设置边框，以及column-span在列中创建新标题的分隔符。

CSS 的过去与光明未来

虽然 2010 年代后半期新 CSS（例如 Flexbox 和 Grid）取得了令人惊奇的进展，但重要的是要记住过去还有很多额外的功能。

这篇文章中提到的功能在浏览器中已经存在多年，但使用率并不高。在这个假期尝试新的酷炫玩意儿时，别忘了回顾一下过去的酷炫玩意儿。

评论问题：您认为整个行业未充分利用哪些 CSS 功能？

请在评论中（或在 Twitter 上）让我知道

了解 Bryan 的最新动态

如果您想及时了解我制作的所有内容，请务必在这里关注我，也可以在其他平台上关注我。

文章来源：https://dev.to/brob/3-underused-css-features-to-learn-for-2020-14fl
Devto 翻译
PREV
面向 TypeScript 爱好者的 GitHub 存储库
NEXT
我在编写测试时犯的一系列不幸的错误