CSS @supports和JS CSSSupportsRule接口

基本概念

CSSSupportsRule 接口代表了一个 CSS @supports 规则，它允许我们根据浏览器对 CSS 特性的支持程度来应用不同的样式。

使用方法

常见用法示例

/* 检测单个属性 */
@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* 检测多个属性（使用 and） */
@supports (display: flex) and (backdrop-filter: blur(10px)) {
    .modal {
        display: flex;
        backdrop-filter: blur(10px);
    }
}

/* 使用 or 运算符 */
@supports (display: grid) or (display: flex) {
    .layout {
        /* 网格或弹性布局的样式 */
    }
}

/* 使用 not 运算符 */
@supports not (display: grid) {
    /* 当不支持网格布局时的后备方案 */
    .container {
        float: left;
        width: 50%;
    }
}

selector()

此函数评估浏览器是否支持指定的 selector 语法。以下示例如果浏览器支持 子元素组合符，则返回 true 并应用 CSS 样式。

@supports selector(h2 > p) {
}

**mdn文档里面还有别的例子，懒得复制过来,不过也没说啥**

mdn.org.cn/en-US/docs/…

讲到了一些各种偏门技术的检测测试

JavaScript 中的使用

1. CSS.supports() 方法

// 检查是否支持特定属性和值
if (CSS.supports('display', 'grid')) {
    console.log('浏览器支持网格布局');
}

// 检查完整的 CSS 声明
if (CSS.supports('(display: grid) and (gap: 1rem)')) {
    console.log('浏览器支持网格布局和 gap 属性');
}

2. 实际应用示例

// 特性检测并应用不同的布局策略
function applyLayout() {
    if (CSS.supports('display', 'grid')) {
        element.style.display = 'grid';
    } else if (CSS.supports('display', 'flex')) {
        element.style.display = 'flex';
    } else {
        element.style.display = 'block';
    }
}

// 检测多个特性
function checkFeatures() {
    const supportsModernFeatures = CSS.supports('(display: grid) and (gap: 1rem)');
    
    if (supportsModernFeatures) {
        // 使用现代布局
        applyModernLayout();
    } else {
        // 使用后备方案
        applyFallbackLayout();
    }
}

实际应用场景

1. 渐进增强

/* 基础样式 */
.layout {
    display: block;
}

/* 现代布局 */
@supports (display: grid) {
    .layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
}

2. 多重后备方案

/* 默认布局 */
.container {
    overflow: auto;
}

/* 使用 backdrop-filter */
@supports (backdrop-filter: blur(10px)) {
    .container {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.5);
    }
}

/* 替代方案 */
@supports not (backdrop-filter: blur(10px)) {
    .container {
        background: rgba(255, 255, 255, 0.95);
    }
}

注意事项

1. 性能考虑

• @supports 规则应该谨慎使用
• 过多的特性检测可能影响性能
• 建议只在必要时使用

2. 兼容性处理

• 始终提供基础样式作为后备方案
• 考虑使用渐进增强的方式
• 注意 @supports 本身的浏览器支持情况

3. 最佳实践

/* 推荐的使用方式 */
.element {
    /* 基础样式 */
    background: rgb(255, 255, 255);
    
    /* 现代特性 */
    @supports (backdrop-filter: blur(10px)) {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.5);
    }
}