在阅读了Louis Lazaris的《那些你从未使用过的HTML属性》一文后，我问自己（以及社区），哪些属性和选择器是不太出名的，或者应该更经常使用。社区的一些答案让我感到惊讶，因为它们包括了一些非常有用的、经常被要求使用的CSS功能，这些功能是在过去一两年内提供的。
下面的列表是根据社区的要求和我个人的选择创建的。那么，让我们开始吧
all属性
这是一个速记属性，通常用于通过有效地停止继承将所有属性重置为各自的初始值，或者对所有属性强制执行继承。
initial
将所有属性设置为它们各自的初始值。inherit
将所有属性设置为它们的继承值。unset
将所有的值改变为各自的默认值，即inherit或initial。revert
其结果取决于该属性所在的样式表原点。revert-layer
结果值将与之前的级联层或下一个匹配规则相匹配。
aspect-ratio用于尺寸控制的属性
当aspect-ratio 最初发布时，我认为我不会在图像和视频元素之外以及在非常狭窄的用例中使用它。我很惊讶地发现自己以类似于使用currentColor 的方式来使用它--避免不必要地以相同的值设置多个属性。
通过aspect-ratio ，我们可以轻松地控制一个元素的大小。例如，等宽等高的按钮的长宽比为1 。这样，我们可以很容易地创建适应其内容和不同图标大小的按钮，同时保持所需的形状。
我假设这个问题不能被修复，于是我继续前进。社区投票中的一条推文建议我研究一下font-variant-numeric: tabular-nums ，我惊讶地发现有大量的选项会影响字体的渲染。
例如，tabular-nums ，通过设置所有数字字符的等宽来解决上述问题。
渲染性能优化
说到渲染性能，在常规项目工作中，很少会遇到这些问题。然而，在有几千个元素的大型DOM树或其他类似的边缘情况下，我们会遇到一些与CSS和渲染有关的性能问题。幸运的是，我们有一个直接的方法来处理这些导致滞后、对用户输入无反应、低FPS等的性能问题。
这就是contain 属性的用处。它告诉浏览器在渲染周期中什么不会改变，所以浏览器可以安全地跳过它。这可能会对布局和风格产生影响，所以一定要测试这个属性是否会引入任何视觉错误。
.container {
/* child elements won't display outside of this container so only the contents of this container should be rendered*/
contain: paint;
{
这个属性相当复杂，Rachel Andrew在她的文章中已经很详细地介绍了它。这个属性有点难以演示，因为它在那些非常特殊的边缘情况下最有用。例如，Johan Isaksson在他的文章中谈到了其中一个例子，他注意到Google Search Console上有一个重大的滚动滞后。它是由一个页面上有超过38000个元素引起的，并通过包含属性得到了解决
正如你所看到的，contain 有赖于开发者清楚地知道哪些属性不会改变，并知道如何避免潜在的退步。所以，要安全地使用这个属性有点困难。
然而，有一个选择，我们可以向浏览器发出信号，让它自动应用所需的contain 值。我们可以使用content-visibility 属性。有了这个属性，我们可以推迟屏幕外和折页下内容的渲染。有些人甚至将此称为 "懒人渲染"。
Una Kravets和Vladimir Levin在他们的旅游博客例子中涉及了这个属性。他们将下面的类名应用于折叠下面的博客部分。
.story {
content-visibility: auto; /* Behaves like overflow: hidden; */
contain-intrinsic-size: 100px 1000px;
}
通过contain-intrinsic-size ，我们可以估计出要渲染的部分的大小。如果没有这个属性，内容的大小将是0 ，而页面尺寸将不断增加，因为内容被加载。
回到Una Kravets和Vladimir Levin的旅游博客例子。注意到当你滚动或拖动滚动条时，它是如何跳动的。这是因为用contain-intrinsic-size 设置的占位符（估计）尺寸和实际渲染尺寸之间的差异。如果我们省略这个属性，滚动条的跳动就会更加刺耳。
Thijs Terluin介绍了几种计算这个值的方法，包括PHP和JavaScript。使用PHP的服务器端计算尤其令人印象深刻，因为它可以在更大的一组不同的页面上自动估计数值，并使其对屏幕尺寸的子集更加准确。
请记住，这些属性应该在问题发生后用于修复，所以在遇到渲染性能问题之前，省略它们是安全的。
总结
CSS在不断发展，每年都有更多的功能被加入。跟上最新的功能和最佳实践是很重要的，但也要注意浏览器的支持情况，并使用渐进式增强。
我确信还有更多的CSS属性和选择器没有包括在这里。欢迎在评论中告诉我们哪些属性或选择器不太为人所知，或者应该被更多地使用，但可能有点复杂，或者周围没有足够的喧嚣。
