1. 单行文本溢出隐藏
这块老生常谈了,本人当初实习的时候,被抓的第一个 bug 就是这个。做起来比较简单:
.header-title {
white-space: nowrap; /* 文本默认会换行,这边不让文本换行 */
overflow: hidden; /* 文本溢出隐藏 */
text-overflow: ellipsis; /* 溢出展示省略 */
}
2. 毛玻璃背景
设计师给的设计稿上经常会有毛玻璃背景,但假如直接从设计稿上复制 CSS 属性,一般都是用 backdrop-filter
实现的。
backdrop-filter
CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
backdrop-filter
与 filter
非常类似,可以取的值都是一样的,但是一个是作用于整个元素,一个是只作用于元素后面的区域。
<div class="bg">
<div>Normal</div>
<div class="g-filter">filter</div>
<div class="g-backdrop-filter">backdrop-filter</div>
</div>
.bg {
background: url(image.png);
& > div {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, .7);
}
.g-filter {
filter: blur(6px);
}
.g-backdrop-filter {
backdrop-filter: blur(6px);
}
}
backdrop-filter
其实已经诞生挺久了,然而,firefox 至今都不兼容它!
对于部分已经放弃了 IE 的 PC 端业务而言,firefox 还是需要兼容的,想要让使用 backdrop-filter
实现毛玻璃效果应用落地,firefox 的兼容问题必须得解决。
对于 firefox 浏览器,可以使用 moz-element()
配合 filter: blur()
实现背景毛玻璃效果:
.bg {
// 整个页面的 DOM 结构
}
/**
* 如果兼容 `backdrop-filter`,`.g-glossy` 内的代码将直接生效,并且 `.g-glossy-firefox` 不会展示
*/
.g-glossy {
position: fixed;
width: 600px;
height: 300px;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
.g-glossy-firefox {
display: none;
}
/**
* 对于 firefox 浏览器,`@supports (background: -moz-element(#bg))` 内的样式会生效
* 此时 `.g-glossy-firefox` 将会利用 `background: -moz-element(#bg) no-repeat;` 模拟 id 为 bg 的元素
*/
@supports (background: -moz-element(#bg)) {
.g-glossy-firefox {
display: block;
position: fixed;
width: 600px;
height: 300px;
background: -moz-element(#bg) no-repeat;
filter: blur(10px);
}
}
对于不兼容的上述 3 种效果的其他浏览器,设置了毛玻璃效果的元素,可以通过设置类似 background: rgba(255, 255, 255, 0.5)
的样式,使之回退到半透明效果,也算一种非常合理的降级效果,不会引起 Bug。
3. CSS 选择器 :where()
有下面一段样式:
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
改用 :where()
就可以这样写:
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
需要注意 :where()
存在兼容性问题(Chrome > 87):