文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

每年都有新的CSS属性被标准化,并在主流浏览器中提供给你使用。它们的目的是使Web开发人员的生活更轻松,并允许创建新的和漂亮的设计。

在本文中,我将介绍5个相对较新的CSS属性,您可能从来没有听说过,我觉得非常有趣。本文的目的是让您大致了解它们是什么,您可以使用哪些值,它们的用例,以及一些示例。

特别是,我们将介绍与CSS相关的属性:

第 1 段(可获 1.29 积分)
  • 书写显示(font-displaywrite-mode);
  • 渲染性能的提升(containwill-change属性);
  • 创建新的花式设计(clip-path);

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

1. font-display

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

第 2 段(可获 2.03 积分)

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

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

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

第 3 段(可获 1.16 积分)
  • auto:默认值。这相当于根本不使用该属性,结果是浏览器隐藏文本,当自定义字体完成加载后再显示文本。

  • block:浏览器在等待自定义字体加载时隐藏文本的时间减少了(例如1秒)。如果这段期间自定义字体未加载好,文本会应用备用字体呈现出来。同时,浏览器将无限期地等待自定义字体加载,并且自定义字体加载完成后对文本应用自定义字体。

  • swap: 浏览器将立即展示后备字体,同时加载自定义字体。当自定义字体加载成功后,浏览器会使用自定义字体替换后备字体。 大多数情况下,这就是我们所追求的效果,之前提及到的JavaScript脚本实现的功能就基本和这个是一致的。

  • fallback: 使用自定义字体渲染的文本在短时间内 (大约 100ms) 不可见,之后浏览器将持续加载自定义字体,这个期间,文本将以无样式的状态呈现,当自定义字体加载好了之后,文本将会被赋予自定义的字体。但是,如果加载字体耗时过长,文本将会使用后备字体,并且不再会使用自定义字体替换(即使后续自定义字体加载成功)。

  • optional 效果和fallback几乎一样,都是先在极短的时间内文本不可见,然后再自定义字体没有加载好之前使用后备字体。不过optional选项可以让浏览器自由决定是否使用甚至加载自定义字体。选择权交给浏览器的原因是,当用户的网络环境不好的时候,加载字体也许并不是一个好的选择。当这些自定义字体不影响网页的品牌形象或者无碍设计的时候,这个值可能是个很好的选择。

第 4 段(可获 4.06 积分)

此属性的使用示例如下所示:

@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,这两种浏览器的下一个版本,将能够在不需要标记的情况下启用属性。

第 5 段(可获 0.81 积分)

可能你想知道浏览器不支持 font-display 的情况下,使用了这一属性会怎么样,答案是那些浏览器会直接忽略这个属性。它们的行为会跟过去一样。如果你确实想改进用户体验,即使浏览器不支持这个属性,你也可以回退到以前提到的基于 JavaScript 的方案。

想阅读更多关于 font-display 的内容,我建议你阅读这些文章:

第 6 段(可获 1.13 积分)

2. contain

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

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

第 7 段(可获 1.43 积分)

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

contain属性允许开发者声明当前元素和它的内容尽可能的独立于其他部分的 Dom 树。

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

第 8 段(可获 1.26 积分)

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

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

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

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

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

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

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

  • content: 这个值与strict但像,除了不包含size
第 9 段(可获 2.7 积分)

使用这个属性的例子就在下面,你也可以在 JSFiddle 上看到。考虑下面的的 HTML 代码:

<button id="button">Show menu</button>

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

以及 JavaScript:

const menu = document.querySelector('#menu');

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

你可以像下面那样使用通过使用 contain 属性减少浏览器的计算量:

第 10 段(可获 0.54 积分)
#menu {
  contain: paint;
}

如果你想了解更多关于这个属性的知识,可以看看下面的资源:

3. writing-mode

writing-mode 并不是一个全新的 CSS 属性,但仍然有很多开发者不知道这个属性。诚然,这并不是一个常用的属性。writing-mode 属性定义文本行是横向还是纵向,以及遇到边界时折行的方向。现在所有主流浏览器(包括 Microsft Edge)都支持这个属性,不过较早的 Internet Explorer 规范支持的值有所不同。另外,Safari 支持这个属性的 vendor-prefixed 版本。

第 11 段(可获 1.31 积分)

writing-mode支持以下值:

  • horizontal-tb:内容为我们常规的水平排列,从左到右阅读,第二行在第一行的下方。

  • vertical-rl:内容垂直排列,从上到下,从右到左阅读,第二行在第一行的左侧。

  • vertical-lr:内容垂直排列,从上到下,从左到右阅读,第二行在第一行的右侧。

  • sideways-lr:内容垂直排列,从上到下,从左到右阅读,在所有的排版方式中,即使是垂直版式, 字的顶部都是向左的。

  • sideways-rl:内容垂直排列,从上到下,从右到左阅读,在所有的排版方式中,即使是垂直版式,字的顶部都是向右。

第 12 段(可获 1.5 积分)

最后两个值目前只有 Firefox 支持。

为了让你有对这个属性的效果有概念,我创建了一个 JSFiddle。其结果如下:

Writing mode demo

注意,有些值的效果只有用在像日语和汉语这类语言的时候才明显。想看更全面的示例,可以看看相关 MDN 页面上的 Demo。

如果你想阅读关于 writing-mode 更详细的介绍,我建议你看这些文章:

4. clip-path

如果你想用 CSS 创建由简到繁的图形,clip-path 属性就很方便。使用这个属性,你可以隐藏某个元素的特定区域。最常见的用法是在一个图像是使用 clip-path 属性有创意的显示一部分内容。

第 13 段(可获 2.01 积分)

此属性的正式语法为:

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

这些值有以下含义:

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

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

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

  • none: 没有剪贴

每个基本形状都有不同的参数。列出全部的参数很无聊。下面是两个应用了这个属性的两个示例图片.

第 14 段(可获 1.06 积分)

A background image clipped to show only a pentagon

A background image clipped to show a custom polygon

除了Microsoft的浏览器(Edge和IE)之外,所有主流浏览器都支持clip-path。此外,您应该记住支持此属性的浏览器的一些注意事项。 第一个是Safari支持带有-webkit-'前缀的属性。 第二个是所有实现了这个功能的浏览器只有部分的支持。 “部分支持”的含义因浏览器而异。 如果您想了解更多信息,请查看 相关属性的支持

如果想试用 clip-path,我推荐你用Chrome,因为它支持最多。

第 15 段(可获 1.18 积分)

如果想学习更多关于 clip-path 的使用以及如何使用这个属性来增加动画效果,可以阅读以下几篇文章:

此外,如果你想要一个好的在线工具,可以允许你交互式的使用这个属性,那么可以试试 clippy

5. will-change

我们都知道速度和性能是多么的至关重要,特别是在移动设备。移动设备有限的 RAM 和 GPU 内存,相比桌面设备来说,使得一些 CSS 操作更困难,并且执行这些 CSS 操作会带来“危险”影响(在页面加载速度或者坏图方面)。但如果浏览器可以在事件发生 之前 知道事件将会发生,通过这种方式,是否提升页面的响应速度?

有一种方法可以给我们的浏览器提供一些重要的 提示,并提前告知它应该预计元素有什么变化 - 那就是使用 will-change 属性。 感谢这个属性,浏览器将有时间完成其优化工作,然后才需要执行操作并更改元素,并相应地分配内存。

听起来很酷,对吧? 好消息是,Chrome 53+,Opera 43+,Firefox 52+,Safari 10 和 Android目前支持此属性。 (IE和Microsoft Edge不支持它)。 然而,在继续之前,你应该注意以下几点:
 

第 17 段(可获 1.26 积分)
  1. 您不应该将此属性应用于太多元素即使您的页面运行良好。它会减慢运行速度并消耗大量的资源和内存,这很不友好。

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

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

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

第 18 段(可获 1.35 积分)

will-change支持四个值:

  • auto: 浏览器不会设置任何特殊的优化。 这与没有指定属性一样具有相同的效果。
  • scroll-position:表明,顾名思义,您希望在不久的将来随时更改元素的滚动位置。 一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候,该值可用于提示浏览器准备渲染内容。
  • contents: 指定要更改元素的内容。
  • <custom-ident>: 你期望改变的一个或多个CSS属性的名字,你可以使用逗号将这些属性隔开。 这些属性有 transform 和opacity.
第 19 段(可获 1.46 积分)

如果您想了解更多关于此属性的信息,我建议您阅读以下文章:

结论

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

第 20 段(可获 1.09 积分)

文章评论

深圳访客
如果我告诉老大,我用某属性搞定了一个功能,但对IE的支持可能不太好,也许能换来一顿好怼 :satisfied: