Feature Queries

@supports blocks are evaluated in ReactUnity. A block applies only when its condition holds, which lets one stylesheet carry a modern declaration and a fallback for the properties and values ReactUnity does not have. The syntax is the CSS one, described at MDN Docs.

view {
  background-color: rgba(251, 44, 54, 0.5);
}

@supports (background-color: color-mix(in oklab, red, transparent)) {
  view {
    background-color: color-mix(in oklab, #fb2c36 50%, transparent);
  }
}

What the condition is tested against

A declaration such as (background-color: red) is supported when ReactUnity has that property and can parse that value. This is ReactUnity’s own CSS dialect, not the browser’s, so the answer differs from a browser’s in both directions:

• (float: left) is false. float is a web property that ReactUnity does not implement.
• (motion-duration: 1s) is true. motion-duration is a ReactUnity property that no browser has.

So a feature query is the reliable way to ask what the engine in front of you actually supports, rather than assuming from a version number.

Supported condition syntax

Form	Example
Declaration	@supports (color: red)
Negation	@supports not (float: left)
Conjunction	@supports (color: red) and (display: flex)
Disjunction	@supports (float: left) or (color: red)
Grouping	@supports ((color: red) and (opacity: 0.5))
!important in a value	@supports (color: red !important)
Selector	@supports selector(:has(> .a))

Mixing and and or at the same level is invalid CSS; parenthesize instead.

Selector queries

selector() holds when its argument is one complex selector that ReactUnity can match: every pseudo-class is one it knows, or a state the current framework has a handler for, and every pseudo-element is one some element has. :state(name), :enter and :leave always count, since a custom state is whatever the app starts. A selector list, a relative selector such as > .a, a pseudo-class of the web that has no meaning here (:popover-open) or a pseudo-element nothing exposes (::marker) is unsupported.

@supports selector(:has(.badge)) {
  .card:has(.badge) { border-color: gold; }
}

@supports not selector(::-webkit-scrollbar) {
  scroll { scrollbar-width: thin; }
}

@supports and @media nest inside each other in either order, and the rules inside apply only when both conditions hold.

@media (framework: ugui) {
  @supports (background-color: color-mix(in oklch, red, blue)) {
    view {
      background-color: color-mix(in oklch, red, blue);
    }
  }
}

Limitations

font-tech() and font-format() always evaluate to false, because ReactUnity does not implement them.

@supports also nests inside a style rule, where the declarations it holds belong to the enclosing selector — see Nesting.