CSS 中的简单渐进增强

CSS 在过去几年里发生了很大的变化。感觉我们现在每月都会获得新功能。新功能固然很好，但很难跟上完全支持或安全使用的功能。

输入渐进增强：代码功能和语法可为您提供安全的后备，以防您的用户在缺乏支持的浏览器中访问您的网站。

这里有一些可以安全使用的简单 CSS 属性和技术；增强了某些用户的体验，但为其他用户提供了令人满意的后备。

使用 text-wrap: Pretty 和 text-wrap: Balance 获得更好的文本

并非所有浏览器都支持文本换行值balance和pretty，但它们可以安全使用。

如果您不熟悉这些值，它们是“修复”文本的方法，使其看起来（您已经猜到了）更漂亮或更平衡。

相当修复了“孤立”单词的问题，即当一段文本的最后一个单词换行到新行时，将其单独留在底部。 Pretty 确保最后一个单词伴随着另一个单词，这对于 标题 非常有用（注意：不要将其用于较大部分的正文，因为它使用较慢的算法来计算最佳结果）。

文本换行的 MDN 文档：漂亮

平衡调整您的段落，以便以平衡每行字符数的方式换行文本，从而提高布局质量和易读性。它对于一定长度的段落很有用，例如横幅内的主要文字或一些营销文案。 （注意：不要在正文中的所有

标签上使用此功能。根据字符数计算完美平衡的计算成本很高，因此浏览器根据文本行对此功能有上限： Chromium 为 6 个或更少，Firefox 为 10 个或更少）

text-wrap 的 MDN 文档：balance

演示

后备方案

如果浏览器不支持这些功能，唯一发生的情况是文本将出现孤立文本，或者可能不会像您希望的那样平衡。没关系；我们已经忍受了 30 年的网络浏览，因此它不会损害使用不受支持的浏览器的用户的体验。

---

具有字段大小自动增长的表单字段：内容

是否曾经因为在其中书写时 不会自动增长而感到沮丧？好吧，这个问题终于通过 field-sizing: content 得到解决。

此属性和值将使您的 、或根据其内容自动增长。我建议您将它用于 特别是，尽管它被 MDN 标记为“实验性”，但今天可以安全使用。

用于字段大小调整的 MDN 文档

演示

后备方案

这种情况的后备措施很简单：如果浏览器不支持该功能，字段将不会增长。这也没关系！

---

伪元素 ::marker 和 ::placeholder

想要为

中的列表项设置光盘指示器的样式、更改

中数字的颜色，或者为 的占位符设置样式？您可以使用伪选择器，例如 ::marker 和 ::placeholder。

请注意，::marker 元素是一个奇怪的元素，因为只有少数属性可以与此选择器一起使用：

• 所有字体属性
• 空白属性
• 颜色
• text-combine-upright、unicode-bidi 和 Direction 属性
• 内容属性
• 所有动画和过渡属性

在这里阅读更多相关信息：::marker 的 MDN 文档

对于 ::placeholder，您几乎可以对普通文本执行任何操作，更改颜色、字体粗细、字体系列等，但请记住，输入的占位符仍然应该 看起来像 占位符，而不是看起来已经在输入中输入了一个值。

MDN 文档::placeholder

演示

后备方案

这些并不适用于所有浏览器或浏览器版本，但使用它们也不会破坏任何东西，使其成为完美的渐进增强。圆盘和数字等标记将回退为与列表项文本具有相同的颜色，而占位符将具有浏览器的内置样式。

---

综上所述

很难跟上 CSS 中安全使用的内容，因为 Baseline（来自 webstatus.dev）和 caniuse.com 只说明某些内容在特定浏览器版本中是否可用，而不说明如果选择器在您的 UI 中会发生什么、属性或值不受支持。

始终弄清楚实验性或支持较少的功能会产生哪些后备。

以上是CSS 中的简单渐进增强的详细内容。更多信息请关注PHP中文网其他相关文章！