在前端开发中，有时候我们会遇到一些兼容性问题，这时候一些 CSS hack 就会派上用场。CSS hack 是指通过一些特殊的 CSS 代码，实现对某个浏览器或者某个版本的浏览器进行特定的样式设置。在过去，我们常用的 CSS hack 方式包括条件注释、CSS 的浏览器前缀等，但是这些方法都存在一定的局限性和安全风险。而随着 CSS3 技术的不断发展，新的 CSS hack 方式也层出不穷
@supports
@supports 是一个 CSS3 新增的条件语句，它可以检查浏览器是否支持某些 CSS 属性或值。这个特性被广泛利用来实现 CSS hack，例如：
/* 判断浏览器是否支持 display: flex */
@supports (display: flex) {
.flexbox {
display: flex;
}
}
/* 判断浏览器是否支持滤镜效果 */
@supports (-webkit-filter: grayscale(100%)) or (filter: grayscale(100%)) {
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
:root
:root 伪类可以用来选择文档的根元素，在 HTML 中一般为 元素。我们可以利用 :root 来设置某些 CSS 变量，从而实现特定浏览器下的样式设置。例如：
/* 设置 CSS 变量 */
:root {
--main-color: #f00;
}
/* 利用 CSS 变量设置颜色 */
.button {
color: var(--main-color);
}
/* 仅在 IE 浏览器下覆盖按钮样式 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.button {
color: #fff;
background-color: #000;
}
}
:not()
:not() 伪类可以选择除了指定元素以外的所有元素，我们可以利用它来实现对特定浏览器的样式设置。例如：
/* 这段代码会覆盖 IE 下的样式 */
.button:not([type="submit"]) {
background-color: #f00;
}
/* 这段代码只会在 IE11 中生效 */
_:-ms-fullscreen, :root button {
padding: 10px;
}
::-webkit-scrollbar
::-webkit-scrollbar 是一个 WebKit 内核浏览器私有的伪元素，它可以用来设置滚动条的样式。例如：
/* 设置滚动条的宽度和背景颜色 */
::-webkit-scrollbar {
width: 10px;
background-color: #ccc;
}
/* 设置滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
background-color: #eee;
}
/* 设置滚动条滑块的背景颜色和圆角 */
::-webkit-scrollbar-thumb {
background-color: #f00;
border-radius: 5px;
}
值得注意的是，虽然 ::-webkit-scrollbar 是一个 WebKit 内核浏览器私有的伪元素，但是在一些现代浏览器中已经支持了这个属性。
calc()
calc() 函数可以用来计算长度、频率和角度等值，我们可以利用它来实现特定浏览器下的样式设置。例如：
/* 设置图片的尺寸 */
img {
width: calc(100% - 20px);
}
/* 仅在 IE9 中生效 */
@media screen and (min-width: 0\0) {
img {
width: 100%;
### flexbox
flexbox 是一个 CSS3 布局模块，它可以为容器中的子元素提供灵活的定位和对齐方式。我们可以利用 flexbox 来实现特定浏览器下的样式设置。例如：
```css
/* 利用 flexbox 实现垂直居中 */
.container {
display: flex;
align-items: center;
}
/* 仅在 IE11 中生效 */
_:-ms-fullscreen, :root .container {
display: block;
text-align: center;
}
/* 仅在 IE10 中生效 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.container {
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
}
grid
grid 是另一个 CSS3 布局模块，它可以为容器中的子元素提供网格布局。我们可以利用 grid 来实现特定浏览器下的样式设置。例如：
/* 利用 grid 实现自适应布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* 仅在 IE10 中生效 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.container {
display: -ms-grid;
-ms-grid-columns: (200px)[auto-fill];
}
}
background-clip
background-clip 属性用于指定背景的绘制区域，我们可以利用它来实现特定浏览器下的样式设置。例如：
/* 设置背景颜色和边框 */
.box {
background-color: #f00;
border: 1px solid #000;
}
/* 在 IE9 中只显示背景颜色 */
@media screen and (min-width: 0\0) {
.box {
background-clip: content-box;
}
}
filter
filter 属性用于指定元素的滤镜效果，我们可以利用它来实现特定浏览器下的样式设置。例如：
/* 设置图片的模糊效果 */
img {
filter: blur(5px);
}
/* 在 IE11 中不显示滤镜效果 */
_:-ms-fullscreen, :root img {
filter: none;
}
/* 在 IE10 中显示灰度效果 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img {
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
}
object-fit
object-fit 属性用于指定替换元素（如 img和 video）在容器中的布局方式，我们可以利用它来实现特定浏览器下的样式设置。例如：
/* 设置图片的填充方式 */
img {
object-fit: cover;
}
/* 在 IE11 中不显示填充效果 */
_:-ms-fullscreen, :root img {
object-fit: none;
}
/* 在 IE10 中显示缩放效果 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img {
-ms-interpolation-mode: bicubic;
}
}
总结
以上是一些基于 CSS3 的属性作为 CSS hack 的方式，它们可以帮助我们更好地解决兼容性问题。需要注意的是，CSS hack 虽然可以解决兼容性问题，但也存在一些安全风险和语义化问题。因此，在使用 CSS hack 时，我们需要谨慎权衡利弊，并尽量避免使用过多的 hack 方式。
