CSS 三条内容分享

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。

CSS 奇思妙想 | 全兼容的毛玻璃效果

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）：