Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A var() fallback does not make an unsupported oklch() color usable in an older browser. It handles a missing or invalid custom-property reference, not a value the browser accepts as a token sequence but cannot use as a color. Set conventional colors as defaults, put OKLCH overrides inside an @supports test for the color syntax, and keep conventional declarations where the colors are applied.
Why a var() fallback can fail
Consider --ink: oklch(25% 0.02 250) and color: var(--ink, #202020). The fallback after the comma is used when the custom property reference is missing or invalid. It is not a compatibility substitute for a color value that the browser cannot interpret, nor does it repair browsers that do not support custom properties. MDN’s custom properties guide explains this distinction.
Custom properties can store token sequences without validating them against the eventual property that consumes them. When the browser substitutes an unsupported value into color, that declaration can become invalid at computed-value time. The browser then uses color’s inherited or initial value. An earlier color: #202020 declaration is not a dependable fallback: the later color: var(--ink) declaration may already have won the cascade before substitution fails.
The CSS Color specification says unsupported syntax is treated as invalid and ignored as appropriate, but that does not automatically turn an unsupported value stored in a custom property into a valid color. The CSS Color Module describes how unsupported color syntax is handled.
#1 Best Overall
Use a conventional default and test the color syntax
Set conventional color values as the custom-property defaults, then override them only when a feature query confirms that the browser accepts the relevant OKLCH value for color. Keep a conventional declaration before each variable-based declaration as well:
:root {
--surface: #f4f4f4;
--ink: #202020;
}
.card {
background-color: #f4f4f4;
background-color: var(--surface);
color: #202020;
color: var(--ink);
}
@supports (color: oklch(60% 0.2 30)) {
:root {
--surface: oklch(97% 0.01 250);
--ink: oklch(25% 0.02 250);
}
}The query @supports (color: oklch(60% 0.2 30)) tests a property-value pair: whether the browser accepts an OKLCH value for color. It is more relevant than checking only whether the browser recognizes the property name. MDN describes feature queries as tests for support of CSS features, including properties and property values, in its feature queries guide.
Rank #2
What happens in each browser support case
- No custom-property support: The direct hexadecimal declarations provide the colors.
- Custom properties, but no support for the queried OKLCH syntax: The conventional custom-property defaults remain in effect.
- Support for the queried syntax: The feature query applies the OKLCH custom-property values.
This is progressive enhancement: older support levels retain conventional colors, while browsers that accept the tested syntax can use the enhanced tokens. The code pattern follows the documented custom-property and feature-query rules; it is not a report of independent browser testing.
Match the query to the syntax you plan to use
A feature query establishes support for the declaration it tests; it does not establish support for every related or newer syntax. The example tests an absolute oklch() value. If your implementation depends on relative-color syntax or another newer OKLCH feature, test that exact syntax and follow the browser range required by your project rather than assuming the absolute-color query covers it.
MDN describes oklch() as widely available across browsers since May 2023, while noting that support varies for some parts of the feature. That broad availability label is not a version cutoff for every browser or every OKLCH-related syntax. See MDN’s oklch() reference and check the syntax against your own browser policy.
What @supports does not check
The query checks whether the user agent accepts the tested CSS syntax. It does not evaluate whether a color meets your contrast target, looks right in your interface, or suits a particular display. Treat contrast and visual review as separate checks; syntax support is not a design or accessibility test.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →
