# React Native CanIUse

CSS feature compatibility across styled-components v6, styled-components v7, stock React Native iOS, and stock React Native Android.

Source: https://styled-components.com/docs/compatibility

## Summary

| Feature | Category | sc-v6 | sc-v7 | iOS stock | Android stock | Upstream PRs |
| --- | --- | --- | --- | --- | --- | --- |
| [::before / ::after](https://styled-components.com/docs/compatibility#pseudo-before-after) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [::marker](https://styled-components.com/docs/compatibility#marker) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [::placeholder](https://styled-components.com/docs/compatibility#placeholder) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [::selection](https://styled-components.com/docs/compatibility#selection) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [:checked / :enabled / :indeterminate / :default](https://styled-components.com/docs/compatibility#checked-enabled-indeterminate) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [:empty](https://styled-components.com/docs/compatibility#empty) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [:first-child / :last-child / :only-child](https://styled-components.com/docs/compatibility#first-last-only-child) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [:first-of-type / :last-of-type / :only-of-type](https://styled-components.com/docs/compatibility#first-last-only-of-type) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [:focus-visible](https://styled-components.com/docs/compatibility#focus-visible) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [:focus-within](https://styled-components.com/docs/compatibility#focus-within) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [:has() relational selector](https://styled-components.com/docs/compatibility#has) | Selectors | Not supported | Partial | Not supported | Not supported |  |
| [:is() / :where()](https://styled-components.com/docs/compatibility#is-where) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [:lang()](https://styled-components.com/docs/compatibility#lang) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [:link / :visited / :any-link](https://styled-components.com/docs/compatibility#link-visited-any-link) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [:not()](https://styled-components.com/docs/compatibility#not) | Selectors | Not supported | Partial | Not supported | Not supported |  |
| [:nth-child / :nth-of-type](https://styled-components.com/docs/compatibility#nth-child-of-type) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [:root](https://styled-components.com/docs/compatibility#root) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [:target](https://styled-components.com/docs/compatibility#target) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [@container size queries](https://styled-components.com/docs/compatibility#container-queries) | At-rules | Not supported | Supported | Not supported | Not supported |  |
| [@keyframes](https://styled-components.com/docs/compatibility#keyframes) | Animation | Not supported | Supported | Not supported | Not supported |  |
| [@layer cascade layers](https://styled-components.com/docs/compatibility#cascade-layers) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@media (aspect-ratio: …)](https://styled-components.com/docs/compatibility#media-aspect-ratio) | At-rules | Not supported | Supported | Not supported | Not supported |  |
| [@media (color-gamut)](https://styled-components.com/docs/compatibility#media-color-gamut) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@media (dynamic-range)](https://styled-components.com/docs/compatibility#media-dynamic-range) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@media (forced-colors)](https://styled-components.com/docs/compatibility#media-forced-colors) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@media (hover) / (pointer) / (any-hover) / (any-pointer)](https://styled-components.com/docs/compatibility#media-interaction) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@media (min-width / max-width)](https://styled-components.com/docs/compatibility#media-width) | At-rules | Not supported | Supported | Not supported | Not supported |  |
| [@media (orientation)](https://styled-components.com/docs/compatibility#media-orientation) | At-rules | Not supported | Supported | Not supported | Not supported |  |
| [@media (prefers-color-scheme)](https://styled-components.com/docs/compatibility#media-prefers-color-scheme) | At-rules | Not supported | Supported | Not supported | Not supported |  |
| [@media (prefers-contrast)](https://styled-components.com/docs/compatibility#media-prefers-contrast) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@media (prefers-reduced-motion)](https://styled-components.com/docs/compatibility#media-prefers-reduced-motion) | At-rules | Not supported | Supported | Not supported | Not supported |  |
| [@property (registered custom props)](https://styled-components.com/docs/compatibility#property) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@property + animatable custom props](https://styled-components.com/docs/compatibility#animation-property) | Animation | Not supported | Not supported | Not supported | Not supported |  |
| [@scope](https://styled-components.com/docs/compatibility#scope) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [@starting-style](https://styled-components.com/docs/compatibility#starting-style) | At-rules | Not supported | Supported | Not supported | Not supported |  |
| [&:disabled](https://styled-components.com/docs/compatibility#pseudo-disabled) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [&:focus](https://styled-components.com/docs/compatibility#pseudo-focus) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [&:hover](https://styled-components.com/docs/compatibility#pseudo-hover) | Selectors | Not supported | Partial | Not supported | Not supported |  |
| [&:pressed](https://styled-components.com/docs/compatibility#pseudo-pressed) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [#rrggbbaa / 8-digit hex](https://styled-components.com/docs/compatibility#rrggbbaa) | Colors | Supported | Supported | Supported | Supported |  |
| [3D transforms (rotateX, perspective, translateZ)](https://styled-components.com/docs/compatibility#transforms-3d) | Properties | Partial | Partial | Partial | Partial |  |
| [Absolute units (pt, pc, in, cm, mm, Q)](https://styled-components.com/docs/compatibility#absolute-units) | Units | Not supported | Not supported | Not supported | Not supported |  |
| [accent-color](https://styled-components.com/docs/compatibility#accent-color) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [align-content](https://styled-components.com/docs/compatibility#align-content) | Layout | Supported | Supported | Supported | Supported |  |
| [align-items](https://styled-components.com/docs/compatibility#align-items) | Layout | Supported | Supported | Supported | Supported |  |
| [align-self](https://styled-components.com/docs/compatibility#align-self) | Layout | Supported | Supported | Supported | Supported |  |
| [anchor-name / position-anchor / anchor()](https://styled-components.com/docs/compatibility#anchor-positioning) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [appearance](https://styled-components.com/docs/compatibility#appearance) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [aspect-ratio](https://styled-components.com/docs/compatibility#aspect-ratio) | Properties | Partial | Supported | Partial | Partial |  |
| [attr() function](https://styled-components.com/docs/compatibility#attr-function) | Functions | Not supported | Not supported | Not supported | Not supported |  |
| [Attribute selectors ([aria-pressed\], [data-state="open"\])](https://styled-components.com/docs/compatibility#attr-selectors) | Selectors | Not supported | Supported | Not supported | Not supported |  |
| [backdrop-filter](https://styled-components.com/docs/compatibility#backdrop-filter) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [backface-visibility](https://styled-components.com/docs/compatibility#backface-visibility) | Properties | Supported | Supported | Supported | Supported |  |
| [background (shorthand)](https://styled-components.com/docs/compatibility#background-shorthand) | Properties | Partial | Partial | Partial | Partial |  |
| [background-attachment](https://styled-components.com/docs/compatibility#background-attachment) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [background-blend-mode](https://styled-components.com/docs/compatibility#background-blend-mode) | Properties | Not supported | Partial | Not supported | Not supported |  |
| [background-clip](https://styled-components.com/docs/compatibility#background-clip) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [background-color](https://styled-components.com/docs/compatibility#background-color) | Properties | Supported | Supported | Supported | Supported |  |
| [background-image: url()](https://styled-components.com/docs/compatibility#background-image-url) | Properties | Not supported | Not supported | Not supported | Not supported | [ios](https://github.com/facebook/react-native/pull/54996), [android](https://github.com/facebook/react-native/pull/54994) |
| [background-origin](https://styled-components.com/docs/compatibility#background-origin) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [background-position](https://styled-components.com/docs/compatibility#background-position) | Properties | Not supported | Partial | Partial | Partial |  |
| [background-repeat](https://styled-components.com/docs/compatibility#background-repeat) | Properties | Not supported | Partial | Partial | Partial |  |
| [background-size](https://styled-components.com/docs/compatibility#background-size) | Properties | Not supported | Partial | Partial | Partial |  |
| [border-color](https://styled-components.com/docs/compatibility#border-color) | Properties | Supported | Supported | Supported | Supported |  |
| [border-image](https://styled-components.com/docs/compatibility#border-image) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [border-inline / border-block (logical border longhands + shorthands)](https://styled-components.com/docs/compatibility#border-logical) | Properties | Not supported | Partial | Partial | Partial |  |
| [border-radius](https://styled-components.com/docs/compatibility#border-radius) | Properties | Supported | Supported | Supported | Supported |  |
| [border-style](https://styled-components.com/docs/compatibility#border-style) | Properties | Partial | Partial | Partial | Partial |  |
| [border-width](https://styled-components.com/docs/compatibility#border-width) | Properties | Supported | Supported | Supported | Supported |  |
| [box-shadow (incl. inset, spread)](https://styled-components.com/docs/compatibility#box-shadow) | Properties | Partial | Supported | Supported | Supported |  |
| [box-sizing](https://styled-components.com/docs/compatibility#box-sizing) | Properties | Not supported | Supported | Supported | Supported |  |
| [calc() / clamp() / min() / max()](https://styled-components.com/docs/compatibility#math-functions) | Functions | Partial | Supported | Not supported | Not supported | [ios](https://github.com/facebook/react-native/pull/56162), [android](https://github.com/facebook/react-native/pull/56162) |
| [caret-color](https://styled-components.com/docs/compatibility#caret-color) | Properties | Not supported | Partial | Not supported | Partial |  |
| [Classic viewport units (vh, vw, vmin, vmax)](https://styled-components.com/docs/compatibility#viewport-units-classic) | Units | Not supported | Supported | Not supported | Not supported |  |
| [clip-path](https://styled-components.com/docs/compatibility#clip-path) | Properties | Not supported | Not supported | Not supported | Not supported | [ios](https://github.com/facebook/react-native/pull/54700), [android](https://github.com/facebook/react-native/pull/54701) |
| [color-mix()](https://styled-components.com/docs/compatibility#color-mix) | Colors | Not supported | Supported | Not supported | Not supported |  |
| [color-scheme](https://styled-components.com/docs/compatibility#color-scheme) | Properties | Not supported | Partial | Not supported | Not supported |  |
| [color() function (display-p3, rec2020, …)](https://styled-components.com/docs/compatibility#color-function) | Colors | Not supported | Supported | Not supported | Not supported | [ios](https://github.com/facebook/react-native/pull/42831), [android](https://github.com/facebook/react-native/pull/42831) |
| [columns / column-count / column-width / column-rule / column-span / column-fill](https://styled-components.com/docs/compatibility#columns) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [Combinators (descendant, >, +, ~)](https://styled-components.com/docs/compatibility#combinators) | Selectors | Not supported | Partial | Not supported | Not supported |  |
| [contain](https://styled-components.com/docs/compatibility#contain) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [Container-query units (cqw / cqh / cqmin / cqmax)](https://styled-components.com/docs/compatibility#cq-units) | Units | Not supported | Supported | Not supported | Not supported |  |
| [content / counter-reset / counter-increment / counter-set](https://styled-components.com/docs/compatibility#content-counters) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [content-visibility](https://styled-components.com/docs/compatibility#content-visibility) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [CSS Custom Properties (var(--…))](https://styled-components.com/docs/compatibility#custom-props) | Other | Not supported | Partial | Not supported | Not supported |  |
| [CSS Grid](https://styled-components.com/docs/compatibility#grid) | Layout | Not supported | Not supported | Not supported | Not supported | [ios](https://github.com/facebook/react-native/pull/55665), [android](https://github.com/facebook/react-native/pull/55665) |
| [CSS Nesting](https://styled-components.com/docs/compatibility#nesting) | At-rules | Partial | Supported | Not supported | Not supported |  |
| [CSS Subgrid](https://styled-components.com/docs/compatibility#subgrid) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [CSS tables (table-layout, border-collapse, border-spacing, caption-side, empty-cells)](https://styled-components.com/docs/compatibility#css-tables) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [cursor](https://styled-components.com/docs/compatibility#cursor) | Properties | Not supported | Supported | Partial | Not supported |  |
| [direction](https://styled-components.com/docs/compatibility#direction) | Properties | Supported | Supported | Supported | Supported |  |
| [display](https://styled-components.com/docs/compatibility#display) | Properties | Partial | Partial | Partial | Partial |  |
| [Dynamic viewport units (dvh / svh / lvh / dvw)](https://styled-components.com/docs/compatibility#viewport-units-dvh) | Units | Not supported | Supported | Not supported | Not supported |  |
| [env() safe-area-inset](https://styled-components.com/docs/compatibility#env) | Functions | Not supported | Partial | Not supported | Not supported |  |
| [field-sizing](https://styled-components.com/docs/compatibility#field-sizing) | Properties | Not supported | Partial | Not supported | Not supported |  |
| [filter: blur() / saturate() / drop-shadow() / …](https://styled-components.com/docs/compatibility#filter) | Properties | Not supported | Partial | Partial | Partial |  |
| [flex / flex-grow / flex-shrink / flex-basis](https://styled-components.com/docs/compatibility#flex-longhands) | Layout | Partial | Supported | Supported | Supported |  |
| [flex-direction](https://styled-components.com/docs/compatibility#flex-direction) | Layout | Supported | Supported | Supported | Supported |  |
| [flex-wrap](https://styled-components.com/docs/compatibility#flex-wrap) | Layout | Supported | Supported | Supported | Supported |  |
| [Flexbox](https://styled-components.com/docs/compatibility#flexbox) | Layout | Supported | Supported | Supported | Supported |  |
| [float / clear](https://styled-components.com/docs/compatibility#float-clear) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [font-family](https://styled-components.com/docs/compatibility#font-family) | Properties | Partial | Partial | Supported | Supported |  |
| [font-feature-settings](https://styled-components.com/docs/compatibility#font-feature-settings) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [font-size](https://styled-components.com/docs/compatibility#font-size) | Properties | Partial | Supported | Supported | Supported |  |
| [font-style](https://styled-components.com/docs/compatibility#font-style) | Properties | Partial | Supported | Supported | Supported |  |
| [font-variant](https://styled-components.com/docs/compatibility#font-variant) | Properties | Supported | Supported | Supported | Supported |  |
| [font-variation-settings](https://styled-components.com/docs/compatibility#font-variation-settings) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [font-weight](https://styled-components.com/docs/compatibility#font-weight) | Properties | Supported | Supported | Supported | Supported |  |
| [Form-state selectors (:invalid, :required, :read-only)](https://styled-components.com/docs/compatibility#form-state) | Selectors | Not supported | Not supported | Not supported | Not supported |  |
| [fr (grid fractional unit)](https://styled-components.com/docs/compatibility#fr-unit) | Units | Not supported | Not supported | Not supported | Not supported |  |
| [gap / row-gap / column-gap](https://styled-components.com/docs/compatibility#gap) | Layout | Partial | Supported | Supported | Supported |  |
| [hwb()](https://styled-components.com/docs/compatibility#color-hwb) | Colors | Supported | Supported | Supported | Supported |  |
| [hyphens](https://styled-components.com/docs/compatibility#hyphens) | Properties | Not supported | Partial | Not supported | Not supported |  |
| [image-orientation](https://styled-components.com/docs/compatibility#image-orientation) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [image-rendering](https://styled-components.com/docs/compatibility#image-rendering) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [image-set() function](https://styled-components.com/docs/compatibility#image-set) | Functions | Not supported | Not supported | Not supported | Not supported |  |
| [inset](https://styled-components.com/docs/compatibility#inset) | Layout | Partial | Supported | Partial | Partial |  |
| [interactivity](https://styled-components.com/docs/compatibility#interactivity) | Properties | Not supported | Partial | Not supported | Not supported |  |
| [interpolate-size / calc-size()](https://styled-components.com/docs/compatibility#interpolate-size) | Animation | Not supported | Not supported | Not supported | Not supported |  |
| [isolation](https://styled-components.com/docs/compatibility#isolation) | Properties | Not supported | Partial | Partial | Not supported |  |
| [justify-content](https://styled-components.com/docs/compatibility#justify-content) | Layout | Supported | Supported | Supported | Supported |  |
| [justify-items / justify-self](https://styled-components.com/docs/compatibility#justify-items) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [letter-spacing](https://styled-components.com/docs/compatibility#letter-spacing) | Properties | Partial | Partial | Supported | Supported |  |
| [light-dark() / CSS system colors](https://styled-components.com/docs/compatibility#light-dark) | Colors | Not supported | Supported | Not supported | Not supported |  |
| [line-clamp](https://styled-components.com/docs/compatibility#line-clamp) | Properties | Not supported | Supported | Not supported | Not supported |  |
| [line-height](https://styled-components.com/docs/compatibility#line-height) | Properties | Partial | Partial | Supported | Supported |  |
| [linear-gradient() / radial-gradient() / conic-gradient()](https://styled-components.com/docs/compatibility#gradients) | Colors | Not supported | Partial | Partial | Partial |  |
| [list-style / -type / -position / -image](https://styled-components.com/docs/compatibility#list-style) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [Logical properties (margin-inline, padding-block, …)](https://styled-components.com/docs/compatibility#logical-props) | Properties | Partial | Supported | Partial | Partial |  |
| [mask / mask-image / mask-mode / mask-position](https://styled-components.com/docs/compatibility#mask) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [min/max-width and min/max-height](https://styled-components.com/docs/compatibility#min-max-width-height) | Layout | Supported | Supported | Supported | Supported |  |
| [mix-blend-mode](https://styled-components.com/docs/compatibility#mix-blend-mode) | Properties | Not supported | Partial | Supported | Partial |  |
| [Named colors / transparent / currentcolor](https://styled-components.com/docs/compatibility#named-colors) | Colors | Partial | Partial | Partial | Partial |  |
| [object-fit / object-position](https://styled-components.com/docs/compatibility#object-fit) | Properties | Not supported | Partial | Supported | Supported |  |
| [oklch() / oklab() / lch() / lab()](https://styled-components.com/docs/compatibility#oklch-oklab) | Colors | Not supported | Supported | Not supported | Not supported |  |
| [opacity](https://styled-components.com/docs/compatibility#opacity) | Properties | Supported | Supported | Supported | Supported |  |
| [outline](https://styled-components.com/docs/compatibility#outline) | Properties | Not supported | Supported | Partial | Partial |  |
| [outline-color](https://styled-components.com/docs/compatibility#outline-color) | Properties | Not supported | Supported | Supported | Supported |  |
| [outline-offset](https://styled-components.com/docs/compatibility#outline-offset) | Properties | Not supported | Supported | Supported | Supported |  |
| [outline-style](https://styled-components.com/docs/compatibility#outline-style) | Properties | Not supported | Partial | Partial | Partial |  |
| [outline-width](https://styled-components.com/docs/compatibility#outline-width) | Properties | Not supported | Supported | Supported | Supported |  |
| [overflow](https://styled-components.com/docs/compatibility#overflow) | Layout | Partial | Partial | Partial | Partial |  |
| [overflow-anchor](https://styled-components.com/docs/compatibility#overflow-anchor) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [overflow-clip-margin](https://styled-components.com/docs/compatibility#overflow-clip-margin) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [overscroll-behavior](https://styled-components.com/docs/compatibility#overscroll-behavior) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [paint-order](https://styled-components.com/docs/compatibility#paint-order) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [perspective](https://styled-components.com/docs/compatibility#perspective) | Properties | Not supported | Partial | Partial | Partial |  |
| [perspective-origin](https://styled-components.com/docs/compatibility#perspective-origin) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [place-content / place-items / place-self](https://styled-components.com/docs/compatibility#place-content) | Layout | Partial | Partial | Not supported | Not supported |  |
| [pointer-events](https://styled-components.com/docs/compatibility#pointer-events) | Properties | Supported | Supported | Supported | Supported |  |
| [position: fixed](https://styled-components.com/docs/compatibility#position-fixed) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [position: sticky](https://styled-components.com/docs/compatibility#position-sticky) | Layout | Not supported | Not supported | Not supported | Not supported |  |
| [print-color-adjust](https://styled-components.com/docs/compatibility#print-color-adjust) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [quotes](https://styled-components.com/docs/compatibility#quotes) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [rem / em](https://styled-components.com/docs/compatibility#rem-em) | Units | Not supported | Supported | Not supported | Not supported |  |
| [resize](https://styled-components.com/docs/compatibility#resize) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [rgb() / rgba() / hsl() / hsla()](https://styled-components.com/docs/compatibility#color-rgb-hsl) | Colors | Supported | Supported | Supported | Supported |  |
| [scroll-behavior](https://styled-components.com/docs/compatibility#scroll-behavior) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [scroll-snap-type / scroll-snap-align](https://styled-components.com/docs/compatibility#scroll-snap) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [scroll-timeline / view-timeline / animation-timeline](https://styled-components.com/docs/compatibility#scroll-driven-animations) | Animation | Not supported | Not supported | Not supported | Not supported |  |
| [scrollbar-color](https://styled-components.com/docs/compatibility#scrollbar-color) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [scrollbar-width](https://styled-components.com/docs/compatibility#scrollbar-width) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [tab-size](https://styled-components.com/docs/compatibility#tabsize) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [text-align](https://styled-components.com/docs/compatibility#text-align) | Properties | Supported | Supported | Supported | Supported |  |
| [text-autospace](https://styled-components.com/docs/compatibility#text-autospace) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [text-box / text-box-trim / text-box-edge](https://styled-components.com/docs/compatibility#text-box-trim) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [text-decoration-color](https://styled-components.com/docs/compatibility#text-decoration-color) | Properties | Partial | Partial | Supported | Not supported | [android](https://github.com/facebook/react-native/pull/56767) |
| [text-decoration-style](https://styled-components.com/docs/compatibility#text-decoration-style) | Properties | Partial | Partial | Partial | Not supported | [android](https://github.com/facebook/react-native/pull/56768) |
| [text-indent](https://styled-components.com/docs/compatibility#text-indent) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [text-overflow](https://styled-components.com/docs/compatibility#text-overflow) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [text-shadow](https://styled-components.com/docs/compatibility#text-shadow) | Properties | Not supported | Supported | Not supported | Not supported | [ios](https://github.com/facebook/react-native/pull/55289), [android](https://github.com/facebook/react-native/pull/55289) |
| [text-spacing-trim](https://styled-components.com/docs/compatibility#text-spacing-trim) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [text-transform](https://styled-components.com/docs/compatibility#text-transform) | Properties | Supported | Supported | Supported | Supported |  |
| [text-wrap](https://styled-components.com/docs/compatibility#text-wrap) | Properties | Not supported | Partial | Not supported | Not supported |  |
| [top / right / bottom / left](https://styled-components.com/docs/compatibility#top-right-bottom-left) | Layout | Supported | Supported | Supported | Supported |  |
| [touch-action](https://styled-components.com/docs/compatibility#touch-action) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [transform-box](https://styled-components.com/docs/compatibility#transform-box) | Properties | Not supported | Partial | Not supported | Not supported |  |
| [transform-origin](https://styled-components.com/docs/compatibility#transform-origin) | Properties | Partial | Supported | Supported | Supported |  |
| [transform-style](https://styled-components.com/docs/compatibility#transform-style) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [transform: matrix() / matrix3d()](https://styled-components.com/docs/compatibility#matrix-transform) | Properties | Partial | Supported | Partial | Partial |  |
| [transform: skewX() / skewY()](https://styled-components.com/docs/compatibility#transform-skew) | Properties | Partial | Partial | Supported | Not supported | [android](https://github.com/facebook/react-native/pull/56724) |
| [transition](https://styled-components.com/docs/compatibility#transitions) | Animation | Not supported | Supported | Not supported | Not supported |  |
| [Typographic units (ch, ex, cap, ic, lh, rlh)](https://styled-components.com/docs/compatibility#typographic-units) | Units | Not supported | Partial | Not supported | Not supported |  |
| [url() function (image references)](https://styled-components.com/docs/compatibility#url-function) | Functions | Not supported | Not supported | Not supported | Not supported | [ios](https://github.com/facebook/react-native/pull/54996), [android](https://github.com/facebook/react-native/pull/54994) |
| [user-select](https://styled-components.com/docs/compatibility#user-select) | Properties | Partial | Partial | Partial | Partial |  |
| [vertical-align](https://styled-components.com/docs/compatibility#vertical-align) | Properties | Partial | Partial | Not supported | Supported | [ios](https://github.com/facebook/react-native/pull/56774) |
| [View Transitions](https://styled-components.com/docs/compatibility#view-transitions) | At-rules | Not supported | Not supported | Not supported | Not supported |  |
| [visibility](https://styled-components.com/docs/compatibility#visibility) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [white-space](https://styled-components.com/docs/compatibility#white-space) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [width / height](https://styled-components.com/docs/compatibility#width-height) | Layout | Supported | Supported | Supported | Supported |  |
| [will-change](https://styled-components.com/docs/compatibility#will-change) | Other | Not supported | Not supported | Not supported | Not supported |  |
| [word-break / overflow-wrap](https://styled-components.com/docs/compatibility#word-break-overflow-wrap) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [word-spacing](https://styled-components.com/docs/compatibility#word-spacing) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [writing-mode](https://styled-components.com/docs/compatibility#writing-mode) | Properties | Not supported | Not supported | Not supported | Not supported |  |
| [z-index](https://styled-components.com/docs/compatibility#z-index) | Layout | Supported | Supported | Supported | Supported |  |

## Details

### ::before / ::after

- ID: `pseudo-before-after`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-gencontent`
- Can I Use title: CSS Generated content for pseudo-elements
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 12

Pass-through on web. Pseudo-elements have no equivalent on React Native.

### ::marker

- ID: `marker`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-marker-pseudo`
- Can I Use title: CSS ::marker pseudo-element
- Browser minimums: chrome 86, firefox 68, edge 86

Pass-through on web. React Native has no list primitive that exposes a marker pseudo-element; render bullets / numbers as explicit children of the list item.

### ::placeholder

- ID: `placeholder`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-placeholder`
- Can I Use title: ::placeholder CSS pseudo-element
- Browser minimums: chrome 57, safari 10.1, firefox 19, edge 79

Pass-through on web. React Native uses the `placeholderTextColor` prop instead.

### ::selection

- ID: `selection`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-selection`
- Can I Use title: ::selection CSS pseudo-element
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 12

Pass-through on web. React Native exposes the analog as the `selectionColor` prop on `TextInput` (cross-platform; tints handle, cursor, and selection range) and on `Text` (Android-only). No `::selection` pseudo-element on either version.

### :checked / :enabled / :indeterminate / :default

- ID: `checked-enabled-indeterminate`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native's form primitives (`Switch`, `Checkbox` in the new core, `TextInput`) do not expose UI-state pseudo-classes on either version; drive state styling from React props instead.

### :empty

- ID: `empty`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web in both versions. React Native has no child-emptiness pseudo on either version.

### :first-child / :last-child / :only-child

- ID: `first-last-only-child`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Same RSC child-index shift as :nth-child(): inline `<style data-styled>` tags break first/last/only counts under v6 unless `stylisPluginRSC` is wired up. v7 rewrites them automatically. On React Native, v7 evaluates them against the live `ParentContext` sibling index.

Caveats:

- Prefer `:first-of-type` / `:last-of-type` / `:only-of-type` if `stylisPluginRSC` is not available.

### :first-of-type / :last-of-type / :only-of-type

- ID: `first-last-only-of-type`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Type-scoped structural pseudos are unaffected by injected `<style data-styled>` tags, since style elements are a different element type. Universally compatible alternative to the child-index family under RSC on both versions. On native, v7 evaluates them against the per-type sibling index published by `ParentContext`.

### :focus-visible

- ID: `focus-visible`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-focus-visible`
- Can I Use title: :focus-visible CSS pseudo-class
- Browser minimums: chrome 86, safari 15.4, firefox 4, edge 86

Pass-through on web. v7 aliases `&:focus-visible` to `&:focus` on React Native so portable code works without branching (no keyboard-focus distinction is available on native).

### :focus-within

- ID: `focus-within`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-focus-within`
- Can I Use title: :focus-within CSS pseudo-class
- Browser minimums: chrome 60, safari 10.1, firefox 52, edge 79

Pass-through on web.

### :has() relational selector

- ID: `has`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-has`
- Can I Use title: :has() CSS relational pseudo-class
- Browser minimums: chrome 105, safari 15.4, firefox 121, edge 105

On web, v6 had selector-list recursion bugs when commas appeared inside `:has(...)`; v7's parser handles arbitrary nesting and comma-split arms correctly. On React Native, v7 implements the `<simple>` argument grammar: `&:has(${StyledComponent})` (descendant match by component reference) and `&:has([attr])` / `&:has([attr=value i])` (any attribute operator, including the case-insensitive flag).

Caveats:

- Complex inner arguments — compound selectors, pseudo-classes (`:has(:hover)`), combinators (`:has(.a .b)`), and selector lists (`:has(.a, .b)`) — are not implemented on native and warn in dev. The browser-side spec form is `<relative-selector-list>`, much broader.
- Match scope is the element's own descendant subtree per spec (no preceding-sibling matching without combinators).

### :is() / :where()

- ID: `is-where`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-matches-pseudo`
- Can I Use title: :is() CSS pseudo-class
- Browser minimums: chrome 88, safari 14, firefox 78, edge 88

v6 leaked nested-rule tokens into the wrong arm when selectors contained commas inside :is(...) / :where(...). v7 compiles each arm independently.

Caveats:

- On native v7, :is() and :where() apply the rule to each listed state (e.g. `&:is(:hover, :focus)`).

### :lang()

- ID: `lang`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native has no `lang` attribute inheritance model; switch styles off an explicit locale prop or context instead.

### :link / :visited / :any-link

- ID: `link-visited-any-link`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-any-link`
- Can I Use title: CSS :any-link selector
- Browser minimums: chrome 15, safari 6.1, firefox 3, edge 79

Pass-through on web. React Native has no anchor or browser history surface to match against; render link affordances from explicit component state instead.

Caveats:

- `:visited` is restricted to a small subset of properties (color family) in modern browsers for privacy.

### :not()

- ID: `not`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-not-sel-list`
- Can I Use title: selector list argument of :not()
- Browser minimums: chrome 88, safari 9, firefox 84, edge 88

Single-argument :not() works on both versions on web. The Selectors L4 selector-list form `:not(.a, .b, [c])` tripped v6 stylis when a comma appeared between simple selectors inside the parens (same family of bugs as :is() / :has()); v7 compiles each arm independently. On React Native, v7 implements `:not(<simple>)` for single pseudo-states (`&:not(:hover)`, `&:not(:focus)`, `&:not(:pressed)`, `&:not(:disabled)`) and single attribute selectors with any operator (`&:not([disabled])`, `&:not([href^="https"])`).

Caveats:

- Compound, nested, and selector-list inner arguments are not implemented on native (`:not([a][b])`, `:not(:hover, :focus)`, `:not(.foo .bar)` all warn).

### :nth-child / :nth-of-type

- ID: `nth-child-of-type`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Covers `:nth-child`, `:nth-of-type`, `:nth-last-child`, `:nth-last-of-type`. v6 stylis miscounted child positions under RSC because injected `<style data-styled>` tags shift the index; v6.4 ships an opt-in `stylisPluginRSC` that rewrites these selectors using the L4 `of S` syntax to exclude SC style tags. v7 emits the same rewrite by default in RSC. On React Native, v7 matches the full `<an+b>` grammar plus `odd` / `even` against the live sibling position published by `ParentContext`. The `<an+b of <selector>>` form (Selectors L4) is not implemented on native.

Caveats:

- On v6 RSC: import `stylisPluginRSC` and pass it to `StyleSheetManager.stylisPlugins`, or fall back to `:nth-of-type()` (universally compatible).
- `:nth-child(N of S)` itself needs Chrome 111+, Firefox 113+, Safari 9+.
- On native, siblings outside a styled parent that publishes ParentContext do not contribute to the count.

### :root

- ID: `root`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web; commonly used in `createGlobalStyle` to declare custom-property defaults on the document element. React Native has no document root; emit `--*` defaults via `createTheme()` instead.

Caveats:

- `createTheme({ selector: ":root" })` uses this hook by default; override with `":host"` for Shadow DOM.

### :target

- ID: `target`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native has no URL fragment to match against.

### @container size queries

- ID: `container-queries`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-container-queries`
- Can I Use title: CSS Container Queries (Size)
- Browser minimums: chrome 106, safari 16, firefox 110, edge 106

v6 passed @container through to the browser on web only. v7 implements container queries against React Native ancestor containers as well.

Caveats:

- An element with `container-type` cannot match its own `@container` query. Set it on a parent.
- Container-query units (cqw, cqh, cqmin, cqmax) are part of this support story.

### @keyframes

- ID: `keyframes`
- Category: Animation
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-animation`
- Can I Use title: CSS Animation
- Browser minimums: chrome 4, safari 5.1, firefox 5, edge 12

`@keyframes` runs on native in v7 via the default `Animated`-based adapter. All CSS `animation-direction`, `animation-fill-mode`, `animation-play-state`, `animation-iteration-count`, and `animation-composition` (`replace | add | accumulate` per CSS Animations 2 §4.8) values are supported, plus per-frame easing. The optional reanimated adapter (`styled-components/native/reanimated`) is available for consumers that prefer to drive animations through reanimated instead.

### @layer cascade layers

- ID: `cascade-layers`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-cascade-layers`
- Can I Use title: CSS Cascade Layers
- Browser minimums: chrome 99, safari 15.4, firefox 97, edge 99

Cascade layers compose cleanly with styled-components on web in both versions. RN has no cascade, so the at-rule is ignored on native.

### @media (aspect-ratio: …)

- ID: `media-aspect-ratio`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v7 evaluates aspect-ratio media queries against the device window. Bare-number ratios are treated as `<n>/1` per spec.

### @media (color-gamut)

- ID: `media-color-gamut`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. iOS reports display-P3 / sRGB and Android API 26+ reports color-mode; v7 does not currently surface either to `@media (color-gamut)`.

### @media (dynamic-range)

- ID: `media-dynamic-range`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. iOS and Android both expose HDR-capable display flags (`UIScreen.traitCollection.displayGamut`, `Configuration.colorMode`), but v7 does not yet surface `dynamic-range` to the media-query evaluator.

### @media (forced-colors)

- ID: `media-forced-colors`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native has no Windows High Contrast / forced-colors analog; both versions ignore the at-rule on native.

### @media (hover) / (pointer) / (any-hover) / (any-pointer)

- ID: `media-interaction`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-media-interaction`
- Can I Use title: Media Queries: interaction media features
- Browser minimums: chrome 41, safari 9, firefox 64, edge 12

Pass-through on web. React Native has no device-capability signal for hover / pointer precision on either version; queries gated on these media features are silently dropped on native.

Caveats:

- Anchor with `&:hover` on a `Pressable` instead of gating rules behind `@media (hover: hover)` on native.

### @media (min-width / max-width)

- ID: `media-width`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-mediaqueries`
- Can I Use title: CSS3 Media Queries
- Browser minimums: chrome 4, safari 4, firefox 3.5, edge 12

v7 resolves width / height media queries against the React Native window. Media Queries L4 range syntax (`@media (400px <= width < 800px)`) is supported alongside the legacy `min-width` / `max-width` colon form.

Caveats:

- Sentinel theme tokens in feature values (`@media (min-width: ${t.bp.md}px)`) resolve to their `createTheme` fallback at parse time.
- `em` / `rem` lengths inside feature values are treated as 16px.

### @media (orientation)

- ID: `media-orientation`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v7 derives `portrait` / `landscape` from the React Native window dimensions and re-evaluates on rotation. No subscription setup required.

### @media (prefers-color-scheme)

- ID: `media-prefers-color-scheme`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `prefers-color-scheme`
- Can I Use title: prefers-color-scheme media query
- Browser minimums: chrome 76, safari 12.1, firefox 67, edge 79

v7 evaluates `prefers-color-scheme` on React Native by reading `Appearance.getColorScheme()` and subscribing to its change events. Same signal feeds `light-dark()`.

### @media (prefers-contrast)

- ID: `media-prefers-contrast`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native exposes high-contrast / bold-text preferences through `AccessibilityInfo` but v7 does not yet wire them into the media-query evaluator.

### @media (prefers-reduced-motion)

- ID: `media-prefers-reduced-motion`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `prefers-reduced-motion`
- Can I Use title: prefers-reduced-motion media query
- Browser minimums: chrome 74, safari 10.1, firefox 63, edge 79

v7 evaluates `prefers-reduced-motion` on React Native via `AccessibilityInfo.isReduceMotionEnabled()` and the `reduceMotionChanged` event. The same signal also collapses `transition` and `@keyframes` durations to 0 automatically.

### @property (registered custom props)

- ID: `property`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Both versions pass @property through. The catch is animation: a CSS custom property only eases between values (e.g. between two oklch colors) once it is registered with a `<color>` syntax and an initial-value.

Caveats:

- Put @property declarations in `createGlobalStyle` so they live on the document and survive SSR.
- Web-only. React Native does not have CSSOM custom properties to register.

### @property + animatable custom props

- ID: `animation-property`
- Category: Animation
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Register animatable theme tokens with `@property` so `transition: color 300ms` actually eases between values. Custom properties default to type `<string>` which interpolates discretely.

### @scope

- ID: `scope`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-cascade-scope`
- Can I Use title: Scoped Styles: the @scope rule
- Browser minimums: chrome 118, safari 17.4, firefox 146, edge 118

v6 stylis sometimes swallowed @scope or flattened its donut shape. v7's in-house parser keeps @scope intact and lets the browser handle the cascade.

Caveats:

- React Native does not implement @scope on either version.

### @starting-style

- ID: `starting-style`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v6 stylis treated `@starting-style` as an unknown at-rule and could mangle nested declarations. v7 recognises it and runs first-mount enter animations on React Native via the default `Animated`-based adapter. No reanimated opt-in required.

Caveats:

- No caniuse entry yet; check the spec status before relying on it in old browsers.

### &:disabled

- ID: `pseudo-disabled`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v7 implements `&:disabled` on React Native via existing disabled-state surfaces.

### &:focus

- ID: `pseudo-focus`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v7 wires `&:focus` to React Native's existing focus surface.

### &:hover

- ID: `pseudo-hover`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v7 implements `&:hover` on React Native ≥ 0.85 via `Pressable`. Stock RN's Pressable fires hover events ONLY when `ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover` is enabled — the flag defaults to FALSE in 0.85, so without it `Pressable.onHoverIn` / `onHoverOut` return null and no hover styles fire. The pointer infrastructure (iOS `UIHoverGestureRecognizer` for mouse + Apple Pencil on iOS 13+; Android `topPointerEnter` via PointerEventHelper) is fully wired in Fabric. Always anchor with `&`, not bare `:hover` (both versions parse bare `:hover` as a descendant).

### &:pressed

- ID: `pseudo-pressed`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

React-Native-only pseudo on `Pressable`. v7 wires the `Pressable` press state into the CSS.

### #rrggbbaa / 8-digit hex

- ID: `rrggbbaa`
- Category: Colors
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `css-rrggbbaa`
- Can I Use title: #rrggbbaa hex color notation
- Browser minimums: chrome 62, safari 10, firefox 49, edge 79

Pass-through everywhere.

### 3D transforms (rotateX, perspective, translateZ)

- ID: `transforms-3d`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `transforms3d`
- Can I Use title: CSS3 3D Transforms
- Browser minimums: chrome 12, safari 4, firefox 10, edge 12

Stock React Native supports `rotateX`, `rotateY`, `rotateZ`, `translateZ`, and per-view `perspective` inside the transform array on both platforms (iOS via Core Animation `CATransform3D`; Android via matrix decomposition). `scaleZ`, `scale3d`, `rotate3d`, and `matrix3d` keywords are silently dropped. `transform-style: preserve-3d` is unimplemented on either platform, so nested 3D children always flatten — multi-face 3D layouts must be hand-built with absolutely-positioned siblings carrying their own `perspective`.

### Absolute units (pt, pc, in, cm, mm, Q)

- ID: `absolute-units`
- Category: Units
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native dimensions are unitless density-independent pixels; v7 does not convert physical units on native. Convert ahead of time (1pt ≈ 1.33 px, 1in = 96 px, 1cm ≈ 37.8 px).

### accent-color

- ID: `accent-color`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native has no form-control accent: Switch / Checkbox / Slider tints are configured via dedicated props (`thumbColor`, `trackColor`, etc.) per component.

### align-content

- ID: `align-content`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock RN accepts `flex-start` (default), `flex-end`, `center`, `stretch`, `space-between`, `space-around`, and `space-evenly` (the last keyword landed in RN 0.74 with Yoga 3.0).

### align-items

- ID: `align-items`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock RN accepts `stretch` (default), `flex-start`, `flex-end`, `center`, and `baseline`. The newer `start` / `end` keywords from CSS Box Alignment Level 3 are not implemented.

### align-self

- ID: `align-self`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock RN accepts `auto` (default), `flex-start`, `flex-end`, `center`, `stretch`, and `baseline`.

### anchor-name / position-anchor / anchor()

- ID: `anchor-positioning`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-anchor-positioning`
- Can I Use title: CSS Anchor Positioning
- Browser minimums: chrome 125, safari 26, firefox 147, edge 125

Pass-through on web (Chromium-only today). React Native has no positioned-anchor system; popovers and tooltips have to compose `measureInWindow` plus absolute children on iOS and Android.

### appearance

- ID: `appearance`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-appearance`
- Can I Use title: CSS Appearance
- Browser minimums: chrome 83, safari 15.4, firefox 80, edge 83

Pass-through on web. React Native form controls (Switch, Slider, Picker, Button, TextInput) render native platform widgets and do not expose `appearance: none` for opting out.

### aspect-ratio

- ID: `aspect-ratio`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Partial
- stock React Native Android: Partial

Pass-through on web. v7 parses the full CSS Sizing 4 grammar — bare ratio (`1.5` or `16 / 9`), `auto`, and the two-value `auto <ratio>` form — and emits the numeric ratio to RN. Stock RN 0.85 reliably accepts only the unitless number form natively; the CSS-string slash form requires `enableNativeCSSParsing` (defaults FALSE in 0.85) so it usually drops without v7. The two-value form is dropped silently on stock RN. v6 only handled the number form.

Caveats:

- The `auto` half of `auto <ratio>` is only meaningful on replaced elements (`<Image>`) where it falls back to the intrinsic size when missing; on regular views it is a no-op, and v7 dev-warns once (`native-aspect-ratio-auto-intrinsic`).

### attr() function

- ID: `attr-function`
- Category: Functions
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css3-attr`
- Can I Use title: CSS3 attr() function for all properties
- Browser minimums: chrome 133, edge 133

Browser-side `attr()` works in `content` everywhere and is shipping in Chromium for arbitrary properties (CSS Values L5, Chrome 133+); both SC versions pass the string through unchanged. React Native has no DOM attributes to read — pipe values through props / state at the JS layer instead.

### Attribute selectors ([aria-pressed], [data-state="open"])

- ID: `attr-selectors`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v7 implements the full Selectors 4 §6 attribute grammar on React Native: presence (`&[attr]`), exact-match (`&[attr=value]`), word (`~=`), prefix (`|=`), starts-with (`^=`), ends-with (`$=`), substring (`*=`), and the `i` / `s` case-sensitivity flags. Compound brackets chain with AND semantics (`&[a][b]`), and a trailing pseudo-state attaches (`&[a]:active`). Boolean coercion means `aria-pressed={true}` and `aria-pressed="true"` both match.

### backdrop-filter

- ID: `backdrop-filter`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-backdrop-filter`
- Can I Use title: CSS Backdrop Filter
- Browser minimums: chrome 76, safari 9, firefox 103, edge 17

Pass-through on web in both versions. React Native does not implement backdrop-filter on either platform. Listed in v7's native limitations.

### backface-visibility

- ID: `backface-visibility`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

iOS implements `backface-visibility: hidden` natively via `CALayer.doubleSided`. Android emulates it by reading `rotationX` / `rotationY` after every transform update and switching `alpha` to 0 when the view crosses the 90° threshold on either axis. Both platforms re-evaluate on every transform change.

Caveats:

- Android's hidden state is a discrete alpha flip at the 90° rotation threshold, not a GPU-level backface cull. Continuous flip animations on Android pop rather than smoothly fade — pre-render both faces or use opacity / scale to mask the transition.

### background (shorthand)

- ID: `background-shorthand`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial

v7 parses the full CSS Backgrounds 3 §2.10 grammar: comma-separated layers with `<image>`, `<position>` / `<size>` (slash-separated), `<repeat>`, `<attachment>`, `<box>` (origin, then clip), and a single `<color>` allowed only on the final layer. The sub-properties feed the dedicated `background-image`, `-position`, `-size`, `-repeat`, and `-color` rows (each tracked individually since stock RN gates them behind the `experimental_*` ABI keys). On native, `background-attachment: fixed`, non-`padding-box` `background-origin`, and non-`border-box` `background-clip` warn once and drop. v6 forwarded a raw shorthand string that stock RN rejects.

Caveats:

- `background-clip: text` requires a community library on native; v7 surfaces the value only on rn-web.

### background-attachment

- ID: `background-attachment`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `background-attachment`
- Can I Use title: CSS background-attachment
- Browser minimums: chrome 4, safari 5, firefox 25, edge 12

Web pass-through in both versions. `fixed` and `local` rely on a scrolling viewport that React Native does not expose, so the property is web-only with no upstream work in flight.

### background-blend-mode

- ID: `background-blend-mode`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-backgroundblendmode`
- Can I Use title: CSS background-blend-mode
- Browser minimums: chrome 35, safari 10.1, firefox 30, edge 79

v7 polyfills background-blend-mode on native by rewriting `background-image` + `background-blend-mode` into absolutely-positioned layer Views. Stock RN has no `backgroundBlendMode` style at all. Linear-friendly modes round-trip exactly; gamma-sensitive modes differ slightly on Display P3.

### background-clip

- ID: `background-clip`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `background-clip-text`
- Can I Use title: Background-clip: text
- Browser minimums: chrome 4, safari 15.5, firefox 49, edge 12

Web pass-through in both versions. Stock React Native has no `background-clip` style key and there is no upstream PR; `border-box` / `padding-box` / `content-box` / `text` are all web-only.

### background-color

- ID: `background-color`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Pass-through everywhere.

### background-image: url()

- ID: `background-image-url`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `background-img-opts`
- Can I Use title: CSS3 Background-image options
- Browser minimums: chrome 15, safari 7, firefox 4, edge 12
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/54996), [android](https://github.com/facebook/react-native/pull/54994)

Raster `background-image: url(...)` is web-only today. The `gradients` entry covers `linear-gradient()` / `radial-gradient()` separately; raster images are blocked on a three-PR upstream series (JS #54995, iOS #54996, Android #54994) that adds `url()` parsing and image-fetching to React Native's background-image surface. Until that lands, render raster images through `Image` or `ImageBackground` on native.

### background-origin

- ID: `background-origin`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `background-img-opts`
- Can I Use title: CSS3 Background-image options
- Browser minimums: chrome 15, safari 7, firefox 4, edge 12

Web pass-through in both versions. Stock React Native has no equivalent and no upstream PR is in flight.

### background-position

- ID: `background-position`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `css-background-offsets`
- Can I Use title: CSS background-position edge offsets
- Browser minimums: chrome 25, safari 7, firefox 13, edge 12

Web pass-through in both versions. Stock RN 0.76+ accepts `experimental_backgroundPosition` (the `experimental_` prefix has NOT been removed in 0.85 or 0.86-rc.0 — the ABI key is still prefixed). v7 dual-emits the prefixed and unprefixed keys so the same template works on RN and react-native-web. To avoid rn-web's validator dropping multi-token values like `0 0` or `top left`, v7 skips the standard `backgroundPosition` key when the value has two axes; rn-web falls back to its `0% 0%` default and the `experimental_backgroundPosition` key still flows to iOS / Android where the two-axis grammar is honored.

Caveats:

- Only meaningful when paired with `background-image` (gradients today; raster images once #54994/5/6 lands).

### background-repeat

- ID: `background-repeat`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `background-repeat-round-space`
- Can I Use title: CSS background-repeat round and space
- Browser minimums: chrome 32, safari 7, firefox 49, edge 12

Web pass-through in both versions. Stock RN 0.76+ accepts `experimental_backgroundRepeat` with all four keywords (`repeat`, `no-repeat`, `round`, `space`); v7 dual-emits the prefixed and unprefixed keys.

### background-size

- ID: `background-size`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `background-img-opts`
- Can I Use title: CSS3 Background-image options
- Browser minimums: chrome 15, safari 7, firefox 4, edge 12

Web pass-through in both versions. Stock RN 0.76+ accepts `experimental_backgroundSize` (`Cover` / `Contain` keywords plus `BackgroundSizeLengthPercentage` pairs at the ABI). v7 dual-emits the prefixed and unprefixed keys, and works around a 0.85 native crash by rewriting `cover` / `contain` to `auto` on the `experimental_*` key (the standard `backgroundSize` key keeps the original keyword for rn-web). For gradients — the only image type that reaches `experimental_*` today — `cover ≡ contain ≡ auto` per spec when the source has no intrinsic dimensions.

### border-color

- ID: `border-color`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Pass-through on web and native, including every per-side longhand. Stock React Native ships physical (`borderTopColor` / `borderBottomColor` / `borderLeftColor` / `borderRightColor`), logical (`borderStartColor` / `borderEndColor`), and block-axis (`borderBlockColor` / `borderBlockStartColor` / `borderBlockEndColor`) keys.

### border-image

- ID: `border-image`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `border-image`
- Can I Use title: CSS3 Border images
- Browser minimums: chrome 56, safari 9.1, firefox 50, edge 12

Pass-through on web in both versions. Stock React Native does not implement `border-image` on either platform and no upstream PR is in flight; SC v7 ignores it on native and surfaces the value only on react-native-web.

### border-inline / border-block (logical border longhands + shorthands)

- ID: `border-logical`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial

v7 registers 24 handlers covering every authoring-spec form: per-edge `border-{inline,block}-{start,end}-{color,width,style}` longhands, axis shorthands (`border-inline-color`, `border-block-width`, etc.), per-edge composite shorthands (`border-inline-start: 1px solid red`), and the two whole-axis composites (`border-inline`, `border-block`). Under horizontal-tb writing mode, inline edges map to `borderStart*` / `borderEnd*` and block edges map to `borderTop*` / `borderBottom*`.

Caveats:

- Stock RN 0.85 only registers a subset of the spec keys: `borderStart*Color/Width`, `borderEnd*Color/Width`, and the block-axis `borderBlockColor` family. The newer `borderInline*` and `borderBlock*Width` names are not stock-RN keys — v7 maps them onto the legacy `borderStart/End/Top/Bottom*` keys so authoring against the spec works regardless.
- Per-edge `border-style` is not supported on native (RN has a single whole-element `borderStyle`); v7 emits a one-time dev-warn and drops per-edge styles. The element-level `border-style` still works.

### border-radius

- ID: `border-radius`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Pass-through everywhere.

### border-style

- ID: `border-style`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial

React Native renders only `solid`, `dotted`, and `dashed` on both platforms. v7 also normalizes `border: none` to `border-style: none` (v6 emitted `solid` for the keyword). The other web keywords (`double`, `groove`, `ridge`, `inset`, `outset`, `hidden`) are dropped on native and remain web-only.

### border-width

- ID: `border-width`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Pass-through everywhere, with full per-side support on native (`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, plus the `-start` / `-end` longhands).

### box-shadow (incl. inset, spread)

- ID: `box-shadow`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `css-boxshadow`
- Can I Use title: CSS3 Box-shadow
- Browser minimums: chrome 4, safari 5, firefox 3.5, edge 12

v7 round-trips full `box-shadow` syntax on native, including spread and inset. RN 0.76+ accepts the same CSS-string syntax directly via the New Architecture; v6 only handled a subset of the legacy `shadow*` / `elevation` props.

### box-sizing

- ID: `box-sizing`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `css3-boxsizing`
- Can I Use title: CSS3 Box-sizing
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 12

React Native used to be border-box-only. Stock RN's Fabric C++ parser now accepts both `border-box` and `content-box` with no feature flag on either platform.

### calc() / clamp() / min() / max()

- ID: `math-functions`
- Category: Functions
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-math-functions`
- Can I Use title: CSS math functions min(), max() and clamp()
- Browser minimums: chrome 79, safari 13.1, firefox 75, edge 79
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/56162), [android](https://github.com/facebook/react-native/pull/56162)

v7 evaluates the static arms of math functions at compile time and re-evaluates dynamic arms at render. v6 supported only fully-static cases on native. Beyond `calc()` / `clamp()` / `min()` / `max()`, v7 implements the CSS Values 4 Math L4 step family (`round()` with `nearest` / `up` / `down` / `to-zero` strategies, `mod()`, `rem()`), trig (`sin`, `cos`, `tan`, `asin`, `acos`, `atan`, `atan2`), exponential (`pow`, `sqrt`, `hypot`, `log`, `exp`), and sign (`abs`, `sign`). Math constants `pi` and `e` are recognized. An upstream Callstack PR wires Yoga dynamic-value resolution into stock React Native for layout properties (dimensions, min/max, flex-basis, gap, position, margin, padding).

Caveats:

- CSS Values 4 §10.7 keywords `infinity`, `-infinity`, and `NaN` are valid CSS but cannot be represented in RN dimensions — v7 emits a dev-warn and drops the declaration. Use a large literal or viewport unit instead.
- All math functions compose inside `calc()`. A function whose every argument resolves to a static numeric folds at compile time; if any sub-expression contains viewport units, container units, theme-token sentinels, or `var()`, the whole expression re-resolves at render time.

### caret-color

- ID: `caret-color`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Partial
- Can I Use ID: `css-caret-color`
- Can I Use title: CSS caret-color
- Browser minimums: chrome 57, safari 11.1, firefox 53, edge 79

Web pass-through in both versions. v7 emits `cursorColor` (Android-only TextInput prop) for the platform-acceptable case. iOS gets no mapping: RN's `selectionColor` would tint the selection range too, violating the CSS spec, so the polyfill refuses to wire it up and dev-warns once. The `caretColor` style key is preserved on the style object so rn-web's browser handles it.

Caveats:

- Android `cursorColor` is reliable on API 29+ (Q); Android 9 silently no-ops, and older versions use reflection that may break.

### Classic viewport units (vh, vw, vmin, vmax)

- ID: `viewport-units-classic`
- Category: Units
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `viewport-units`
- Can I Use title: Viewport units: vw, vh, vmin, vmax
- Browser minimums: chrome 26, safari 6.1, firefox 19, edge 16

Pass-through on web. v7 resolves `vh` / `vw` / `vi` / `vb` / `vmin` / `vmax` against the React Native window and re-resolves on orientation change (`vi` and `vb` resolve to width and height respectively in horizontal-tb writing mode). Stock RN does not recognise the strings on either platform.

### clip-path

- ID: `clip-path`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-clip-path`
- Can I Use title: CSS clip-path property (for HTML)
- Browser minimums: firefox 54
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/54700), [android](https://github.com/facebook/react-native/pull/54701)

Web pass-through in both versions. Stock React Native does not implement `clip-path` on either platform; a Callstack PR trio is in flight (one JS, one iOS, one Android) covering `inset()`, `circle()`, `ellipse()`, `polygon()`, `rect()`, `xywh()`, plus the reference-box keywords.

### color-mix()

- ID: `color-mix`
- Category: Colors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v6 passed color-mix() through on web only. v7 resolves color-mix() during native style resolution and converts back to sRGB for display. Stock RN has no color-mix parser.

Caveats:

- Specify the interpolation space explicitly (e.g. `in oklab`) for predictable cross-platform results.

### color-scheme

- ID: `color-scheme`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web; required there so form controls and scrollbars repaint when dark mode is active. React Native reads the same OS signal through `Appearance` / `useColorScheme`. v7 evaluates `light-dark()` against that signal, which covers the practical use case even though the style itself does not exist on native.

### color() function (display-p3, rec2020, …)

- ID: `color-function`
- Category: Colors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-color-function`
- Can I Use title: CSS color() function
- Browser minimums: chrome 111, safari 15, firefox 113, edge 111
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/42831), [android](https://github.com/facebook/react-native/pull/42831)

v7 folds static `color(display-p3 …)`, `color(rec2020 …)`, etc. to sRGB hex at compile time on React Native, gamut-mapping wide-gamut inputs. An upstream RN PR adds native Display-P3 awareness (iOS largely implemented, Android on hold) so the wide-gamut value can reach the renderer untouched.

Caveats:

- Until the upstream PR lands, channels resolve through sRGB even on P3-capable displays.

### columns / column-count / column-width / column-rule / column-span / column-fill

- ID: `columns`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `multicolumn`
- Can I Use title: CSS3 Multiple column layout
- Browser minimums: safari 10, edge 12

CSS Multicolumn is not implemented in Yoga and there is no PR in flight. Pass-through on web in both versions. For column-style layouts on React Native, use `FlatList` / `SectionList` with `numColumns`, or compose `flex-direction: row` with `flex-wrap`.

### Combinators (descendant, >, +, ~)

- ID: `combinators`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web in both versions. v7 implements combinators between styled-component references on React Native: descendant (`${Foo} &`), child (`${Foo} > &`), adjacent-sibling (`${Foo} + &`), and general-sibling (`${Foo} ~ &`). The left operand must be a styled-component reference; raw selector strings on the left do not match because they have no published `styledComponentId` to track. Each styled component publishes its position and ancestor chain via a `ParentContext`.

Caveats:

- Non-styled intermediaries (e.g. a user `<View>` between the ancestor and the matched component) are transparent for descendant combinators but break the child combinator chain because they reset the publishing `parentId`.
- A non-styled component that renders styled children does not republish ParentContext, so sibling and indexed-position matches reset within its subtree.

### contain

- ID: `contain`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-containment`
- Can I Use title: CSS Containment
- Browser minimums: chrome 52, safari 15.4, firefox 69, edge 79

Pass-through on web in both versions. React Native does not expose layout/paint/style containment hints; the engine already isolates each view subtree.

### Container-query units (cqw / cqh / cqmin / cqmax)

- ID: `cq-units`
- Category: Units
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-container-query-units`
- Can I Use title: CSS Container Query Units
- Browser minimums: chrome 105, safari 16, firefox 110, edge 105

v7 wires container-query units up to the nearest ancestor container on React Native. Stock RN does not recognise these as dimension values. When a container is pending first measurement, the declaration drops for one frame.

### content / counter-reset / counter-increment / counter-set

- ID: `content-counters`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-counters`
- Can I Use title: CSS Counters
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 12

Pass-through on web. React Native has no `::before` / `::after` pseudo-elements and no counter cascade, so generated content has nowhere to attach on native.

### content-visibility

- ID: `content-visibility`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-content-visibility`
- Can I Use title: CSS content-visibility
- Browser minimums: chrome 85, safari 18, firefox 125, edge 85

Pass-through on web. React Native already lazy-mounts off-screen rows in virtualized lists; there is no general-purpose `auto` skip on iOS or Android.

Caveats:

- Pair with `contain-intrinsic-size` on web so reserved boxes do not collapse before they render.

### CSS Custom Properties (var(--…))

- ID: `custom-props`
- Category: Other
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-variables`
- Can I Use title: CSS Variables (Custom Properties)
- Browser minimums: chrome 49, safari 10, firefox 31, edge 16

`createTheme()` (v6.4+) emits CSS custom properties and works in both client and RSC. On native, tokens are sentinel strings that resolve when interpolated directly into CSS-value positions.

Caveats:

- `ThemeProvider` must receive the raw theme object, not the `createTheme()` output. Passing the output yields self-referential `var(--x, var(--x, fallback))`.
- JS arithmetic on tokens silently breaks (`4 + theme.space.md`). Use `calc()` instead.

### CSS Grid

- ID: `grid`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-grid`
- Can I Use title: CSS Grid Layout (level 1)
- Browser minimums: chrome 57, safari 10.1, firefox 52, edge 16
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/55665), [android](https://github.com/facebook/react-native/pull/55665)

Web-only today. A Meta-internal Yoga + React Native series adds `display: grid` to the layout engine, with grid track types, the grid layout algorithm, and platform bindings landing across a multi-PR sequence; once it merges, stock RN gets `grid-template-columns`, `grid-template-rows`, `grid-area`, and friends on both platforms simultaneously.

### CSS Nesting

- ID: `nesting`
- Category: At-rules
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-nesting`
- Can I Use title: CSS Nesting
- Browser minimums: chrome 120, safari 17.2, firefox 117, edge 120

v6 preprocesses nesting through stylis before the browser sees it; v7 hands native CSS Nesting to the browser when targets support it.

Caveats:

- On React Native, v7 resolves nested rules through the in-house engine; v6 only flattened simple ampersand cases.
- Always anchor pseudo-states with `&:hover`, never `:hover`. Stylis (v6) and the v7 parser both treat bare pseudos as descendant selectors.

### CSS Subgrid

- ID: `subgrid`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-subgrid`
- Can I Use title: CSS Subgrid
- Browser minimums: chrome 117, safari 16, firefox 71, edge 117

Pass-through on web in both versions.

### CSS tables (table-layout, border-collapse, border-spacing, caption-side, empty-cells)

- ID: `css-tables`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-table`
- Can I Use title: CSS Table display
- Browser minimums: chrome 4, safari 3.1, firefox 3, edge 12

Pass-through on web. React Native has no table layout mode; build tabular UIs with flex rows + columns or a dedicated grid library.

### cursor

- ID: `cursor`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Partial
- stock React Native Android: Not supported
- Can I Use ID: `css3-cursors`
- Can I Use title: CSS3 Cursors (original values)
- Browser minimums: chrome 5, safari 5, firefox 4, edge 14

Pass-through on web; flows through on `react-native-web`. iOS Fabric only honors the `pointer` keyword (via `UIHoverAutomaticEffect` on iOS 17+); the 30+ other Cursor enum values (Crosshair, Move, Grab, Help, etc.) parse but have no rendering. iOS < 17 ignores the property entirely. Android has no `cursor` consumer on either renderer.

### direction

- ID: `direction`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Pass-through everywhere. React Native exposes `direction` on ViewStyle (`inherit | ltr | rtl`) via Yoga; root-node default tracks the device locale. iOS Text additionally accepts `writingDirection` for paragraph-level reordering. v7's RTL plugin handles physical-property mirroring; logical properties stay direction-agnostic.

### display

- ID: `display`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `css-display-contents`
- Can I Use title: CSS display: contents

Stock React Native accepts `display: flex` (the default), `display: none`, and `display: contents` (RN 0.77+); v6 and v7 pass those through. Block / inline / inline-block / inline-flex / flow-root are web-only because Yoga has no inline-level box model. CSS Grid is tracked under its own entry.

Caveats:

- `display: contents` removes the Yoga node from layout and hoists its children into the parent — useful for transparent wrapper components.
- There is no inline flow on React Native; bare strings must live inside a `Text` primitive.

### Dynamic viewport units (dvh / svh / lvh / dvw)

- ID: `viewport-units-dvh`
- Category: Units
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `viewport-units`
- Can I Use title: Viewport units: vw, vh, vmin, vmax
- Browser minimums: chrome 26, safari 6.1, firefox 19, edge 16

Dynamic viewport units pass through on web. v7 resolves them against the React Native window and re-resolves on orientation change. Stock RN does not recognise these as dimension values. The four variants (default v*, sv*, lv*, dv*) collapse to a single value on RN since there is no URL-bar surface.

### env() safe-area-inset

- ID: `env`
- Category: Functions
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-env-function`
- Can I Use title: CSS Environment Variables env()
- Browser minimums: chrome 69, safari 11.1, firefox 65, edge 79

v7 parses `env()` per CSS Environment Variables Level 1 (recognized names, fallbacks, recursive fallback substitution). Safe-area insets currently resolve to 0 on React Native; the insets surface is not yet wired to `react-native-safe-area-context`, so `env(safe-area-inset-top, 47px)` returns 0 because recognized names ignore the fallback per spec.

### field-sizing

- ID: `field-sizing`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web (Chrome 123+). v7 polyfills `field-sizing: content` on `<TextInput>` by lifting `multiline: true` as a top-level prop, which engages each platform's native height-fitting measure pass (iOS `RCTBaseTextInputShadowView.sizeThatFits`; Android `ReactEditText` Yoga measure). `fixed` is a no-op. Author-supplied `min-height` / `max-height` still bound the field. v7 dev-warns once (`native-field-sizing-needs-multiline`) when the caller explicitly passes `multiline={false}` since that voids the lift. Stock RN has no `field-sizing` surface on either platform.

Caveats:

- The polyfill applies to `<TextInput>` only; the CSS property has no analog for other input types on native.

### filter: blur() / saturate() / drop-shadow() / …

- ID: `filter`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `css-filters`
- Can I Use title: CSS Filter Effects
- Browser minimums: chrome 18, safari 6, firefox 35, edge 79

Stock RN 0.76+ accepts the `filter` CSS string at the ABI; v7 wires v6-style template syntax to that surface. On iOS Fabric (default), only `brightness` and `opacity` apply — `blur`, `grayscale`, `saturate`, `contrast`, `hue-rotate`, and `drop-shadow` are gated behind `enableSwiftUIBasedFilters` (defaults FALSE in 0.85 / 0.86-rc.0). `invert` and `sepia` are accepted at the ABI but never applied on iOS. On Android, color-matrix filters (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, opacity) work on minSdk 24+; `blur` and `drop-shadow` require API 31+ (Android 12).

Caveats:

- iOS SwiftUI filter opt-in: set `ReactNativeReleaseLevel` to `experimental` in Info.plist (or `ios.infoPlist` in Expo).

### flex / flex-grow / flex-shrink / flex-basis

- ID: `flex-longhands`
- Category: Layout
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

All three longhands map directly to Yoga. The `flex` shorthand is parsed by both versions: v6 via `css-to-react-native`, v7 via its own parser. React Native's keyword semantics for `flex` differ from CSS: a single positive number means grow proportional, `flex: 0` is inflexible, `flex: -1` shrinks to `minWidth` / `minHeight`.

Caveats:

- `flex-basis` accepts `auto`, a length, or a percent. The CSS intrinsic keywords (`content`, `min-content`, etc.) are not implemented in Yoga.

### flex-direction

- ID: `flex-direction`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock RN accepts `row`, `row-reverse`, `column`, and `column-reverse`. React Native's default is `column` (the CSS default is `row`), so port-from-web layouts need an explicit `flex-direction: row` for horizontal flow.

### flex-wrap

- ID: `flex-wrap`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock RN accepts `nowrap` (default), `wrap`, and `wrap-reverse`. Pass-through everywhere.

### Flexbox

- ID: `flexbox`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `flexbox`
- Can I Use title: CSS Flexible Box Layout Module
- Browser minimums: chrome 21, safari 6.1, firefox 28, edge 12

Pass-through in both versions. React Native's default layout.

### float / clear

- ID: `float-clear`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web in both versions. React Native has no float layout — Yoga is flexbox-first — and these properties are listed in v7's native limitations alongside CSS Grid.

### font-family

- ID: `font-family`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Supported
- stock React Native Android: Supported

RN `fontFamily` is a single platform-font name. v7 reads either a single ident sequence (unquoted multi-word like `Helvetica Neue`), one quoted string, or a generic-family keyword. Comma-separated stacks (`Inter, system-ui, sans-serif`) keep the first family and drop the rest with a one-time dev-warn (`native-font-family-fallbacks-dropped`) since RN has no fallback chain. v6 dropped the whole declaration silently for stacks. Round-trips on web through normal CSS parsing.

Caveats:

- v7 normalizes all 13 CSS generic-family keywords (`system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, `ui-rounded`, `sans-serif`, `serif`, `monospace`, `cursive`, `fantasy`, `emoji`, `math`, `fangsong`) to concrete face names per platform — e.g. `Times New Roman` for serif variants on iOS, `monospace` for mono variants on Android.
- iOS Fabric also recognises `system-ui` / `ui-sans-serif` / `ui-serif` / `ui-monospace` / `ui-rounded` natively via `UIFontDescriptorSystemDesign*`. Android has no native generic-keyword handling; unknown names silently fall back to the system default.
- Font names are case-sensitive on native; both versions preserve the source casing.

### font-feature-settings

- ID: `font-feature-settings`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `font-feature`
- Can I Use title: CSS font-feature-settings
- Browser minimums: chrome 21, safari 9.1, firefox 15, edge 12

Pass-through on web. Stock React Native does not register `fontFeatureSettings`; the only surface for OpenType features is the `font-variant` keyword set, which Android internally rewrites into `fontFeatureSettings` but does not expose for direct authoring.

### font-size

- ID: `font-size`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

RN `fontSize` is a bare point value. v7 accepts bare numbers and `Npx`, plus full unit resolution at render time for `vh` / `vw` / `dvh` (viewport), `em` / `rem` (font-relative against the cascade), and `lh` / `rlh` (line-height-relative). v6 only handled bare numbers and `px` — `em` and `rem` strings dropped silently on native.

### font-style

- ID: `font-style`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

RN accepts `normal` and `italic` natively on both platforms. v7 additionally folds `oblique` to italic and gracefully degrades `oblique <angle>` (consume the angle, drop it with a one-time dev-warn, resolve to italic) per CSS Fonts 4. v6 dropped the bare `oblique` declaration entirely. For exact slant control, switch to a slant-axis variable font.

### font-variant

- ID: `font-variant`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

iOS Fabric supports `small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`, and `stylistic-one` through `stylistic-twenty` (mapped to `UIFontFeatureSelector`). Android handles a superset: also the common / discretionary / historical `*-ligatures` pairs (with `no-*` variants) and `contextual` / `no-contextual`, rewritten internally into `fontFeatureSettings`. v6 and v7 both split a space-separated CSS value into the RN array form.

### font-variation-settings

- ID: `font-variation-settings`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `variable-fonts`
- Can I Use title: Variable fonts
- Browser minimums: chrome 66, safari 11, firefox 62, edge 17

Pass-through on web. Stock React Native does not expose a variable-font axis surface; variable fonts render at their default axis values unless the consuming app patches a native module.

### font-weight

- ID: `font-weight`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Numeric (`100`–`900`) and the keyword pair (`normal`, `bold`) pass through on both platforms. iOS maps each numeric slot to UIFontWeight internally; Android maps to the nearest installed face. RN's named-weight aliases (`ultralight`, `thin`, `medium`, `semibold`, `heavy`, `black`) are accepted ONLY by the legacy paper bridge on iOS; the Fabric C++ parser used by the New Architecture default (RN 0.85) rejects them and falls back to Regular.

Caveats:

- `bolder` and `lighter` are resolved on web only; native treats them as `normal`.

### Form-state selectors (:invalid, :required, :read-only)

- ID: `form-state`
- Category: Selectors
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-in-out-of-range`
- Can I Use title: :in-range and :out-of-range CSS pseudo-classes
- Browser minimums: chrome 53, safari 10.1, firefox 50, edge 79

Pass-through on web. React Native's `TextInput` does not implement form-state pseudos.

### fr (grid fractional unit)

- ID: `fr-unit`
- Category: Units
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-grid`
- Can I Use title: CSS Grid Layout (level 1)
- Browser minimums: chrome 57, safari 10.1, firefox 52, edge 16

Defined only inside CSS Grid track lists. React Native does not implement Grid on either version, so `fr` does not apply on native; see the Grid row for the upstream Yoga PR series that would change that.

### gap / row-gap / column-gap

- ID: `gap`
- Category: Layout
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Pass-through on web. React Native added gap in 0.71 (percent values in 0.75+); v7 routes it through.

### hwb()

- ID: `color-hwb`
- Category: Colors
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

RN's `@react-native/normalize-colors` parses `hwb()` natively in both modern (`hwb(H W B)`) and slash-alpha (`hwb(H W B / A)`) forms; v6 and v7 pass the function through unchanged.

Caveats:

- v7 has no dynamic resolver for `hwb()`, so theme sentinels embedded in channels (`hwb(${t.h} 0% 0%)`) are not substituted at render time. Use `oklch` / `oklab` / `lch` / `lab` / `color-mix` for sentinel-bearing dynamic colors.

### hyphens

- ID: `hyphens`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-hyphens`
- Can I Use title: CSS Hyphenation
- Browser minimums: chrome 88, safari 5.1, firefox 6, edge 12

Pass-through on web. Stock Android exposes hyphenation only via the separate Text prop `android_hyphenationFrequency` (`none` / `normal` / `full`); the literal CSS `hyphens` property is silently dropped. v7 maps `hyphens: auto` to `android_hyphenationFrequency: normal`; `manual` and `none` map to `none`. iOS has no programmatic hyphenation control in RN.

Caveats:

- Soft-hyphens (U+00AD) embedded in source text still produce break opportunities on both platforms regardless of the `hyphens` setting.

### image-orientation

- ID: `image-orientation`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-image-orientation`
- Can I Use title: CSS3 image-orientation
- Browser minimums: chrome 81, safari 13.1, firefox 26, edge 81

Pass-through on web. React Native applies EXIF orientation at decode time on both platforms (matching the web default of `from-image`), but does not expose the CSS property — there is no way to override with `none` or a specific angle.

### image-rendering

- ID: `image-rendering`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. Stock React Native always scales raster images with bilinear filtering; pixelated / crisp-edges hints have no platform surface on iOS or Android.

### image-set() function

- ID: `image-set`
- Category: Functions
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-image-set`
- Can I Use title: CSS image-set
- Browser minimums: chrome 113, safari 17, firefox 89, edge 113

Pass-through on web. React Native handles density variants through the `Image` `source` prop (e.g. `foo@2x.png` / `foo@3x.png` auto-pick); v7 does not currently rewrite `image-set()` into that surface.

### inset

- ID: `inset`
- Category: Layout
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Partial
- stock React Native Android: Partial

Stock RN 0.72+ accepts `inset`, `inset-block`, and `inset-inline` as single `DimensionValue` keys; the renderer then writes each physical edge. v7 implements the multi-value CSS shorthand (`inset: 10px 20px`) by tokenizing and expanding to per-edge values, so it works on every target. v6 only forwards single-value forms because `css-to-react-native` has no inset transform.

Caveats:

- Multi-value shorthand (`inset: 10px 20px 30px 40px`) only round-trips correctly through v7 on native; v6 forwards it as a string RN cannot parse.

### interactivity

- ID: `interactivity`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

CSS UI 5 keyword that suppresses interaction and accessibility for a subtree. Stock React Native has no `interactivity` prop on either platform; v7 polyfills `interactivity: inert` by lifting four top-level props: `pointerEvents: "none"`, `accessibilityElementsHidden: true` (iOS), `importantForAccessibility: "no-hide-descendants"` (Android), and `focusable: false`. `auto` is a no-op. On rn-web, the keyword passes through to the browser, which reads it from the inline style (and from the corresponding HTML `inert` attribute when set explicitly).

Caveats:

- RN does not propagate `focusable: false` to descendants, so a focusable child inside an `inert` subtree can still receive D-pad / keyboard focus on Android / tvOS. v7 dev-warns once (`native-interactivity-inert-focusable-leak`).

### interpolate-size / calc-size()

- ID: `interpolate-size`
- Category: Animation
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web (Chromium-only today). v7 already animates layout properties on React Native through the runtime, so there is no equivalent opt-in needed on iOS or Android.

Caveats:

- No caniuse entry yet.

### isolation

- ID: `isolation`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Not supported

Required for predictable stacking contexts when using blend modes on native. Stock RN 0.85+ parses `isolation: auto | isolate` at the ABI; iOS Fabric only contributes to `FormsStackingContext` z-ordering, not a real compositing isolation layer. Android has no `@ReactProp` for `isolation` — the prop is silently dropped, though `BlendModeHelper.needsIsolatedLayer` auto-isolates when child views use `mix-blend-mode`.

### justify-content

- ID: `justify-content`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock RN accepts `flex-start` (default), `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`. The newer CSS Box Alignment keywords (`start`, `end`, `left`, `right`) are not implemented.

### justify-items / justify-self

- ID: `justify-items`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Neither property is implemented in Yoga (tracked in facebook/yoga#1649). These are grid-era keywords; flexbox uses `justify-content` on the container and has no per-item justification override. Pass-through on web in both versions.

### letter-spacing

- ID: `letter-spacing`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `css-letter-spacing`
- Can I Use title: letter-spacing CSS property
- Browser minimums: chrome 30, safari 6.1, firefox 2, edge 12

RN `letterSpacing` is a bare point value. Both v6 and v7 accept bare numbers and `Npx`; the `em` and `rem` forms do not resolve against the active font-size on native in either version.

### light-dark() / CSS system colors

- ID: `light-dark`
- Category: Colors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. v7 evaluates `light-dark()` on React Native by reading `Appearance.getColorScheme()`. Stock RN has no `light-dark` parser in `normalize-colors`. v7 additionally folds the CSS Color 4 system-color keywords (`canvas`, `canvastext`, `field`, `fieldtext`, `graytext`, `highlight`, `highlighttext`, `linktext`, `visitedtext`, `activetext`) into platform-appropriate `light-dark(<lightHex>, <darkHex>)` expressions at compile time, then resolves the active scheme at render time.

Caveats:

- The system-color fold covers the 10 most common author-facing keywords; the wider CSS UI / Forms keywords (`ButtonFace`, `Mark`, `AccentColor`, `SelectedItem`, etc.) are not folded and pass through unchanged.

### line-clamp

- ID: `line-clamp`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-line-clamp`
- Can I Use title: CSS line-clamp
- Browser minimums: chrome 14, safari 5, firefox 68, edge 17

Pass-through on web (`-webkit-line-clamp` and the standard `line-clamp` both work on Chromium / WebKit / Firefox 68+). Stock React Native has no `lineClamp` style key; the equivalent is the `numberOfLines` prop on `<Text>` paired with `ellipsizeMode`. v7 polyfills `line-clamp: N` by lifting `numberOfLines: N` as a top-level prop on `<Text>` so the same template works on both targets.

### line-height

- ID: `line-height`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Supported
- stock React Native Android: Supported

RN `lineHeight` is an absolute point value. Both v6 and v7 accept bare numbers and `Npx`; other CSS lengths (em, rem) are NOT coerced and pass through as raw strings which RN rejects. The CSS unitless-multiplier form (`line-height: 1.5`) is treated as `1.5` points — there is no font-size-relative resolution on native.

Caveats:

- iOS centres glyphs within the line box differently from web when `lineHeight > fontSize`; upstream fix for TextInput is in flight.

### linear-gradient() / radial-gradient() / conic-gradient()

- ID: `gradients`
- Category: Colors
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `css-gradients`
- Can I Use title: CSS Gradients
- Browser minimums: chrome 10, safari 15.4, firefox 36, edge 12

Stock RN 0.76+ accepts `linear-gradient()` and (0.80+) `radial-gradient()` at the ABI under the `experimental_backgroundImage` key (plus their `repeating-*` variants on the same release windows). v7 emits both `experimental_*` and standard keys so the same template works on RN and react-native-web; the `experimental_` prefix has not been removed in main. Conic gradients are a different story: stock RN has zero `conic-gradient` references on either platform and no PR is in flight, so on native v7 forwards the string but it does not paint. v6 dropped all gradient strings on native.

Caveats:

- Linear / radial: web pass-through plus native paint via `experimental_backgroundImage`.
- Conic: web-only. Approximate on native with a layered radial-gradient + image mask, or use `react-native-skia` for true sweep painting.
- A separate Callstack three-PR series adds `url()` value support for raster images (tracked in the `background-image: url()` row).

### list-style / -type / -position / -image

- ID: `list-style`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native has no `<ul>` / `<ol>` primitive; bullets and ordinal markers must be rendered as explicit `Text` siblings.

### Logical properties (margin-inline, padding-block, …)

- ID: `logical-props`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `css-logical-props`
- Can I Use title: CSS Logical Properties
- Browser minimums: chrome 89, safari 15, firefox 66, edge 89

Full logical-property support on React Native in v7, including `-start` / `-end` longhands across margin, padding, border-color, border-width, border-inline, and border-block (see the dedicated `border-inline / border-block` entry). The first-party RTL plugin handles physical-property mirroring; logical properties are already direction-agnostic.

Caveats:

- Stock RN supports `marginStart` / `paddingEnd` style keys; the `inset-inline` shorthand family arrived with the New Architecture (0.76+).

### mask / mask-image / mask-mode / mask-position

- ID: `mask`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-masks`
- Can I Use title: CSS Masks
- Browser minimums: chrome 120, safari 15.4, firefox 53, edge 120

Pass-through on web. Stock React Native has no CSS mask: the `@react-native-masked-view/masked-view` community package provides a `<MaskedView maskElement={...}>` component on both iOS and Android, but it is opt-in and does not consume CSS syntax.

### min/max-width and min/max-height

- ID: `min-max-width-height`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `intrinsic-width`
- Can I Use title: Intrinsic & Extrinsic Sizing
- Browser minimums: chrome 22, safari 16, edge 79

All four bounds work on both platforms via Yoga and accept the same `DimensionValue` shape as `width` / `height` (number, percent string, `auto`, plus the keywords `max-content`, `fit-content`, `stretch`). Only `min-content` is not implemented.

### mix-blend-mode

- ID: `mix-blend-mode`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Supported
- stock React Native Android: Partial
- Can I Use ID: `css-mixblendmode`
- Can I Use title: Blending of HTML/SVG elements
- Browser minimums: chrome 41, firefox 32, edge 79

v7 passes mix-blend-mode to native. iOS Fabric handles all 16 non-Normal blend modes. Android requires API 29+ (Android 10): `BlendModeHelper.parseMixBlendMode` returns null below Android 10, so the prop is silently dropped on the 5 lowest API levels (24-28) RN supports.

Caveats:

- Gamma-sensitive modes (color-burn, soft-light, overlay, hard-light) appear more saturated than on web because iOS Core Animation and Android Skia blend in linear-light on Display P3 devices.
- On react-native-web, `View.js` defaults to `position: relative; z-index: 0`, making every View a stacking context. Override the parent with `z-index: auto` so blends reach the intended backdrop.

### Named colors / transparent / currentcolor

- ID: `named-colors`
- Category: Colors
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `currentcolor`
- Can I Use title: CSS currentColor value
- Browser minimums: chrome 4, safari 4, firefox 2, edge 12

RN's `normalize-colors` accepts all 147 CSS named colors plus `transparent` on both platforms (case-sensitive — lowercase only; uppercase `RED` will not match). `currentcolor` is web-only: RN has no cascading `color` to inherit, so v7 leaves it unresolved on native and the value normalizes to transparent.

Caveats:

- Use lowercase named-color keywords on native; the matcher is case-sensitive.
- `currentcolor` falls back to transparent on native; on Android `cursorColor` the value is silently ignored and the system uses its default caret regardless.

### object-fit / object-position

- ID: `object-fit`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock RN 0.85+ registers `objectFit` as a native style key on `<Image>` (fill / contain / cover / scale-down / none). v7 passes the CSS through unchanged. `object-position` has no native equivalent on either platform and is web-only; on native, alignment falls back to the `Image` defaults.

### oklch() / oklab() / lch() / lab()

- ID: `oklch-oklab`
- Category: Colors
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-lch-lab`
- Can I Use title: LCH and Lab color values
- Browser minimums: chrome 111, safari 15, firefox 113, edge 111

Modern color functions pass through on web in both versions. v7 also resolves them to sRGB on React Native, gamut-mapping wide-gamut inputs while preserving hue. Stock RN's `normalize-colors` only recognises hex / rgb / hsl / hwb — oklch / oklab / lch / lab are not handled. v7 also supports CSS Color 5 relative-color syntax (`oklch(from <base> <l-expr> <c-expr> <h-expr>)`) for all four modern spaces, with channel keywords (`l`, `c`, `h`, `a`, `b`, `alpha`) usable inside `calc()`. Literal bases (hex / named / nested color function) fold at compile time; theme-token bases re-fold at render time when the token resolves.

Caveats:

- Percent channels follow CSS Color L4 ranges: `lab(50% 0 0)` is mid-gray.
- Relative-color is only implemented for the four modern spaces (`oklch` / `oklab` / `lch` / `lab`). `rgb()` / `hsl()` / `hwb()` relative forms are not folded — use the modern-space variants.

### opacity

- ID: `opacity`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `css-opacity`
- Can I Use title: CSS3 Opacity
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 12

Pass-through everywhere.

### outline

- ID: `outline`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `outline`
- Can I Use title: CSS outline properties
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 15

v7 parses the `outline` shorthand into `outline-width`, `outline-style`, and `outline-color` longhands for React Native. Stock RN 0.77+ accepts the longhands as native style keys; the shorthand itself is not a native key, so the v7 parser is what makes the CSS-flavoured form work on native.

Caveats:

- Outline does not affect layout on native, matching web.
- v7 dev-warns when `outline-style` is a web-only keyword (`auto`, `double`, `groove`, `ridge`, `inset`, `outset`) — the declaration still reaches rn-web but is dropped on native.

### outline-color

- ID: `outline-color`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Web pass-through in both versions; stock RN 0.77+ accepts `outlineColor`.

### outline-offset

- ID: `outline-offset`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Web pass-through in both versions. Stock RN 0.77+ accepts `outlineOffset`, and 0.80+ factors the offset into the rendered outline radius the same way browsers do.

### outline-style

- ID: `outline-style`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial

Web pass-through in both versions. Stock React Native renders only `solid`, `dotted`, and `dashed`; `auto`, `double`, `groove`, `ridge`, `inset`, and `outset` are dropped on native (v7 warns in dev).

### outline-width

- ID: `outline-width`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Web pass-through in both versions; stock RN 0.77+ accepts `outlineWidth`.

### overflow

- ID: `overflow`
- Category: Layout
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `css-overflow`
- Can I Use title: CSS overflow property
- Browser minimums: chrome 90, safari 16, firefox 81, edge 90

Stock RN accepts only the `overflow` shorthand with values `visible`, `hidden`, and `scroll`. The CSS `auto` and `clip` keywords plus the `overflow-x` / `overflow-y` longhands are not implemented. iOS `UIView`s don't clip by default; Android `ViewGroup`s do, so `overflow: visible` on Android can still be clipped by an ancestor `ScrollView`.

Caveats:

- `overflow: scroll` on a plain `View` does not produce scrollbars; use `ScrollView` for actual scrolling.
- For overflow-visible across Android scroll ancestors, hoist the element out or set `collapsable={false}` on the wrapper.

### overflow-anchor

- ID: `overflow-anchor`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-overflow-anchor`
- Can I Use title: CSS overflow-anchor (Scroll Anchoring)
- Browser minimums: chrome 56, firefox 66, edge 79

Pass-through on web in both versions. React Native scrolls preserve position relative to the content top, not a tracked anchor; there is no equivalent property on iOS or Android.

### overflow-clip-margin

- ID: `overflow-clip-margin`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. Stock React Native has no `overflow: clip` semantics, so the margin extension is not implemented on either platform.

### overscroll-behavior

- ID: `overscroll-behavior`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-overscroll-behavior`
- Can I Use title: CSS overscroll-behavior
- Browser minimums: chrome 65, safari 16, firefox 59, edge 79

Pass-through on web. React Native's `ScrollView` configures overscroll per-platform via props instead: `bounces={false}` disables iOS rubber-banding and `overScrollMode="never"` disables the Android edge glow. No CSS style key wires up to either.

### paint-order

- ID: `paint-order`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web (primarily an SVG text-stroke ordering control). React Native has no concept of paint order between fill, stroke, and markers; SVG support comes from `react-native-svg`, which does not currently implement `paint-order`.

### perspective

- ID: `perspective`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial

React Native exposes `perspective` only as a transform-array entry (`transform: [{ perspective: 1000 }, …]`), not as a standalone CSS property. v7 polyfills the top-level `perspective: 1000px` declaration into a `perspective(1000px)` entry on the element's own transform, with `none` resolving to identity and zero / sub-1px values clamping to 1px per CSS Transforms 2 §8. This establishes a 3D rendering context for the element itself; the spec semantic of perspective applying to descendants (which requires `transform-style: preserve-3d`) is not reachable since RN flattens children unconditionally. iOS and Android render different default cameras, so the same value lands at different depths.

Caveats:

- For consistent cross-platform 3D, always declare an explicit `perspective` value on every transformed view. Android applies its own default if none is set.

### perspective-origin

- ID: `perspective-origin`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Web-only. React Native has no analogue; the vanishing point sits at the centre of the transformed view and cannot be moved.

### place-content / place-items / place-self

- ID: `place-content`
- Category: Layout
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

v6 and v7 both expand the `place-content` shorthand to `{ align-content, justify-content }`. v7 also expands `place-items` to `{ align-items, justify-items }` and `place-self` to `{ align-self, justify-self }` per CSS Box Alignment 3 §6/§7. The align axis flows through Yoga on native; the justify axis is silently dropped by RN (Yoga has no `justifyItems` / `justifySelf`) but reaches the browser on rn-web. Self-position keywords (`start | self-start | end | self-end`) normalize to the Yoga `flex-*` enums.

### pointer-events

- ID: `pointer-events`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `pointer-events`
- Can I Use title: CSS pointer-events (for HTML)
- Browser minimums: chrome 4, safari 4, firefox 3.6, edge 12

Pass-through everywhere. React Native accepts `pointerEvents` as a style key on both platforms (the legacy `pointerEvents` View prop has been deprecated in favor of the style). Values: `auto`, `none`, `box-none` (children receive events but the view itself does not), `box-only` (the view receives events but children do not).

Caveats:

- Web only understands `auto` and `none`. `box-none` and `box-only` are RN-only extensions and silently behave as `auto` on react-native-web.

### position: fixed

- ID: `position-fixed`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-fixed`
- Can I Use title: CSS position:fixed
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 12

Web-only.

### position: sticky

- ID: `position-sticky`
- Category: Layout
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-sticky`
- Can I Use title: CSS position:sticky
- Browser minimums: chrome 91, safari 7.1, firefox 59, edge 91

Web-only. React Native has no equivalent on either version.

### print-color-adjust

- ID: `print-color-adjust`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-color-adjust`
- Can I Use title: CSS print-color-adjust
- Browser minimums: chrome 19, safari 6, firefox 48, edge 79

Pass-through on web. React Native has no print pipeline, so the property is unused on iOS and Android.

### quotes

- ID: `quotes`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. `quotes` chooses the glyphs for `content: open-quote / close-quote`; with no generated content on React Native there is nothing for the property to act on.

### rem / em

- ID: `rem-em`
- Category: Units
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `rem`
- Can I Use title: rem (root em) units
- Browser minimums: chrome 4, safari 5, firefox 3.6, edge 12

Pass-through on web. Stock React Native parses style values as numbers (density-independent pixels) only; `rem` / `em` strings resolve to NaN and the declaration is silently dropped without v7. v7 resolves both units at render time: `rem` multiplies against the root font-size (default 16, configurable via cascade), `em` anchors at the parent's resolved `font-size` per CSS Values 4 §6.1. They compose inside `calc()` and any length context (width, padding, margin, gap, font-size, etc.). v6 did not fold either unit.

Caveats:

- Inside `@media (min-width: 25em)` both versions treat 1em as 16px so legacy `em`-based breakpoints still match.
- When `font-size` itself is `em`-based on a descendant, resolution follows the cascade — v7 re-resolves whenever an ancestor publishes a new font-size.

### resize

- ID: `resize`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-resize`
- Can I Use title: CSS resize property
- Browser minimums: chrome 4, safari 4, firefox 4, edge 79

Pass-through on web. React Native has no user-resize handle; a multiline `TextInput` grows automatically via `onContentSizeChange` instead.

### rgb() / rgba() / hsl() / hsla()

- ID: `color-rgb-hsl`
- Category: Colors
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported
- Can I Use ID: `css3-colors`
- Can I Use title: CSS3 Colors
- Browser minimums: chrome 4, safari 3.1, firefox 3, edge 12

React Native's color parser (`@react-native/normalize-colors`) handles `rgb()` / `rgba()` / `hsl()` / `hsla()` in both the legacy comma form and the modern space-separated form. Pass-through everywhere.

### scroll-behavior

- ID: `scroll-behavior`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-scroll-behavior`
- Can I Use title: CSS Scroll-behavior
- Browser minimums: chrome 61, safari 15.4, firefox 36, edge 79

Pass-through on web. React Native does not honor `scroll-behavior` as a style: smooth scrolling is opt-in per call via `ScrollView.scrollTo({ ..., animated: true })`.

### scroll-snap-type / scroll-snap-align

- ID: `scroll-snap`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-snappoints`
- Can I Use title: CSS Scroll Snap
- Browser minimums: chrome 69, safari 11, firefox 68, edge 79

Pass-through on web. React Native has its own paged-scroll APIs but does not honor CSS scroll-snap on either version.

### scroll-timeline / view-timeline / animation-timeline

- ID: `scroll-driven-animations`
- Category: Animation
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. React Native drives scroll-linked animation through `Animated.event` on a `ScrollView`; the CSS scroll-driven syntax is not parsed on iOS or Android.

Caveats:

- No caniuse entry yet — track spec maturity before relying on it in production.

### scrollbar-color

- ID: `scrollbar-color`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-scrollbar`
- Can I Use title: CSS scrollbar styling
- Browser minimums: chrome 121, safari 26.2, firefox 64, edge 121

Pass-through on web. React Native does not paint custom scrollbars: iOS exposes only `indicatorStyle` (`default | black | white`) on `ScrollView`, and Android offers no equivalent.

### scrollbar-width

- ID: `scrollbar-width`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-scrollbar`
- Can I Use title: CSS scrollbar styling
- Browser minimums: chrome 121, safari 26.2, firefox 64, edge 121

Pass-through on web. React Native has no scrollbar-thickness style; the closest stock option is hiding indicators entirely with `showsVerticalScrollIndicator={false}` / `showsHorizontalScrollIndicator={false}`.

### tab-size

- ID: `tabsize`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css3-tabsize`
- Can I Use title: CSS3 tab-size
- Browser minimums: chrome 42, safari 13.1, firefox 53, edge 79

Pass-through on web.

### text-align

- ID: `text-align`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Pass-through everywhere. RN accepts `auto | left | right | center | justify` on both platforms. iOS Fabric additionally maps `start` to `TextAlignment::Natural` (locale-aware); Android stock does NOT recognize `start` or `end` and silently falls back to start-aligned. v7 lifts both platforms to spec by resolving `start` / `end` / `match-parent` at render time against the inherited `direction` (`start` → `left` under LTR / `right` under RTL; `end` → the opposite; `match-parent` aliases `start` since RN only supports horizontal-tb).

Caveats:

- `text-align: justify` requires Android 8.0 (API 26) or later on Android.
- On rn-web, `start` / `end` / `match-parent` flow to the browser unchanged.

### text-autospace

- ID: `text-autospace`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-text-spacing`
- Can I Use title: CSS Text 4 text-spacing
- Browser minimums: edge 12

Pass-through on web. Stock React Native has no CJK / Latin auto-spacing hook on iOS or Android.

### text-box / text-box-trim / text-box-edge

- ID: `text-box-trim`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-text-box-trim`
- Can I Use title: CSS Text Box
- Browser minimums: chrome 133, safari 18.2, edge 132

Pass-through on web. Stock React Native has no glyph-metric trimming on either platform; vertical centering still relies on manual `lineHeight` and `paddingVertical` math.

### text-decoration-color

- ID: `text-decoration-color`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Supported
- stock React Native Android: Not supported
- Upstream PRs: [android](https://github.com/facebook/react-native/pull/56767)

iOS already paints the underline / line-through in the requested color, so v6 and v7 pass through and render correctly there. Android currently inherits the text color regardless; an upstream PR adds proper `text-decoration-color` support.

### text-decoration-style

- ID: `text-decoration-style`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Not supported
- Upstream PRs: [android](https://github.com/facebook/react-native/pull/56768)

iOS Fabric maps `text-decoration-style` to `NSUnderlineStyle` and supports `solid`, `double`, `dashed`, `dotted` (for both underline and strikethrough); `wavy` is not in RN's TextDecorationStyle enum and is silently dropped. Android ignores the property entirely; an upstream PR adds full support.

### text-indent

- ID: `text-indent`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-text-indent`
- Can I Use title: CSS text-indent
- Browser minimums: chrome 146, safari 16, firefox 121, edge 146

Pass-through on web. Stock React Native has no `textIndent` style attribute on either platform; first-line indentation is not implemented in the RN text layout pipeline.

### text-overflow

- ID: `text-overflow`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `text-overflow`
- Can I Use title: CSS3 Text-overflow
- Browser minimums: chrome 4, safari 3.1, firefox 7, edge 12

Pass-through on web. Stock React Native has no `textOverflow` style key; v7 also has no handler for it. Use `numberOfLines={N}` with `ellipsizeMode='tail' | 'head' | 'middle' | 'clip'` on the Text component, or `line-clamp: N` which v7 DOES polyfill (see the line-clamp entry).

### text-shadow

- ID: `text-shadow`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-textshadow`
- Can I Use title: CSS3 Text-shadow
- Browser minimums: chrome 4, safari 4, firefox 3.5, edge 12
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/55289), [android](https://github.com/facebook/react-native/pull/55289)

Pass-through on web. Stock React Native renders text shadows on both platforms via the three legacy individual style keys (`textShadowOffset`, `textShadowRadius`, `textShadowColor`), but does NOT parse the CSS `text-shadow` shorthand string. v7 polyfills the shorthand by expanding `<offset-x> <offset-y> [<blur>] [<color>]` (any order between the color and the length triplet) into the three legacy keys. v6 dropped the shorthand. Upstream PR #55289 adds native CSS-shorthand parsing on both platforms (single shadow per node).

### text-spacing-trim

- ID: `text-spacing-trim`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. CJK punctuation trimming is not implemented as a CSS property in stock React Native on either platform.

### text-transform

- ID: `text-transform`
- Category: Properties
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

RN accepts `none | capitalize | uppercase | lowercase` on both platforms in v6 and v7. The CSS `full-width` and `full-size-kana` keywords are web-only.

### text-wrap

- ID: `text-wrap`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-text-wrap-balance`
- Can I Use title: CSS text-wrap: balance
- Browser minimums: chrome 130, safari 17.5, firefox 121, edge 130

v7 polyfills the `text-wrap` shorthand and both CSS Text 4 longhands (`text-wrap-mode`, `text-wrap-style`) on React Native. `text-wrap-mode: nowrap` (and the shorthand) lift `numberOfLines: 1` on the `<Text>` element. `text-wrap-style: balance` and `pretty` map to Android `textBreakStrategy` (`balanced` / `highQuality`, API 23+); `stable` is a no-op. iOS has no platform line-breaking control so style keywords warn there. v6 dropped the property on native.

Caveats:

- On web, all four values pass through in both versions.
- Dev-mode warns once per style keyword that has no iOS or cross-platform support (balance / pretty / stable on iOS).

### top / right / bottom / left

- ID: `top-right-bottom-left`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

All four physical edges work on iOS and Android via Yoga. Values follow RN's `DimensionValue` shape: a number, an `Npx` length (stripped to a number), an `N%` percent string, or `auto`. Ems, viewport units, and other CSS lengths are not natively understood. v7 evaluates `calc()` over static arms at compile time; the upstream Callstack PR #56162 would wire Yoga dynamic `calc()` resolution through stock RN.

### touch-action

- ID: `touch-action`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-touch-action`
- Can I Use title: CSS touch-action property
- Browser minimums: chrome 36, firefox 52, edge 12

Pass-through on web. React Native routes gestures through its own responder system; there is no `touch-action` style. Equivalent behavior comes from `react-native-gesture-handler` or the responder lifecycle.

### transform-box

- ID: `transform-box`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web in both versions. Stock React Native has no `transformBox` style key on either platform; v7 accepts the full spec keyword set (`content-box`, `border-box`, `fill-box`, `stroke-box`, `view-box`) and forwards on rn-web, while warning once on native (`native-transform-box-unsupported`) where the transform pivot is always the view center.

### transform-origin

- ID: `transform-origin`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

Stock React Native added `transformOrigin` as a style key (px / percent / keyword). Both platforms recompute when the view's frame size changes — iOS via `RCTViewComponentView.updateLayoutMetrics` (stale-dimensions bug on recycled Fabric views fixed in react-native#55796, landed in 0.85), Android via `BaseViewManager.onLayoutChange`.

Caveats:

- Three-value form (`x y z`) is parsed but only the 2D origin matters unless a non-zero `perspective` is on the same view.

### transform-style

- ID: `transform-style`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Web-only. React Native has no equivalent of `transform-style: preserve-3d`; children of a transformed view are always composited flat. v7 accepts `flat` as a no-op and dev-warns once on `preserve-3d` (`native-transform-style-preserve-3d`) with a hint about the `collapsable={false}` iOS workaround. Multi-face 3D layouts have to be hand-built with absolutely-positioned siblings and per-element `perspective` values.

### transform: matrix() / matrix3d()

- ID: `matrix-transform`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Supported
- stock React Native iOS: Partial
- stock React Native Android: Partial

Stock RN's `processTransform.js` accepts `matrix()` only with 16 or 9 numbers; the spec-canonical 6-number 2D `matrix(a,b,c,d,e,f)` fails validation, and `matrix3d` is rejected entirely as an unknown key. v7 normalizes both forms to the 16-number array spec. Bare numbers in `translateX(10)` are treated as `10px` instead of failing to parse. On react-native-web, v7 emits `matrix()` as `matrix3d()` so browsers preserve 3D context.

### transform: skewX() / skewY()

- ID: `transform-skew`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Supported
- stock React Native Android: Not supported
- Upstream PRs: [android](https://github.com/facebook/react-native/pull/56724)

iOS renders skew correctly via `CATransform3D` in both stock RN and through v6 / v7. On Android, the matrix-decomposition path silently drops the shear, so views render as rotated rectangles instead of true parallelograms. An upstream Android-only fix wires the affine matrix through `View.setAnimationMatrix` on API 29+ and threads hit-testing through it as well.

### transition

- ID: `transitions`
- Category: Animation
- styled-components v6 native: Not supported
- styled-components v7 native: Supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-transitions`
- Can I Use title: CSS3 Transitions
- Browser minimums: chrome 4, safari 5.1, firefox 5, edge 12

v7 animates eligible properties on the native thread by default. No setup, no extra import. All CSS easing keywords plus `cubic-bezier()`, `steps()`, `step-start`, `step-end`, and `linear(<stop-list>)` are supported — non-linear curves are sampled into per-frame `outputRange`s for the native driver. Web behavior is unchanged.

Caveats:

- CSS `ease` maps to the W3C `ease` curve, not React Native's `Easing.ease` (which is `ease-in`). v7 fixes that subtle mismatch.
- `prefers-reduced-motion` collapses durations to 0.

### Typographic units (ch, ex, cap, ic, lh, rlh)

- ID: `typographic-units`
- Category: Units
- styled-components v6 native: Not supported
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. v7 resolves the line-height-derived `lh` and `rlh` units on React Native: `lh` anchors at the parent's resolved `line-height`, `rlh` anchors at the root (today this is the same slot — v7 tracks only one cascaded line-height, so `lh` and `rlh` coincide except where descendants override). Glyph-metric units (`ch`, `ex`, `cap`, `ic`) have no equivalent on React Native and v7 does not fold them; pre-compute pixel values from `Dimensions` + `PixelRatio.getFontScale()` where needed.

### url() function (image references)

- ID: `url-function`
- Category: Functions
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/54996), [android](https://github.com/facebook/react-native/pull/54994)

Pass-through on web. v7's `background` shorthand parser accepts `url(...)` as an image token and forwards it to `experimental_backgroundImage`, but stock RN 0.85 only recognises gradient functions inside that key — `url()` values drop silently at the ABI. A three-PR Callstack series (JS / iOS / Android) wires native `url()` parsing into the background-image engine. Until that lands, render raster backdrops with `Image` / `ImageBackground` directly.

### user-select

- ID: `user-select`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Partial
- stock React Native Android: Partial
- Can I Use ID: `user-select-none`
- Can I Use title: CSS user-select: none
- Browser minimums: chrome 4, safari 3.1, firefox 2, edge 12

Stock React Native consumes `userSelect` only on `<Text>` (via Text.js `userSelectToSelectableMap`: `auto | text | contain | all` → `selectable: true`, `none` → `selectable: false`). On `<View>` it is a registered style attribute with no native consumer and is silently dropped. The `contain` and `all` values don't actually constrain or expand the selection on either platform.

Caveats:

- Only applies to `<Text>` on native. `<View>` accepts the style but ignores it.
- `contain` and `all` collapse to the same selectable=true behavior as `text`; no value-specific semantics are honored.

### vertical-align

- ID: `vertical-align`
- Category: Properties
- styled-components v6 native: Partial
- styled-components v7 native: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Supported
- Upstream PRs: [ios](https://github.com/facebook/react-native/pull/56774)

Android honors `vertical-align` on `Text`, `Paragraph`, and multi-line `TextInput` via `textAlignVertical`. iOS has no platform API for vertical alignment of attributed text on either primitive — v7 dev-warns (`native-vertical-align-ios`) when the prop is set on iOS, suggesting wrapping `<Text>` in a `View` with `justify-content` as a workaround. On rn-web, v7 emits an additional `align-content` value (`top → flex-start`, `middle → center`, `bottom → flex-end`) alongside the original `vertical-align` to make box-positioning keywords actually shift the content; baseline-shifting keywords (`baseline | sub | super | text-top | text-bottom | <length>`) flow through unchanged. An upstream PR adds iOS Paragraph + multi-line TextInput support, mirroring Android.

### View Transitions

- ID: `view-transitions`
- Category: At-rules
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `view-transitions`
- Can I Use title: View Transitions API (single-document)
- Browser minimums: chrome 111, safari 18, firefox 144, edge 111

Pass-through on web. Not implemented on React Native — neither stock RN nor v7 has a same-document or cross-document view-transition surface; use `react-native-reanimated`'s shared-element APIs or `LayoutAnimation` for analogous effects.

### visibility

- ID: `visibility`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Web-only. Stock React Native implements `display: none` (the view is removed from layout) but has no `visibility: hidden` style that keeps the layout box while hiding the contents. Workarounds set `opacity: 0` plus `pointerEvents: none`.

Caveats:

- `visibility: collapse` has no RN equivalent on either platform.

### white-space

- ID: `white-space`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. Stock React Native has no `whiteSpace` style and v7 does NOT polyfill it — the `text-wrap` polyfill registers under the `textWrap` property name only. Use `text-wrap: nowrap` (which IS polyfilled to `numberOfLines: 1`) or pass `numberOfLines={1}` directly. Embedded `\n` in the source preserves newlines.

### width / height

- ID: `width-height`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

React Native's `width` and `height` accept a `DimensionValue`: number (logical pixels), percent string, or `auto`. v6 and v7 both strip the `px` unit and forward the number. Stock RN's Fabric `SizeLength` parser also accepts the CSS keywords `max-content`, `fit-content`, and `stretch`. Only `min-content` is not implemented in Yoga.

### will-change

- ID: `will-change`
- Category: Other
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `will-change`
- Can I Use title: CSS will-change property
- Browser minimums: chrome 36, safari 9.1, firefox 36, edge 79

Pass-through on web. React Native has no compositor-promotion hint; transitions and `@keyframes` already run on the native thread via the v7 default `Animated`-based adapter, so the hint has nothing to map to.

### word-break / overflow-wrap

- ID: `word-break-overflow-wrap`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `word-break`
- Can I Use title: CSS3 word-break
- Browser minimums: chrome 44, safari 9, firefox 15, edge 12

Pass-through on web. Stock React Native has no `wordBreak` or `overflowWrap` style attributes; long unbroken strings clip at the container edge on both platforms and the declaration is silently dropped.

### word-spacing

- ID: `word-spacing`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. Stock React Native has no `wordSpacing` style attribute on either platform; the declaration is silently dropped on native.

### writing-mode

- ID: `writing-mode`
- Category: Properties
- styled-components v6 native: Not supported
- styled-components v7 native: Not supported
- stock React Native iOS: Not supported
- stock React Native Android: Not supported
- Can I Use ID: `css-writing-mode`
- Can I Use title: CSS writing-mode property
- Browser minimums: chrome 8, safari 5.1, firefox 41, edge 12

Pass-through on web. Yoga only implements `horizontal-tb`; React Native has no vertical writing-mode support on either platform, so logical inline / block units (`vi`, `vb`) collapse to width / height on native.

### z-index

- ID: `z-index`
- Category: Layout
- styled-components v6 native: Supported
- styled-components v7 native: Supported
- stock React Native iOS: Supported
- stock React Native Android: Supported

On Fabric the shadow-node `orderIndex_` is set from the `zIndex` prop in the platform-agnostic C++ layer, and the mounting tree is stable-sorted by it before painting on both iOS and Android. Android's `setZIndex` view-manager method is a documented no-op because the C++ ordering already covers it. v6 and v7 both pass through.

Caveats:

- RN's `zIndex` is a unitless integer; v6 and v7 both coerce a CSS number string (`z-index: 5`) down to `Number` before handing it to RN.