CSS

属性

@media

悬浮支持：

@media (hover: hover) {
}css

范围语法（支持一般不过有盼头了）：

@media (30rem <= width < 50rem) {
}css

transition

在哪加的属性就在哪上过渡，不然手机浏览器效果大概率有问题，currentColor 响应也非常糟糕。

width

会忽略滚动条宽度。Firefox 没有滚动条了好耶~

content

修改图片：

img {
  content: url();
}css

实践

文字基线

测试下来唯一一个能解决的 FireFox 文本位置和 WebKit 系不一样的做法：line-height 比 height 高 1 像素。

圆角容器、粘性表头与背景滤镜

亲代节点设置 border-radius 后，目前似乎可以自动裁切子元素，而不需要 overflow: hidden。如果表头有实色背景，那么问题到这里就结束了。

然而如果希望表头拥有背景滤镜，backdrop-filter 会触发合成层导致圆角溢出，设置 overflow: hidden 则会破坏表头的 position: sticky，因其粘性状态其实处于 overflow 中，会直接被隐藏。

解决方案是给表头元素用伪元素做滤镜效果，记得加圆角（四角都圆也没问题，因为表格通常有内边距，抠掉的角落不会有漏网文字）。

::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(.25rem);
  border-radius: .25rem .25rem 0 0;
}css