7 个我之前不知道的 CSS 属性

开始之前，我正在开发https://cloudash.dev，这是一种监控无服务器应用的全新方式🚀。如果你在调试生产事件时厌倦了在 50 个 CloudWatch 选项卡之间切换，可以看看这个。

过去十年，我曾在推特上发布过这个“免费面试问题”：

不久之后，Tejas创建了一个工具，允许您在终端中列出所有 CSS 属性（如果您出于某种原因需要这样做）：

显然有一些 CSS 属性是我完全不知道的，让我们来看一些有趣的例子：

1.azimuth

azimuth属性允许（或者更确切地说，允许，因为它现在已被弃用）不同的音频源在空间上定位以进行听觉呈现。

等一下，CSS 中的音频源？

没错，显然，当用户拥有能够处理音频的设备时，你可以使用azimuth和elevation来控制音频的来源。如果有人读到这篇文章，真的做过类似的实验，请在评论区告诉我——我很想听听更多！

句法：

<angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards

来源：MDN

2.bleed

这是什么，暮光？

并非如此，这是一项实验技术，用于指定打印文档时页面出血区域超出页面框的bleed范围。

对于网页设计来说不是那么有用，但当你的用户最终在实体纸上打印文档（发票、账单等）时可能会派上用场。

来源：CSS技巧https://css-tricks.com/almanac/properties/b/bleed/

3.caret-color

这个确实有点用处。

插入符号是聪明人所说的闪烁光标，当您尝试在输入中输入某些内容时出现（例如，在撰写博客文章时）

一旦你注意到它一直在闪烁，你就无法忽视它

caret-color允许 Web 开发人员控制其颜色

句法：

caret-color: auto;
caret-color: transparent;
caret-color: #123456;

我不是无障碍专家，但这transparent似乎不是一个好主意，所以也许不要使用它。

不过，洋红色看起来相当整洁：

4.::cue

可以track为页面上的元素添加标签video，当您想为视频添加字幕时，这对于不熟悉录制视频的语言或有听力障碍的人们非常有用。

如果你想给这些标题添加样式，那么cue伪元素就派上用场了。引用 MDN 的话：

::cue CSS 伪元素用于匹配所选元素内的WebVTT提示。它可用于设置带有 VTT 轨道的媒体中的字幕和其他提示的样式。

句法：

::cue {
  color: yellow;
  font-weight: bold;
}

5.hyphens

这是给我的德国朋友的。

如果您的文本包含极其冗长的单词和短语，有时内容可能会溢出容器，这看起来……不太理想。

有一个hyphens属性可以让你转换这个：

变成这样：

来源：MDN

这个-东西叫做连字符，它的使用规则是特定于语言的（例如，在英语和匈牙利语中，单词的拆分方式不同）。

向 Firefox 团队致以崇高的敬意，因为目前他们似乎是唯一支持网络上所有词典的团队。

句法：

hyphens: none;
hyphens: manual;
hyphens: auto;

6.will-change

绝大多数 CSS 属性都是为了用户而设的，目的是增强他们在 Web 上的体验，因此所有内容并不是白底黑字等等。

will-change有所不同——此属性实际上是针对浏览器的。

其理念是will-change告诉浏览器元素预计会如何变化。例如，你可以告知 Chrome 元素的不透明度将在某个时刻发生变化，这样浏览器就可以在元素实际更改之前设置优化。

请记住，这应该作为最后的手段（Papa Roach 会感到自豪），浏览器已经在尽其所能优化一切，过度使用此属性可能会导致您的网站实际上变得更慢。

句法：

will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* Example of <custom-ident> */
will-change: opacity;          /* Example of <custom-ident> */
will-change: left, top;        /* Example of two <animateable-feature> */

7.flex

flex哦，拜托，如果不打开这篇（顺便说一句，非常棒的）CSS Tricks 文章，就没有人能够以有意义的方式使用它

呼，写到这里我学到了很多！我有没有遗漏什么有趣又独特的属性？欢迎在Twitter上联系我。