Compatibility Checker
OKLCH ブラウザ互換性チェッカー
ブラウザのOKLCH色空間と最新のCSS色機能のサポートを確認。color-mix()、相対色、Display-P3、LAB、LCHなどのCSS Color Level 4互換性をテスト。
Automatic browser feature detection
Fallback guidance included
CSS Color 4 readiness at a glance
How to use
01
Run automatic detection
Open the page and the checker will immediately test your current browser for OKLCH support.
02
Inspect feature coverage
Review the detailed support list for color-mix(), relative colors, Display-P3, LAB, LCH, and other modern CSS color features.
03
Read fallback advice
If a feature is missing, check the recommended progressive enhancement and fallback strategies.
04
Compare browser readiness
Use the support overview to understand which browsers and versions are ready for OKLCH in production.
互換性を確認中...
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);
}
}