OneTaskBy Tim King · Updated
CSS Supports Rule Generator
Feature Queries for Container Queries, :has(), Subgrid and oklch, With Live Support Badges
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the @supports Rule Generator works
The CSS supports rule lets a stylesheet ask the browser whether it understands a feature before
using it. Pick one or two features, choose how to combine them, and copy an @supports block with
example styles plus a matching @supports not fallback. The badges show support in your browser.
Browsers ignore CSS they do not understand. That is usually helpful, because an unknown property is simply skipped, but it falls short when a new feature needs other styles to change with it. A subgrid layout might need different spacing, and an anchored tooltip needs its old absolute position removed. Feature queries group those related changes so they apply together or not at all.
@supports has worked in every major browser since 2015, so the query itself is always safe. The
condition inside it is a property and value pair in brackets, or a selector() test for selectors.
How to use the CSS supports rule generator
- Pick the feature you want to use.
- Optionally pick a second feature and choose whether both are needed,
and, or either one is enough,or. - Check the badges to see how your current browser answers each test.
- Copy the code and replace the example rules with your own.
The tests used for each feature
| Feature | Test | Supported since |
|---|---|---|
| Container queries | (container-type: inline-size) |
2023 in all major browsers |
:has() |
selector(:has(a)) |
Firefox 121, Dec 2023 |
| CSS nesting | selector(&) |
2023 in all major browsers |
| Subgrid | (grid-template-columns: subgrid) |
Chrome 117, Sep 2023 |
color-mix() |
(color: color-mix(in srgb, red, blue)) |
2023 in all major browsers |
oklch() |
(color: oklch(70% 0.1 200)) |
2023 in all major browsers |
| Anchor positioning | (anchor-name: --a) |
Chrome 125, not yet everywhere |
text-wrap: balance |
(text-wrap: balance) |
Safari 17.5, May 2024 |
| Scroll-driven animations | (animation-timeline: scroll()) |
Chrome 115, not yet everywhere |
| View transitions | (view-transition-name: a) |
Firefox 144, Oct 2025 |
| Dynamic viewport units | (height: 100dvh) |
2023 in all major browsers |
backdrop-filter |
(backdrop-filter: blur(4px)) |
Safari 18 unprefixed |
field-sizing |
(field-sizing: content) |
Chrome 123, not yet everywhere |
The tests are short on purpose. A feature query only needs one declaration the browser must parse, and the simplest valid value is the most reliable.
How the live badges work
The badges are not driven by JavaScript. Each one is styled red by default and switched to green by
a real @supports rule using the same test shown in the code. If a badge is green, the query you
copy will match in this browser too.
Tips and pitfalls
Put the modern code inside, not the fallback. Write the baseline layout as normal CSS, then
add the enhancement inside @supports. Browsers that fail the test still get a working page, and
you only need @supports not for rules that must be undone.
and and or cannot be mixed without brackets. (a) and (b) or (c) is invalid. Write
((a) and (b)) or (c). The not keyword also needs brackets around a combined condition, which
is why the fallback here wraps the whole test.
Use or for alternatives. or matches when either test passes, so the enhanced block should
only hold rules that work with either feature, such as a -webkit- prefixed and unprefixed pair.
Test the value, not just the property. (display: grid) passes in old browsers, but
(grid-template-columns: subgrid) only passes where subgrid works. Always test the specific value
you rely on.
Passing the test is not a promise of no bugs. A browser may parse a property and still have an incomplete version. Check real rendering on the browsers that matter to you.
Selector tests need selector(). A bracketed selector such as (:has(a)) is not valid. Use
selector(:has(a)), which is supported everywhere since 2020 and 2022.
Reading the result
The code holds two blocks. The first applies when the condition passes and contains a short example rule for each feature. The second applies when it fails and contains a plain fallback. The badges list each test on its own and, for two features, the combined condition.
FAQ
What does @supports do in CSS?
It applies the rules inside it only when the browser understands the condition, such as a property and value pair or a selector. It lets you ship a modern feature and a fallback in one stylesheet without JavaScript feature detection.
How do I check selector support with @supports?
Wrap the selector in selector(), for example @supports selector(:has(a)). The browser checks
whether it can parse the selector. The function itself works in all current major browsers.
Can I combine conditions in a feature query?
Yes. Use and when every feature is needed and or when any one is enough. Put brackets around
each part when you mix them, and around the whole condition when you put not in front of it.
Do I still need @supports for widely supported features?
Not always. Features such as oklch() or dvh work in nearly every current browser, so a simple
fallback line before the modern one is often enough. Feature queries matter most for newer
features or when several rules must change together.
See also: all Layout & Spacing tools, Shadows & Motion, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
:has() Selector Builder
Pick a :has() pattern, see it work live and copy the HTML and CSS.
Cascade Layers Generator
Set your @layer order and get the blocks or imports to paste.
CSS Nesting Converter
Nest flat CSS with & or flatten nested CSS back into plain rules.
Modern CSS Units Converter
Convert ch, cap, lh, dvh, cqi and other modern CSS units to px.
Container Query Generator
Build @container queries and cqi units with a resizable live demo.