盘点一下十来年间，浏览器新增的css属性哪些能用了。
背景
对于浏览器来说，自从html5,css3,es6 增加了许多的标准和api，想当年刚学前端的时候，那时候，h5什么的也都刚开始流行，但工作中对于css其中的新属性用的其实不多，刚开始的时候，甚至连flex布局都不让用，因为需要考虑到用户的旧设备的兼容。只有在做一些动画，缓动的时候用到。这种增加不影响正常功能，并增加一些效果也叫做“渐进式升级”。但是其实大部分属性都没法做到这种“渐进式升级”。只能采用兼容方案，也就是老式的写法。比如flex的替代方案就有各种各样的。
但是对于js来说，我们目前都可以用最新的es标准。因为可以使用 polyfill 或者 编译时做兼容的转移。只有少部分特性转移不了。
但是css恰恰相反，大部分新功能都是没法用类似的方式处理的。
从另一个角度讲，浏览器刚刚增加css某个属性的时候，恰恰是博主争先去写博客介绍的，因为都需要抢一下这个流量“热乎劲”。另外只有先写的才会先被看见，并且搜索引擎的抓取也是最多的，第二个人写的类似的介绍就没啥意思了。这样也导致了一个问题，就是这时候，恰恰是个不同浏览器对它兼容性最差的时候，大部分人都不会去实际使用这个，而选择兼容方案，比如用js各种计算。
这样即使后来新的浏览器版本慢慢普及了，我们也一时想不起来要用新的属性方便的实现。
今天2024，距离css3标准已经十多年了，下面咱们就来盘点一下，这些年来的好用的属性，兼容性都做的咋样了，是不是可以用了。
其实有些属性如果能用起来，无论是对浏览器提高性能，还是对于我们开发人员写代码都有很大帮助的~
浏览器占比只统计了chorme,firefox,safari 及其相同内核的浏览器。所以最高占比也只能达到 88.32 %。手机端的浏览器，qq，uc 等没法拿到版本数据，考虑到手机一般会自动更新 app，所以统一按 chrome 的活跃度最高内核版本来计算了。'
全面支持年份： 如果是全面支持时间在 2020 前，显示的是✅
当前列表中只选择了笔者自认为比较有用的属性，如果你还有更多的需要可以查看：脚本跑出的结果 caniuse-now ，里面的数据中更全面的。
常用 css 支持程度表格
| 序号 | 属性名 | 属性值 | 简要说明 | 链接 | 浏览器占比 | 全面支持年份 |
|---|---|---|---|---|---|---|
| 1 | all | 重置几乎所有属性 | MDN,规范1 | 88.24% | ✅ | |
| 2 | animation-composition | 动画组合 | MDN,规范1 | 80.20% | 2023 | |
| 3 | aspect-ratio | 让元素保持一定的宽高比 | MDN,规范1 | 84.76% | 2021 | |
| 4 | auto | 规范1 | 84.76% | 2021 | ||
| 5 | backdrop-filter | 背景滤镜 | MDN,规范1 | 74.29% | 2024 | |
| 6 | background-clip | 控制背景的绘制区域，可绘制到边框内 | MDN,规范1,规范2 | 88.28% | ✅ | |
| 7 | text | 规范1 | 80.05% | 2023 | ||
| 8 | block-size | 根据元素的书写模式定义了元素块的横向或纵向尺寸。根据 writing-mode 的值，此属性对应于 width 或 height 属性。可以直接用于设置多行文字垂直居中效果 | MDN,规范1,规范2 | 87.81% | ✅ | |
| 9 | fit-content | 87.71% | 2021 | |||
| 10 | max-content | 87.73% | 2019 | |||
| 11 | min-content | 87.73% | 2019 | |||
| 12 | color-scheme | 控制网页的颜色方案，light dark | MDN,规范1 | 85.62% | 2022 | |
| 13 | dark | 85.62% | 2022 | |||
| 14 | light | 85.62% | 2022 | |||
| 15 | normal | 85.62% | 2022 | |||
| 16 | only dark keyword | 84.54% | 2022 | |||
| 17 | only light keyword | 84.54% | 2022 | |||
| 18 | contain | 指示元素及其内容尽可能独立于文档树的其余部分。渲染计算限制为 DOM 子树而不是整个页面从而提供性能优势 | MDN,规范1 | 87.17% | 2022 | |
| 19 | content | 规范1 | 87.17% | 2022 | ||
| 20 | inline-size | MDN,规范1 | 82.08% | 2022 | ||
| 21 | layout | 规范1 | 87.17% | 2022 | ||
| 22 | none | 规范1 | 87.17% | 2022 | ||
| 23 | paint | 规范1 | 87.17% | 2022 | ||
| 24 | size | 规范1 | 87.17% | 2022 | ||
| 25 | strict | 规范1 | 87.17% | 2022 | ||
| 26 | style | MDN,规范1 | 87.15% | 2022 | ||
| 27 | content-visibility | 用于控制元素的内容是否应该被渲染，以及在渲染时是否应该预先生成。这可以用于提高性能, 原生的虚拟列表 | MDN,规范1 | 73.54% | 2024 | |
| 28 | auto | 规范1 | 73.54% | 2024 | ||
| 29 | hidden | 规范1 | 73.54% | 2024 | ||
| 30 | visible | 规范1 | 73.54% | 2024 | ||
| 31 | dominant-baseline | 用于设置行内元素的基线对齐方式。如果 ui 设计师给了你不同字号的文字，要求他们的特定对齐，可以使用这个属性 | MDN,规范1,规范2 | 85.62% | 2020 | |
| 32 | alphabetic | 规范1 | 85.62% | 2020 | ||
| 33 | auto | 规范1 | 85.62% | 2020 | ||
| 34 | central | 规范1 | 85.62% | 2020 | ||
| 35 | hanging | 规范1 | 85.62% | 2020 | ||
| 36 | ideographic | 规范1 | 85.62% | 2020 | ||
| 37 | mathematical | 规范1 | 85.62% | 2020 | ||
| 38 | middle | 规范1 | 85.62% | 2020 | ||
| 39 | filter | 滤镜, 实现模糊、颜色变化、阴影等效果 | MDN,规范1 | 88.05% | ✅ | |
| 40 | gap | flex, grid, 多列布局的间距 | MDN,规范1 | 87.90% | ✅ | |
| 41 | Supported in Flex Layout | 规范1 | 85.37% | 2021 | ||
| 42 | Supported in Grid Layout | 规范1 | 87.67% | 2018 | ||
| 43 | Supported in Multi-column Layout | 规范1 | 87.34% | 2021 | ||
| 44 | grid | 网格布局 | MDN,规范1 | 87.90% | ✅ | |
| 45 | image-orientation | 控制图片的方向。可以用于矫正手机相机横屏拍摄的图片方向 | MDN,规范1 | 85.67% | 2020 | |
| 46 | from-image | 规范1 | 85.67% | 2020 | ||
| 47 | none | 规范1 | 85.67% | 2020 | ||
| 48 | inline-size | 同 block-size，但是是行内元素的宽高。可以用于多行文字的垂直居中效果 | MDN,规范1,规范2 | 87.81% | ✅ | |
| 49 | fit-content | 87.71% | 2021 | |||
| 50 | max-content | 87.73% | 2019 | |||
| 51 | min-content | 87.73% | 2019 | |||
| 52 | line-break | 控制文本的换行方式。更好的控制中文的换行 | MDN,规范1 | 87.85% | ✅ | |
| 53 | anywhere | 规范1 | 85.56% | 2020 | ||
| 54 | auto | 规范1 | 85.56% | 2020 | ||
| 55 | loose | 规范1 | 85.56% | 2020 | ||
| 56 | strict | 规范1 | 85.56% | 2020 | ||
| 57 | mask | 通过在特定点遮罩或剪切图像来隐藏元素（部分或全部）。可以用于实现弹幕效果，如果加上前缀 -webkit- 其实各个浏览器很早就支持了。 | MDN,规范1 | 79.72% | 2023 | |
| 58 | object-fit | 控制img元素的填充方式 | MDN,规范1 | 88.21% | ✅ | |
| 59 | contain | 规范1 | 88.21% | 2016 | ||
| 60 | cover | 规范1 | 88.21% | 2016 | ||
| 61 | fill | 规范1 | 88.21% | 2016 | ||
| 62 | none | 规范1 | 88.21% | 2016 | ||
| 63 | scale-down | 规范1 | 88.21% | 2016 | ||
| 64 | object-position | 控制img元素内部图片的位置 | MDN,规范1 | 88.21% | ✅ | |
| 65 | offset | 沿定义路径对元素进行动画处理所需的所有属性 | MDN,规范1 | 86.31% | 2022 | |
| 66 | outline | 轮廓线，不占用空间。可以用于实现点击高亮效果 | MDN,规范1 | 82.67% | 2023 | |
| 67 | overscroll-behavior | 控制滚动到边界时的行为，根元素是不是要继续滚动 | MDN,规范1 | 86.24% | 2022 | |
| 68 | auto | 规范1 | 86.24% | 2022 | ||
| 69 | contain | 规范1 | 86.24% | 2022 | ||
| 70 | none | 规范1 | 86.24% | 2022 | ||
| 71 | scroll-snap-type | 通过在对齐端口中设置对齐点强制的方向和严格性来选择将其加入滚动对齐。原生的轮播图效果 | MDN,规范1 | 87.77% | 2022 | |
| 72 | block | 规范1 | 87.45% | 2020 | ||
| 73 | both | 规范1 | 87.45% | 2020 | ||
| 74 | inline | 规范1 | 87.45% | 2020 | ||
| 75 | none | 规范1 | 87.54% | 2020 | ||
| 76 | x | 规范1 | 87.45% | 2020 | ||
| 77 | y | 规范1 | 87.45% | 2020 | ||
| 78 | text-wrap | 控制文本的换行方式。有更多的换行方式 | MDN,规范1 | 77.49% | 2024 | |
| 79 | balance | MDN,规范1 | 77.12% | 2024 | ||
| 80 | nowrap | MDN,规范1 | 77.48% | 2024 | ||
| 81 | wrap | MDN,规范1 | 77.48% | 2024 | ||
| 82 | transform | 变形 | MDN,规范1,规范2 | 88.25% | ✅ | |
| 83 | has | 伪类选择器 has() 用于检查元素是否具有指定的选择器的特征。可以用于实现父元素的样式控制，或兄弟元素的样式控制 | MDN,规范1 | 82.73% | 2023 | |
| 84 | not | 伪类选择器 not() 用于命中不匹配指定选择器的元素。 | MDN,规范1 | 88.29% | ✅ | |
| 85 | Selector list argument | 85.46% | 2021 | |||
| 86 | is | 伪类选择器 is() 用于检查元素是否匹配指定的选择器。 | MDN,规范1 | 84.99% | 2021 | |
| 87 | Support for forgiving selector list | MDN, | 84.98% | 2021 | ||
| 88 | @container | 容器查询 @container，可以用于精细设置媒体查询下某些容器的样式 | MDN,规范1 | 82.06% | 2023 |
总结
总结一下，有几个很好用的我们业务开发过程中 或者 开发ui框架的时候真的可以用起来啦，比如：
block-size可以实现多行文本垂直居中width: fit-content配合margin: auto实现水平居中。以前要设置父元素的样式才能实现的功能，现在在当前元素一行就搞定啦，写法更解耦了，也不用硬多一个元素来配合，提高性能。content-visibility元素的虚拟列表，相比js 实现的，代码量更少，也能更好的支持每个元素高度不一致的情况。同时这个也支持渐进式升级。一些底层的表格库真的可以用起来了。contain实现dom 独立渲染计算。在复杂的弹窗情景下能提高一些性能。
数据来源：
