一些CSS属性总结

(Updated: )
CSS
CSS

本篇文章会更新一些我遇到的不常见的 CSS 属性。

display: flow-root

清除浮动

1
2
3
.container {
  display: flow-root;
}

position: sticky

1
2
3
4
.item {
  position: sticky;
  top: 0;
}

设置 position: sticky 会让元素在页面滚动时如同在正常流中，但当其滚动到相对于视口的某个特定位置时就会固定在屏幕上，如同 fixed 一般。

display: contents

为一个元素应用 display: content 属性会导致其自身的盒子不生成但所有的子元素都会照常生成。

@supports

可以让我们根据浏览器是否支持某些特性，来写出有条件的 CSS 样式。

1
2
3
4
5
6
7
/* 如果浏览器支持display: contents 则插入以下的样式 */

@supports (display: contents) {
.feed ul,
.feed li {
  display: contents;
}

overscroll-behavior

可以控制浏览器过度滚动时的表现——也就是滚动到边界时的行为。

1
2
3
4
/* 滚动到边界后不影响其他的元素滚动 */
.messages {
  overscroll-behavior: contain;
}

:focus-within

表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus 伪类。

1
2
3
.chat:focus-within .messages {
  max-height: 300px;
}

filter

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

1
2
3
.chat:focus-within ~ .container {
  filter: blur(5px);
}

:placeholder-shown

:placeholder-shown CSS 伪类 在 input 或 textarea 元素显示 placeholder text 时生效。

1
2
3
.input:not(:placeholder-shown) + .tip {
  max-height: 2em;
}

attr()

CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

1
2
3
p:before {
  content: attr(data-foo) " ";
}
1
<p data-foo="hello">world</p>

结果：

1
hello world

contain

contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图或它们的组合的时候，只会影响到有限的 DOM 区域，而不是整个页面。

这个 contain 属性可以有 7 种不同的值：

  • none 无
  • layout 开启布局限制
  • style 开启样式限制
  • paint 开启渲染限制
  • size 开启 size 限制
  • content 开启除了 size 外的所有限制
  • strict 开启 layout, style 和 paint 三种限制组合
1
2
3
.chat {
  contain: paint;
}

font-display：optional