CSS前沿阵地

撰写时间：2024-03-09

修订时间：2025-03-23

@support

基础语法

@supports (property: value) { /* 支持时应用的样式 */ } @supports not (property: value) { /* 不支持时应用的样式 */ }

检测是否支持相对颜色的语法：

@supports (color: rgb(from red r g b)) { p { background-color: green; } } @supports not (color: rgb(from red r g b)) { p { background-color: red; } }

Hello, Realative Color

如果是绿色背景，则表示浏览器支持特定CSS特性；如果是红色背景，则表示浏览器不支持该特性。

高级组合技巧

逻辑运算符

/* and */ @supports (display: grid) and (scroll-behavior: smooth) { } /* or */ @supports (display: flex) or (display: -webkit-flex) { } /* not */ @supports not (display: contents) { }

嵌套检测

/* nested */ @supports ((display: flex) and (not (display: grid))) { }

实用检测场景

检测新特性

是否支持CSS自定义属性？

:root { color-scheme: dark light; } body { color: unset; background: unset; } @supports (--css-vars: 1) { :root { --primary-color: #33DE00; } p { color: var(--primary-color); } }

Is custom CSS properties supported?

如果支持CSS自定义属性，则为全局定义一个--primary-color属性，并由p来使用。如果不支持，则由浏览器根据系统的颜色主题为其自动设置颜色。

是否支持CSS Grid？

@supports (display: grid) { .container { display: grid; grid-template-columns: auto 1fr; } } div { border: 1px solid gray; }

渐进增强

我们要实现一个附顶的菜单，这依赖于浏览器是否支持sticky属性值。

@supports not (position: sticky) { .header { position: fixed; height: 55vh; } .content { margin-left: 8em; } } @supports (position: sticky) { .header { position: sticky; top: 0; } .content { margin-top: 2em; } } .header { border: 1px solid gray; background-color: #444; padding: 1em; color: yellow; }

Some paragrahs to extend the body's height.

如果不支持，则将菜单区域放置于左边而成为侧边栏。如果支持，则实现附顶菜单栏。

浏览器前缀检测

.content-box::before { position: absolute; color: #444; } @supports (backdrop-filter: blur(5px)) { .content-box { backdrop-filter: blur(15px); } .content-box::before { content: '[standard applied]'; } } @supports (-webkit-backdrop-filter: blur(5px)) { .content-box { -webkit-backdrop-filter: blur(15px); } .content-box::before { content: '[webkit applied]'; } } .container { width: 100%; height: 100vh; background: url('/imgs/Blender-V4.0.png') no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; } .content-box { width: 50%; height: 100px; border: 1px solid gray; display: grid; place-content: center; } p { color: rgb(47, 105, 152); font-weight: bold; font-size: 1.5em; }

Backdrop Filter

当前后两者均支持时，后者设置将覆盖前者设置。因此，可先进行通用的设置，最后，如果用户所使用的特定浏览器支持，再针对该浏览器进行设置。

注意事项

值检测限制

只能使用属性值-对的方式来检测是否支持特定持性，但无法检测属性值是否等于特定值：

/* no working */ @supports (color: #12345678) {}

伪元素限制

不能检测伪元素支持性：

/* invalid */ @supports (::backdrop { color: red }) {}

优先级

@supports内的样式遵循常规CSS层叠规则，不会自动覆盖外部样式。

移动端优化

可检测是否支持移动端：

@supports (-webkit-overflow-scrolling: touch) { .scroll-area { -webkit-overflow-scrolling: touch; } }

使用JavaScript代码来检测

if (CSS.supports('display', 'grid')) { document.querySelector('p').textContent = 'Your browser supports CSS grid.'; }

CSS Nesting Module

CSS Nesting Module 目前虽尚处于Working Draft阶段，但已成为Baseline 2023，即2023年，各主流浏览器均已经支持。访问https://caniuse.com/查看当前主流浏览器支持该特性的细节。

Safari V17版本中，其作为功能标志是默认打开的，且已处于稳定的状态。

div.nested { background: #333; & div { margin: 0.5em; border: 1px solid gray; > p { padding: 0.2em 1em; color: yellow; } > p > span { color: lightgreen; } } }

Hello, CSS Nesting.

Another div, which is a common one.

如果上面的Hello, CSS Nesting.显示为彩色，说明您的浏览器支持该特性。否则，说明您所使用的浏览器已经落伍了。

目前发现在安卓手机上所使用的默认的浏览器，不支持的情况可能较多。原因是默认浏览器所选用的内核可能不支持，或内核版本可能过低。

但作为普通用户，他们并非技术人员，并不了解此点。色盲往往并不知道自己是色盲，并不知道自己眼中的世界与别人眼中的世界有天壤之别。这才是最致命的。

普通用户没有任何过错。错的是挂羊头卖狗肉的浏览器的无良开发商及维护商，往往标榜自己开发的浏览器有多厉害。但实际上，首先，他根本没有自己开发浏览器，而是直接使用了别人开发的内核，然后大力进行外饰包装。这还不要紧，他们甚至懒得及时更新自己浏览器的内核版本。

现在世界上真正在开发并升级、维护浏览器的，只有以下几家：

Google的Chrome
Mozilla的Firefox
Apple的Safari
被奇虎360及昆仑万维所收购的Opera

而微软的Edge，使用的是Google开源的Chromium。

此技术真的是太香了。鉴此，本站开始使用。

更多细节，请访问W3C的CSS Nesting Module。

Color Module Level 5 的支持情况

CSS Color Module Level 5虽正处于工作草案阶段，但一些特性已获得较好的支持。以下若显示绿色，说明您所使用的浏览器已支持相应特性；红色说明暂未支持。

@supports (color: contrast-color(white)) { p#contrast-color > span { color: lightgreen; } } @supports (color: color-mix(in srgb, white, black)) { p#color-mix > span { color: lightgreen; } } @supports (color: light-dark(white, black)) { p#light-dark > span { color: lightgreen; } } @supports (color: rgb(from red r g b)) { p#relative-color > span { color: lightgreen; } } div { display: table; } p { display: table-row; } p * { display: table-cell; padding: 0.5em; } p > label { text-align: right; } p > label:after { content: ': '; } p > span { color: red; }

contrast-color()isSupporting?

color-mix()isSupporting?

light-dark()isSupporting?

relative colorisSupporting?

对于开发者来讲，使用不同的浏览器访问本页，可获各自的支持情况。然后再决定是否在产品中使用。