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

246 阅读11分钟

译者:众里寻他千百度

原文链接

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

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

具体来说,我们将介绍与CSS有关的CSS属性:

*书写显示(font-displaywrite-mode);

*渲染性能的提升(containswill-change属性);

*创建新的花式设计(clip-path

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

1. font-display

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

在过去几年中,开发人员通过使用基于JavaScript的解决方案,如Font Face ObserverFont 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的解决方案之一。

阅读更多关于 font-display, 我推荐你阅读这些文章:

2. contain

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

如果您正在寻找一种将样式,布局和重绘计算范围限制为_只有_ DOM的一个或多个部分的方法,则可以使用contains属性。 如果你不熟悉那些概念,我推荐你阅读这些文章 10中减少重排提升性能的方式. 另一个好的学习资源 CSS Triggers.

引用 W3C 关于contain属性的定义,

contain属性允许作者独立于DOM树的其他部分尽可能多的指出一个元素及其内容。

但这在实践中意味着什么呢? 这意味着如果您有一个具有固定高度和宽度的小部件(独立的部分),例如,你想要更新内容和样式的,则可以避免这些更改对其余DOM的影响 通过限定浏览器的计算。 浏览器将执行较少的计算,从而获得更好的性能。

这个属性是相当新的,因此它没有获得很好的支持。 目前,只有Chrome 52+和Opera 40+才支持它。 contains允许几个值,每个值都可以让你限制浏览器需要做多少渲染工作。 我们详细分析一下每个值:

  • none:默认值。使用此值不应用限制效果。

  • size:该值开启元素的大小限制。这意味着修改元素的大小可以不需要检查其后代。

  • layout:该值开启元素的布局限制。这规定外面任何东西都不会影响其内部布局,反之亦然。

  • style:该值打开元素的样式限制。因此,对元素及其后代可能产生影响的属性不会影响包含元素之外的任何内容。

  • paint:该值打开元素的绘制限制。这意味着限制元素的后代不会显示在其边界之外。例如,如果一个元素是屏幕外(或不可见的),它的所有元素都是屏幕外(或不可见的)。典型的用例是移动设备上的屏幕菜单。

  • strict:该属性适用于所有形式的限制,本质上是除去none所有上述值的组合(即包含:size layout style paint)。

  • content:这个值就像strict但没有size。 这个例子的属性如下所示 在JSFiddle上也能看到. 思考下面代码:

<button id=""button"">Show menu</button>
<ul id=""menu"" hidden>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

And the following JavaScript:

const menu = document.querySelector('#menu');
document.querySelector('#button').addEventListener('click', function() {
  if (menu.hasAttribute('hidden')) {
    menu.removeAttribute('hidden');
  } else {
    menu.setAttribute('hidden', '');
  }
});

通过使用 contain 属性,你可以减少浏览器的计算:

#menu {
  contain: paint;
}

如果想获得更多关于该属性的信息,请看一下下面这些资源。

3. writing-mode

writing-mode并不完全是一个全新的CSS属性,但仍有许多开发人员不了解它。 诚然,这是一个不常见的用例。 writing-mod属性定义文本行是水平还是垂直布置,块的进度方向。 所有主流浏览器(包括Microsoft Edge)目前都支持它,尽管Internet Explorer支持早期版本规范中的不同值。 此外,Safari还支持此CSS属性的供应商前缀版本 。

writing-mode 支持下列的值:

  • horizontal-tb:内容水平方向从左到右,垂直方向从上到下。 下一条水平线位于上一行之下。

  • vertical-rl:内容水平方向从右到左,垂直方向从上到下。 下一条垂直线位于上一行的左侧。

  • vertical-lr:内容水平方向从左到右,垂直方向从上到下。。 下一条垂直线位于上一行的右侧。

  • sideways-rl:内容从上到下垂直排列,所有字形,即使是垂直脚本中的字形,都向右侧设置。

  • sideways-lr`:内容从上到下垂直排列,所有字形,即使是垂直脚本中的字形,都向左侧设置。

最后两个值目前仅由Firefox支持。

想看一下这个属性如何工作, 请看 a JSFiddle. 结果就在下面:

Writing mode demo

请记住,只有使用日语或中文等语言时,一些值的效果才会展现。 有关更全面的示例,请查看演示 the relevant MDN page.

如果您想阅读更详细的“写作模式”介绍,我建议您下列文章:

4. clip-path

如果你想从CSS中创建简单的形状到相当复杂的形状,那么clip-path属性是很方便的。 使用它,您可以隐藏元素的特定区域。 最常见的用例是在该属性中使用图像,但是您可以比这更有创意,并使用带有段落的“clip-path”仅显示一部分内容。

`clip-path: <clip-source> | [ <basic-shape> | <geometry-box> ] | none`

这些值的含义:

  • clip-source: 引用内部或外部SVG元素的URL

  • basic-shape: 基础形状函数, 定义在 CSS Shapes specification

  • geometry-box: 如果明确与``组合,它将为基本形状提供参考框。

  • none: 没有剪贴

每个基本形状都有不同的参数。列出所有这些都是无聊的,所以我将向您介绍两个示例,向您展示使用此属性。

剪贴了一个五边形的背景图片

剪贴后显示自定义多边形的背景图片 除了Microsoft的浏览器(Edge和IE)之外,所有主流浏览器都支持clip-path。此外,您应该记住支持此属性的浏览器的一些注意事项。第一个是Safari支持带有-webkit-'前缀的属性。第二个是所有实现了这个功能的浏览器只有部分的支持。 “部分支持”的含义因浏览器而异。如果您想了解更多信息,请查看 相关属性的支持,使用 clip-path,我推荐你用Chrome, 它支持最多。

要了解有关clip-path的使用以及如何为此属性添加动画的更多信息,可以查看下列文章:

另外,如果你想用一个工具在线查看这些属性如何起作用, 你可以查看 clippy.

5. will-change

我们都知道速度和性能是至关重要的,特别是在移动设备上。与台式机相比,它们有限的RAM和GPU存储器使得一些CSS操作更难以执行(在页面加载速度或图形影响方面)。如果浏览器可以在发生之前知道会发生什么,是不是这样会增加页面的响应性?

有一种方法我们可以给我们的浏览器一些重要的暗示,通过使用will-change属性,提前通知元素将会发生什么改变。因为这个属性,浏览器将在元素被改变之前有时间完成其优化工作,相应地分配内存。

听起来很酷,对吧?好消息是,Chrome 53+,Opera 43+,Firefox 52+,Safari 10和Android目前支持此属性。 (IE和Microsoft Edge不支持)。但是,在继续之前,您应该注意一些事情:

  1. 您不应该将此属性应用于太多元素,或者您的页面运行良好。它会减慢运行速度并消耗大量的资源和内存,这很不友好。

  2. 您应该在更改发生之前和之后使用脚本代码切换will-change

  3. 不应该用来预测和解决潜在的性能问题。在出现问题后,它必须被视为最后的手段。

will-change属性可以用来避免我们多年来一直在使用的hack:使用translateZ()(或translate3d())来推动浏览器动画并转换成硬件加速。

will-change支持四个值:

  • auto:浏览器不会设置任何特殊的优化。 这与没有指定属性一样具有相同的效果。

  • scroll-position表示,顾名思义,您希望在不久的将来随时更改元素的滚动位置。 该值可用于提示浏览器准备渲染内容,而不是可滚动元素上的滚动窗口中可见的内容。

  • contents:指定要更改元素的内容。

  • :您希望更改的一个或多个CSS属性的名称。 您可以插入以逗号分隔的多个属性。 例如transformandopacity

如果您想了解更多有关此方面的信息,建议您阅读以下文章:

结论

在本文中,我已经描述了五种新的有趣的CSS属性,您可能以前没有知道这些属性。 你有没有使用过一个或多个这些属性? 如果是这样,你对他们的看法是什么? 如果你没有使用它们,你愿意试试吗?