CSS 浏览器支持

浏览器支持现状

主要浏览器引擎

- Chrome/Edge (Blink)
- Firefox (Gecko)
- Safari (WebKit)
- Opera (Blink)

全球使用率（2024）

• Chrome: ~65%
• Safari: ~18%
• Edge: ~5%
• Firefox: ~3%
• 其他: ~9%

浏览器支持查询工具

• Can I Use: https://caniuse.com
• MDN Browser Compatibility: https://developer.mozilla.org
• CSS Tricks Browser Support: https://css-tricks.com

浏览器前缀指南

常用前缀

• -webkit- (Chrome, Safari, Edge, Opera)
• -moz- (Firefox)
• -ms- (Internet Explorer)
• -o- (旧版 Opera)

现代前缀使用策略

/* 推荐写法：先写带前缀的，再写标准的 */
.gradient-bg {
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1-6 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1-12 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6-15 */
    background: linear-gradient(red, blue); /* 标准语法 */
}

/* Flexbox 兼容性处理 */
.flex-container {
    display: -webkit-box; /* 2009版语法 */
    display: -moz-box;
    display: -ms-flexbox; /* 2011版语法 */
    display: -webkit-flex; /* 2012版语法 */
    display: flex; /* 标准语法 */
}

构建工具自动处理

PostCSS + Autoprefixer 配置

// package.json 或 .browserslistrc
{
    "browserslist": [
        "> 1%" /* 全球使用率>1%的浏览器 */,
        "last 2 versions" /* 每个浏览器的最后两个版本 */,
        "not ie <= 11" /* 排除IE11及以下 */,
        "not dead" /* 排除官方不再支持的浏览器 */
    ]
}

// postcss.config.js
module.exports = {
    plugins: [
        require("autoprefixer")({
            grid: "autoplace", // 自动添加IE的grid前缀
        }),
    ],
};

实用的兼容性 Mixins（SCSS 示例）

// 兼容性Mixin
@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin transition($property) {
    -webkit-transition: $property;
    -moz-transition: $property;
    -ms-transition: $property;
    -o-transition: $property;
    transition: $property;
}

@mixin gradient($from, $to) {
    background-color: $to; /* 备用 */
    background-image: -webkit-linear-gradient($from, $to);
    background-image: -moz-linear-gradient($from, $to);
    background-image: -o-linear-gradient($from, $to);
    background-image: linear-gradient($from, $to);
}

// 使用示例
.container {
    @include flexbox();
    @include transition(all 0.3s ease);
    @include gradient(#ff0000, #0000ff);
}