5个不知道的CSS属性

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

（使用can I use 工具检查属性的跨浏览器特性）

1.font-display

允许控制可下载字体在完全加载之前的呈现方式，或者下载失败时的处理方案。

五个值：

• • • auto：默认值，相当于不使用此属性，结果是浏览器隐藏文本，在自定义字体加载完成以后再显示文本；
    • blocl：等待自定义字体加载时的隐藏文本时间减少了。如果这段时间自顶子字体未加载好，文本会应用备用字体呈现，同时，浏览器将无限期等待自定义字体加载，加载完成后再相应应用；
    • swap：浏览器立即展示备用字体，同时加载自定义字体。加载成功后，浏览器会使用自定义字体替换备用字体。
    • 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;
}

在浏览器不支持这个属性的时候，浏览器会忽略它

2.contain

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

属性值：

• • none：默认值，不应用属性
  • size：该值开启元素的大小限制。意味着修改元素的大小可以不需要检查其后代；
  • layout：开启元素的布局限制。规定外面的任何东西都不会影响到内部布局，反之亦然；
  • style：开启元素的样式限制。对元素及其后代可能产生影响的属性不会影响到这个元素之外的任何内容；
  • paint：开启元素的绘制限制。意味着元素的后代不会显示在其边界之外。例如，一个元素是屏幕外（或不可见的），它的所有元素都是屏幕外（或不可见的）。典型的用例是移动设备上的屏幕清单；
  • strict：该属性适用于所有的限制，本质上是除去none以外的上述值的组合（size、layout、style、paint）；
  • content：这个值与strict很像，但不包含size。 

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

    js:

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

    css:

    #menu {
    contain: paint;
    }

    
    

1. writing-mode

定义文本行是水平还是垂直布置，块的进度方向。

writing-mode值：

• horizontal-tb：内容为我们常规的水平排列，从左到右阅读，第二行在第一行下方；
• vertical-rl：内容垂直排列，从上到下，从左到右阅读；
• vertical-lr：内容垂直排列，从上到下，从右到左阅读；
• sideways-lr：内容垂直排列，从上到下，从左到右阅读。在所有排版方式中，即使是垂直版式，字的顶部都是向左的；
• sideways-rl：内容垂直排列，从上到下，从右到左阅读。在所有排版方式中，即使是垂直版式，字的顶部都是向右的；

最后两个属性仅有FireFox支持

1. clip-path

在CSS中创建简单的形状到相当复杂的形状，此属性很方便。使用它，可以隐藏元素的特定区域。最常见的用例是对于图像使用这个属性，你可以从”clip-path“仅显示一部分内容，从而创造出比原图片更有创意的图片

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

属性值：

• clip-source：引用内部或外部的SVG元素的URL；
• basic-shape：基础形状函数，定义在CSS Shape specification；
• geometry-box：如果明确与”组合“，它将为基本形状提供参考框；
• none：没有剪贴；

IE和Edge不支持，Safari支持带有-webkit-前缀的属性，所有浏览器支持部分功能；

1. will-change

属性值：

• auto：不会产生效果；
• scroll-position：您希望在不久的将来随时更改元素的滚动位置。一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候，该值用来提示浏览器准备渲染内容；
• contents：指定要更改元素的内容；

内容摘自：JavaScript公众号，微信号：FedJavaScript