OKLCH 浏览器兼容性检查器
检查您的浏览器对 OKLCH 色彩空间和现代 CSS 颜色特性的支持情况。测试 CSS Color Level 4 兼容性,包括 color-mix()、相对颜色、Display-P3、LAB、LCH 等功能。
检查兼容性中...
关于 OKLCH 浏览器支持
OKLCH 是 CSS Color Level 4 规范的一部分,为网页设计提供感知均匀的色彩空间。此工具检查您的浏览器对 OKLCH 及相关现代颜色功能的支持情况。
浏览器支持概览
- Chrome/Edge 111+: Full OKLCH support including color-mix() and relative colors
- Safari 15.4+: OKLCH support with progressive enhancements in newer versions
- Firefox 113+: Complete CSS Color Level 4 support including OKLCH
实现最佳实践
在生产环境中使用 OKLCH 时,请始终为不支持的浏览器提供后备颜色。使用 @supports 进行 CSS 特性检测,以渐进增强您的颜色体验。
/* Provide fallback for older browsers */
.element {
background: #00bca2; /* Fallback */
background: oklch(70% 0.150 180);
}
/* Feature detection with @supports */
@supports (color: oklch(0% 0 0)) {
.element {
background: oklch(70% 0.150 180);
}
}