深藏的5个你可能不知道的CSS属性

每年都有新的CSS属性被标准化，并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松，创造出新颖美丽的网站。

在这篇文章中，我将介绍5个相对较新的CSS属性，你可能从来没有听说过，我觉得很有趣。 本文的目的是带领你总览这些CSS的属性，告诉你可以使用哪些值，它们的使用场景，还有一些例子。

具体来说，这五个CSS属性可以分为以下三类：

• 书写显示（font-display和write-mode）;
• 渲染性能的提升（contain和will-change属性）;
• 创建新的花式设计（clip-path）

在开始之前，我想提醒一下，当处理新的CSS属性时，检查他们的支持和潜在的跨浏览器问题是一个好习惯。在这方面 can i use是一个高效的工具。

1. font-display

font-display属性允许您控制可下载字体在完全加载之前呈现的方式，或者下载失败时的处理方案。了解如何使用自定义字体以及加载它们需要多少时间是非常重要的一点。实际上，在浏览器等待自定义字体加载的过程中，用户在一定的时间内只能看到空白的内容。我们知道，如果内容加载过慢，用户将会离开页面。内容空白的时间取决于所使用的浏览器，通常为3秒左右。但是对于网页来说，这段时间是相当长的。

在过去几年中，开发人员通过使用基于JavaScript的解决方案，如Font Face Observer 或 Font Loading API。如今，“font-display”会使情况得以改善。

font-display属性在@font-face声明时使用。借助它，我们可以通过一行简单的CSS来控制字体的显示方式，而不需要使用基于JavaScript的解决方案。这意味着我们的网页可以减小体积，（很可能）提高性能。

在使用font-display时，您可以使用以下五个值之一：

• auto：默认值。这相当于根本不使用该属性，结果是浏览器隐藏文本，当自定义字体完成加载后再显示文本。
• block：浏览器在等待自定义字体加载时隐藏文本的时间减少了（例如1秒）。如果这段期间自定义字体未加载好，文本会应用备用字体呈现出来。同时，浏览器将无限期地等待自定义字体加载，并且自定义字体加载完成后对文本应用自定义字体。
• swap: 浏览器将立即展示后备字体，同时加载自定义字体。当自定义字体加载成功后，浏览器会使用自定义字体替换后备字体。 大多数情况下，这就是我们所追求的效果，之前提及到的JavaScript脚本实现的功能就基本和这个是一致的。
• fallback: 使用自定义字体渲染的文本在短时间内 (大约 100ms) 不可见，之后浏览器将持续加载自定义字体，这个期间，文本将以无样式的状态呈现，当自定义字体加载好了之后，文本将会被赋予自定义的字体。但是，如果加载字体耗时过长，文本将会使用后备字体，并且不再会使用自定义字体替换（即使后续自定义字体加载成功）。
• optional 效果和fallback几乎一样，都是先在极短的时间内文本不可见，然后再自定义字体没有加载好之前使用后备字体。不过optional选项可以让浏览器自由决定是否使用甚至加载自定义字体。选择权交给浏览器的原因是，当用户的网络环境不好的时候，加载字体也许并不是一个好的选择。当这些自定义字体不影响网页的品牌形象或者无碍设计的时候，这个值可能是个很好的选择。

@font-face {
  font-family: AmazingFont;
  src: url('/fonts/amazingfont.woff2') format('woff2'),
       url('/fonts/amazingfont.eot') format('eot');
  font-display: fallback;
}
h1 {
  font-family: AmazingFont, Arial, sans-serif;
}

这个功能在浏览器中的支持程度仍然很低，但情况会很快得以改善。在使用浏览器前缀的情况下， Chrome 49+，Firefox 46+和Opera 36+都支持这个属性。 不过，未来Chrome 60和Opera 47将使得该属性无需前缀标志（译者注：文章写作时，这两个版本还没有发出）。

如果您想问当浏览器还未支持这个属性的时候，使用font-display将会发生什么？答案是这些浏览器会忽略该属性，字体渲染的行为将与以前一样。 如果您真的希望改善用户的体验，即使浏览器不支持该属性，您也可以使用到上述基于JavaScript的解决方案之一。

2. contain

如果您构建具有许多小部件（包括第三方）的复杂网站，则新的contain 属性可能是优化网页的好工具。 如果您考虑在构建当今网页时大量使用Web Components和React组件，此属性可能会特别有用。