CSS使用小技巧

healerhe
784 阅读8分钟

元素不可见性设置小技巧

  • display: none：隐藏元素并破坏其渲染状态。 这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵
  • visibility: hidden：隐藏元素并保持其渲染状态。 这并不能真正从文档中删除该元素，因为它（及其子树）仍占据页面上的几何空间，并且仍然可以单击。 它也可以在需要时随时更新渲染状态，即使隐藏也是如此
  • content-visibility: hidden：隐藏元素并保留其渲染状态。这意味着该元素隐藏时行为和display: none一样，但再次显示它的成本要低得多 推荐使用

有三种方式可以设置元素可见不与可见性

  1. display
  2. visibility
  3. content-visibility

display

display取值

值描述
none隐藏元素，不占页面空间，并且不会渲染
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block行内块元素。（CSS2.1 新增的值）
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
table此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table此元素会作为内联表格来显示（类似 \table>），表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row此元素会作为一个表格行显示（类似 <tr>）。
table-column-group此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column此元素会作为一个单元格列显示（类似 <col>）
table-cell此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption此元素会作为一个表格标题显示（类似 <caption>）
inherit规定应该从父元素继承 display 属性的值。

visibility

取值如下

值描述
hidden隐藏元素并保持其渲染状态。 这并不能真正从文档中删除该元素; 元素占据空间
visible隐藏元素，不占页面空间，并且不会渲染
auto隐藏元素，不占页面空间，并且不会渲染

content-visibility

content-visibility使用户代理可以跳过元素的渲染工作，包括布局和绘画，直到需要它为止。因为跳过了渲染，所以如果大部分内容不在屏幕上，则利用该content-visibility属性可使初始用户加载更快。它还允许与屏幕上的内容进行更快的交互。挺整洁的。

这个属性 改变了一个元素的可见性，并管理其渲染状态。 提高了渲染性能。

content-visibility结合了visibility和display的优点。

CSS包含的主要目标是通过提供DOM子树与页面其余部分的可预测隔离来实现Web内容的渲染性能改进。

取值如下

值描述
hidden隐藏元素并保留其渲染状态。这意味着该元素隐藏时行为和display: none一样，但再次显示它的成本要低得多
visible显示元素
auto显示元素，并对不在屏幕上的元素有size包容性

参考连接：web.dev/content-vis…

合理使用will-change

通常情况之下，Web动画（在动的元素）是和其他元素一起定期渲染的，早期在动画开发时，会使用CSS的3D变换（transform中的translate3d()或translateZ()）这样的Hack手段来开启GPU加速，让动画变得更流畅。但这样做其实是将元素和它的上下文提到另一个“层”，独立于其他元素被渲染。代价有可能导致transform动画延迟几百毫秒。

现在可以直接使用CSS的will-change属性，该属性可以表明元素将修改特定的属性，让浏览器事先进行必要的优化。

示例：

<!-- HTML -->
<div class="animate"></div>

/* CSS */
.animate {
    will-change: opacity
}

浏览器渲染上面的代码时，浏览器将为该元素创建一个单独的层。之后，它将该元素的渲染与其他优化一起委托给GPU，即，浏览器会识别will-change属性，并优化未来与不透明相关的变化。这将使动画变得更加流畅，因为GPU加速接管了动画的渲染。

will-change值有：

值描述
auto默认值，浏览器会根据具体情况，自行进行优化
scroll-position表示开发者将要改变元素的滚动位置，比如浏览器通常仅渲染可滚动元素“滚动窗口”中的内容。而某些内容超过该窗口（不在浏览器的可视区域内）。如果will-change显式设置了该值，将扩展渲染“滚动窗口”周围的内容，从而顺利地进行更长，更快的滚动（让元素的滚动更流畅）
content表示开发者将要改变元素的内容，比如浏览器常将大部分不经常改变的元素缓存下来。但如果一个元素的内容不断发生改变，那么产生和维护这个缓存就是在浪费时间。如果will-change显式设置了该值，可以减少浏览器对元素的缓存，或者完全避免缓存。变为从始至终都重新渲染元素。使用该值时需要尽量在文档树最末尾上使用，因为该值会被应用到它所声明元素的子节点，要是在文档树较高的节点上使用的话，可能会对页面性能造成较大的影响
<custom-ident>表示开发者将要改变的元素属性。如果给定的值是缩写，则默认被扩展全，比如，will-change设置的值是padding，那么会补全所有padding的属性，如 will-change: padding-top, padding-right, padding-bottom, padding-left;

注意：当在一个元素上使用will-change时，浏览器会尝试通过将元素移动到一个新的图层并将转换工作交互GPU来优化它。如果你没有任何要转换的内容，则会导致资源浪费。

建议在完成所有动画后，将元素的will-change删除。 示例：

var el = document.getElementById('element');

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
    // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
    this.style.willChange = 'transform, opacity';
}
function removeHint() {
    this.style.willChange = 'auto';
}

让元素及其内容尽可能独立于文档树的其余部分（contain）

该属性允许指定特定的DOM元素和它的子元素，让它们能够独立于整个DOM树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次针对整个页面。即，允许浏览器针对DOM的有限区域而不是整个页面重新计算布局，样式，绘画，大小或它们的任意组合。

取值

值描述
layout该值表示元素的内部布局不受外部的任何影响，同时该元素以及其内容也不会影响以上级；容器的后代不应该导致其容器外元素的布局改变，反之亦然）
paint该值表示元素的子级不能在该元素的范围外显示，该元素不会有任何内容溢出（或者即使溢出了，也不会被显示；容器的内容将永远不会绘制超出容器的尺寸，如果容器是模糊的，那么就根本不会绘制内容
size该值表示元素盒子的大小是独立于其内容，也就是说在计算该元素盒子大小的时候是会忽略其子元素；当其内容发生变化时，该容器不应导致页面上的位置移动。
content该值是contain: layout paint的简写
strict该值是contain: layout paint size的简写

scroll-behavior让滚动更流畅

scroll-behavior是CSSOM View Module提供的一个新特性，可以轻易的帮助我们实现丝滑般的滚动效果。该属性可以为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。

scroll-behavior接受两个值：

值描述
auto滚动框立即滚动
smooth滚动框通过一个用户代理定义的时间段使用定义的时间函数来实现平稳的滚动，用户代理平台应遵循约定，如果有的话

避免@import包含多个样式表

通过 @import，我们可以在另一个样式表中包含一个样式表。当我们在处理一个大型项目时，使用 @import 可以使代码更加简洁。

关于 @import 的关键事实是，它是一个阻塞调用，因为它必须通过网络请求来获取文件，解析文件，并将其包含在样式表中。如果我们在样式表中嵌套了 @import，就会妨碍渲染性能。

通过多个 link 来实现同样的功能，但性能要好得多，因为它允许我们并行加载样式表。

参考地址： juejin.cn/post/694266…

avatar
文章
阅读
粉丝