文本

  1. font-display 控制字体在下载完成之前的渲染行为,在@font-face声明时用,据说可以提升体验提高性能来源 [1]
  2. write-mode 定义文本行的排列方向,上下与左右来源 [1]
  3. caret-color 可以改变任何可编辑元素的光标颜色,eg.input、textarea、contenteditable。在这个属性出现之前,想要模拟类似的效果,是强制文本透明-通过-webkit-text-fill-color,再让text-shadow的着色露出来来源 [2]
  4. -webkit-text-fill-color
  5. text-shadow
  6. :dir() 根据语言方向选中元素来源 [4]
    • :dir(rtl) 它会嗅探出用户代理的方向,然后再选中元素
      伪类只接受一个参数,传多个会出错返回 null
    • [dir=rtl] 它只会选中在 HTML 中明确定义的
      这很重要,因为没有在 HTML 中明确声明元素的语言方向,它就会继承父元素的 dir 属性,所以使用 [dir=rtl] 可能会误选中其他元素

SAD:还不太清楚它两间的严格区别...因为尚未找到支持 :dir(rtl) 的浏览器

性能

  • contain new 声明当前元素及其内容可独立于其它部分的 DOM 树,可减少浏览器的计算(布局重绘等)来源 [1]。适用场景 eg.当大量使用 web components 和 react 组件时。
  • will-change 提前告之浏览器元素将会发生什么样的改变来源 [1],eg.滚动、改内容、指定特定css属性。此属性可用来替代用translateZ()translate3d()等hack来启用硬件加速。

布局

  1. columns :多列布局
    • columns: column-count, column-width
    • column-gap
  2. Grid
  3. Flex

盒模型

  1. border-radius :小小的半径大大的趣味

裁剪

  1. clip-path:用各种形状做区域裁剪来源 [1]。eg.裁剪图片,创建更有创意的效果。

内容

  1. counter :自动编号
    • counter-reset
    • counter-increment

链接

  1. :any-link 代表有 href 属性的 HTML 元素,它等价于来源 [3]
    • :any-link = :link + :visited
    • :any-link = [href]
    • :any-link = :matches(:link, :visited):matches() 属性名待定
  • HTML5 里的 <a> <link> <area> 可以有 href 属性
  • 可以使用前缀 :-webkit-any-link :-moz-any-link
  • 目前 :any-link 是实验特性,Selectors Level 4 规范(草案阶段)的一部分

Touch

  1. touch-action :Touch事件

参考来源:

  1. 5个你可能不知道的CSS属性
  2. caret-color
  3. :any-link
  4. :dir()

扩展阅读:

  1. CSS
  2. pseudo-classes
  3. Tree-Structural pseudo-classes
  4. Linguistic Pseudo-classes

124 0 0