OKLCH Browser-Kompatibilitätsprüfer
Überprüfen Sie die Unterstützung Ihres Browsers für den OKLCH-Farbraum und moderne CSS-Farbfunktionen. Testen Sie die CSS Color Level 4-Kompatibilität einschließlich color-mix(), relativer Farben, Display-P3, LAB, LCH und mehr.
使用指南
1. 自动检测：打开页面后自动检测您当前浏览器的 OKLCH 支持情况。
2. 功能检查：查看详细的功能支持列表，包括 color-mix()、相对颜色、Display-P3 等。
3. 获取建议：如果不支持某些功能，查看渐进增强建议和回退方案。
4. 了解浏览器支持：查看各浏览器版本对 OKLCH 的支持情况，了解何时可以使用这些功能。
Über OKLCH Browser-Unterstützung
OKLCH ist Teil der CSS Color Level 4-Spezifikation und bietet einen wahrnehmungseinheitlichen Farbraum für Webdesign. Dieses Tool überprüft die Unterstützung Ihres Browsers für OKLCH und verwandte moderne Farbfunktionen.
Browser-Unterstützungsübersicht
- 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
Best Practices für die Implementierung
Bei der Verwendung von OKLCH in der Produktion sollten Sie immer Fallback-Farben für Browser bereitstellen, die es nicht unterstützen. Verwenden Sie CSS-Feature-Detection mit @supports, um Ihr Farberlebnis progressiv zu verbessern.
/* 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);
}
}