# 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 |  |
| [!important](https://styled-components.com/docs/compatibility#important) | Other | Not supported | Partial | 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 |  |
| [@supports](https://styled-components.com/docs/compatibility#supports) | At-rules | Not supported | Partial | 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 | Partial | 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 | Partial | Supported | Partial | Partial |  |
| [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 | Supported | 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 | Supported | 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 | Partial | 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 | Partial | 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 | Partial | 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 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.

### :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 mishandled commas inside `:has(...)`; v7 compiles arbitrary nesting and comma-split arms correctly. On React Native, v7 supports `&:has(${StyledComponent})` for descendant-by-reference matching and `&:has([attr])` / `&:has([attr=value i])` for any attribute operator (including the case-insensitive flag). v6 dropped `:has(...)` on native.

Caveats:

- On native, only single-argument forms work. Compound selectors, pseudo-classes (`:has(:hover)`), combinators (`:has(.a .b)`), and selector lists (`:has(.a, .b)`) drop with a dev-warn.
- Match scope is the descendant subtree only (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 selector-list form `:not(.a, .b, [c])` tripped v6 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 supports 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 supported 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 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 `of S` to exclude SC style tags. v7 rewrites them by default in RSC. On React Native, v7 matches the full `<an+b>` grammar plus `odd` / `even` against the live sibling position. The `<an+b of <selector>>` form is also supported on native: the inner accepts a styled-component reference or a single attribute selector (same simple-inner scope as `:has()`).

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-component parent do not contribute to the count.
- On native, the `of S` inner does not accept compound selectors, combinators, or descendant chains; complex inners warn and fall through.

### :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.

### !important

- ID: `important`
- 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

v7 honors the `!important` marker within a styled component. The marker is stripped from the rendered value, beats normal declarations on the same property regardless of source order, and applies through every conditional bucket (`@media`, `@container`, `@supports`, attribute, `:hover` / `:focus` / `:active` / `:disabled`, `:has()`, `:nth-child()`, combinator). A shorthand marked `!important` propagates to every longhand. Importance flows through `var()` substitution and render-time resolvers (`light-dark()`, `env()`, viewport units, theme tokens). Web-aligned: a styled component's `!important` beats a runtime `style={{ ... }}` prop; normal declarations are still overridden by the runtime `style` prop. Stock RN parses `red !important` as a string and leaks it onto the host element with no visible color, so authoring `!important` only became safe with v7.

Caveats:

- Cross-component cascade is not yet supported: a parent's `!important font-size` cannot defeat a child's normal one. Coverage is within-component only.
- `!important` inside `@keyframes` is ignored, matching the CSS Animations spec.
- Marker is case-insensitive (`!IMPORTANT`) and whitespace between `!` and `important` is tolerated.

### @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 React Native in v7 by default; no extra setup. All CSS `animation-direction`, `animation-fill-mode`, `animation-play-state`, `animation-iteration-count`, and `animation-composition` (`replace | add | accumulate`) values work, plus per-frame easing. Coordinating-list `animation-composition` pairs with `animation-name` (comma-separated). `prefers-reduced-motion` collapses durations to 0 automatically, and `@starting-style` participates in transitions and first-mount animations. The optional reanimated adapter (`styled-components/native/reanimated`) is available for consumers that prefer to drive animations through reanimated; on rn-web, `animation-composition` flows through to the browser as native CSS.

### @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 gotcha is animation: a CSS custom property only eases between values (e.g. 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 has no 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 could swallow `@scope` or flatten its donut shape. v7 forwards `@scope` intact so the browser handles the cascade. 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 could mangle nested declarations inside `@starting-style`. v7 honors the at-rule and runs first-mount enter animations on React Native by default; no reanimated opt-in required.

Caveats:

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

### @supports

- ID: `supports`
- Category: At-rules
- 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-supports-api`
- Can I Use title: CSS.supports() API
- Browser minimums: chrome 61, safari 9, firefox 55, edge 79

Web pass-through in both versions. On React Native, v7 honors the at-rule but only the media-query feature set is understood; feature-test conditions like `(display: grid)`, `selector(:has(...))`, `font-tech()`, and `not` are not evaluated, so the inner block applies unconditionally on native.

Caveats:

- Effectively a no-op wrapper on native today; declarations inside an `@supports` block always apply. Use `Platform.OS` checks to branch native behavior.

### &: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 supports `&:hover` on React Native ≥ 0.85 via `Pressable`. Stock RN's Pressable fires hover events only when its W3C-pointer-events feature flag is enabled (defaults off in 0.85); without it no hover styles fire. The underlying iOS / Android hover infrastructure is fully wired. Always anchor with `&`, not bare `:hover` (both versions parse bare `:hover` as a descendant selector).

### &: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. `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: Partial
- stock React Native iOS: Not supported
- stock React Native Android: Not supported

Pass-through on web. Stock React Native has no form-control accent on either platform. v7 supports `accent-color: <color> | auto` on `<Switch>`. `auto` resolves to the platform accent (system blue on iOS, the colorAccent attribute on Android). Any color form is accepted: named, system keyword, hex, modern color function, theme tokens. Works on third-party Switch wrappers via `attrs()`.

Caveats:

- Cascade-style inheritance from an ancestor `accent-color` is not supported. Set the declaration directly on the form control.
- Only `<Switch>` is wired up; Checkbox, Slider, and Picker are not.

### 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. Stock RN 0.85 natively parses the bare number form (`1.5`) and the slash form (`16 / 9`); the `auto` and two-value `auto <ratio>` forms drop silently without v7. v7 supports the full CSS Sizing 4 grammar on React Native, including `auto` and `auto <ratio>`. v6 only handled the number form.

Caveats:

- The `auto` half of `auto <ratio>` only matters on replaced elements (`<Image>`); on regular views it is a no-op and v7 dev-warns.

### 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 (Chrome 133+); both versions pass the string through unchanged. React Native has no DOM attributes to read; pipe values through props or 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 supports the full Selectors 4 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. Android emulates it by switching the view to fully transparent when it crosses the 90° rotation threshold. 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 supports the full CSS Backgrounds 3 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. Each sub-property is tracked in its own row below. v7 additionally resolves CSS Color 4 system keywords inside the color slot. On native, `background-attachment: fixed`, non-`padding-box` `background-origin`, and non-`border-box` `background-clip` warn and drop. v6 forwarded a raw shorthand 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 supports `background-blend-mode` on native. Stock RN has no `backgroundBlendMode` style. 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. Gradients are covered by the dedicated row above; raster images are blocked on a three-PR upstream series 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

Pass-through on web in both versions. Stock RN 0.76+ paints `background-position` on native, currently behind the `experimental_` prefix. v7 emits the right shape so the same template works on RN and react-native-web; on rn-web the browser handles two-axis values without falling back to its default.

Caveats:

- Only meaningful when paired with `background-image` (gradients today; raster images once the upstream PR series 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

Pass-through on web in both versions. Stock RN 0.76+ paints all four keywords (`repeat`, `no-repeat`, `round`, `space`), currently behind the `experimental_` prefix. v7 emits the right shape so the same template works on RN and react-native-web.

### 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

Pass-through on web in both versions. Stock RN 0.76+ accepts `cover` / `contain` keywords and length pairs on native, currently behind the `experimental_` prefix. v7 emits the right shape and works around a 0.85 native crash by rewriting `cover` / `contain` to `auto` for native (rn-web keeps the original keyword). For gradients (the only image type that reaches native today), `cover`, `contain`, and `auto` are equivalent per spec since 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 covers every authoring-spec form on React Native: 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 start / end and block edges to top / bottom.

Caveats:

- Stock RN 0.85 only ships the legacy `borderStart*` / `borderEnd*` / `borderBlockColor*` keys; v7 maps the newer `border-inline-*` / `border-block-*` names onto those so spec-authored CSS works regardless.
- Per-edge `border-style` is not supported on native (RN has a single whole-element `borderStyle`); v7 dev-warns and drops per-edge styles. The element-level `border-style` still works.

### border-radius

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

Basic single-value and per-corner longhands pass through everywhere. v7 additionally accepts the slash-separated CSS grammar (`10px / 10px`) on native when it resolves to a circular radius; v6 and stock RN drop the slash form because RN has no per-axis radius surface to map it to. Truly elliptical combinations (different horizontal and vertical radii) drop in v7 too, with a dev-warn.

### 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 normalizes `border: none` to `border-style: none` (v6 emitted `solid`), and `hidden` resolves to no border on native (was previously misrendered). Repeated sides collapse without noise; mixed sides keep the first drawable style with a dev-warn. Other web keywords (`double`, `groove`, `ridge`, `inset`, `outset`) 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. v7 additionally resolves CSS Color 4 system keywords inside the color slot so they paint on native (stock RN drops the whole shadow if a system keyword appears).

### 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 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 supports `calc()` / `clamp()` / `min()` / `max()` on React Native, plus the CSS Values 4 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. v6 supported only fully-static cases. 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:

- The keywords `infinity`, `-infinity`, and `NaN` cannot be represented in RN dimensions; v7 drops the declaration with a dev-warn. Use a large literal or viewport unit instead.
- All math functions compose inside `calc()`. Mixed dynamic operands (viewport units, container units, theme tokens, `var()`) re-resolve 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

Pass-through on web. v7 supports `caret-color` on Android `<TextInput>`. iOS has no caret-only API in RN (the only surface tints the selection range too, violating the CSS spec) so the property has no effect on iOS and v7 dev-warns.

Caveats:

- Reliable on Android API 29+; Android 9 silently no-ops, and older versions are unreliable.

### 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` on React Native against the 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 recognize the unit 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 evaluates it on React Native and converts 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 resolves container-query units against the nearest ancestor container on React Native; stock RN does not recognize the unit strings. 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: Supported
- 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

Declare `--name: value` on any styled component and descendants read it back through `var(--name, fallback)`. v7 honors the full CSS Variables L1 contract: fallbacks, nested resolution in both the name and fallback arguments, cycle detection, case-sensitive names, quote-aware skip inside string values, and `--foo: initial` resetting to the guaranteed-invalid value (so a downstream `var(--foo, fallback)` substitutes the fallback). References resolve against the cascade inside every conditional bucket (`@media`, `@container`, `@supports`, attribute, pseudo-state, `:has()`, `:nth-child()`, combinator). Substituted values flow through the same value pipeline as authored CSS, so a shorthand interpolation (`margin: var(--spacing)` with `--spacing: 4px 8px`) still expands to longhands. `createTheme()` (v6.4+) builds on the same primitive: every leaf becomes a `var(--prefix-path, fallback)` string usable in both web and native components.

Caveats:

- Dev builds warn on a render-time `var()` only when no ancestor declared the property AND no fallback is provided.
- `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 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 normalizes nesting at build time before the browser sees it; v7 emits native CSS Nesting when the targeted browsers support it. On React Native, v7 resolves nested rules through the runtime; v6 only flattened simple ampersand cases.

Caveats:

- Always anchor pseudo-states with `&:hover`, never bare `:hover`. Both versions treat a bare pseudo as a descendant selector.

### 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 17+ honors only the `pointer` keyword; the 30+ other CSS cursor values parse but have no effect. 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. Stock RN accepts `direction` on ViewStyle (`inherit | ltr | rtl`); root-node default tracks the device locale. v7 also drives `<Text>` paragraph-level bidi on native so reordering follows the cascade without an extra prop. 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 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

Pass-through on web. v7 resolves these on React Native against the window dimensions and re-resolves on orientation change; stock RN does not recognize the unit strings. The four variants (default `v*`, `sv*`, `lv*`, `dv*`) collapse to a single value on native because RN has 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 supports `env()` per CSS Environment Variables Level 1 (recognized names, fallbacks, recursive fallback substitution). Safe-area insets currently resolve to 0 on React Native; until the runtime wires up `react-native-safe-area-context`, `env(safe-area-inset-top, 47px)` returns 0 because recognized names ignore their 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`, engaging each platform native height-fitting measure pass. `fixed` is a no-op. Author-supplied `min-height` / `max-height` still bound the field. v7 dev-warns 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+ consumes a CSS `filter` string. On iOS (default Fabric), only `brightness` and `opacity` apply; `blur`, `grayscale`, `saturate`, `contrast`, `hue-rotate`, and `drop-shadow` need the SwiftUI filter backend opt-in (off by default in 0.85 / 0.86-rc.0). `invert` and `sepia` are accepted 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+. v7 additionally resolves CSS Color 4 system keywords inside `drop-shadow()` so they paint on native.

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 work natively. The `flex` shorthand is parsed by both versions. 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 RN.

### 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 (flexbox-first); 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 accepts 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 dev-warn (RN has no fallback chain). v6 dropped the whole declaration silently for stacks. Round-trips on web.

Caveats:

- v7 resolves 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 also recognizes the `ui-*` keywords natively. 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, `Npx`, viewport units (`vh`, `vw`, `svh`, `dvh`, `vi`, `vb`, `vmin`, `vmax` and the `s*` / `l*` / `d*` variants), container query units (`cqh`, `cqw`, `cqi`, `cqb`, `cqmin`, `cqmax`), font-relative units (`em`, `rem` against the cascade, `lh` / `rlh` against line-height, font-metric `ex` / `cap` / `ch` / `ic` and `r`-prefixed via the spec-prescribed approximations of em), and absolute lengths (`pt`, `pc`, `in`, `cm`, `mm`, `Q` fold to dp at compile time using the CSS Values 4 §5.2 fixed ratios). The CSS absolute-size keywords (`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large`) resolve to 9, 10, 13, 16, 18, 24, 32, 48 across iOS, Android, and web for parity; relative keywords (`smaller` / `larger`) step the absolute-size ramp against the inherited size or scale by 1.2 otherwise. Font-width keywords (`condensed`, `expanded`) and CSS system fonts (`caption`, `menu`, etc.) drop with a dev-warn that names the offending keyword. v6 only handled bare numbers and `px`; `em` / `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 maps `oblique` to italic, and degrades `oblique <angle>` to italic with a dev-warn (the angle is ignored). v6 dropped the bare `oblique` declaration. 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 supports `small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`, and `stylistic-one` through `stylistic-twenty`. Android handles a superset: also the common / discretionary / historical `*-ligatures` pairs (with `no-*` variants) and `contextual` / `no-contextual`. v6 and v7 both forward space-separated values to RN.

### 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. RN's named-weight aliases (`ultralight`, `thin`, `medium`, `semibold`, `heavy`, `black`) are only accepted by the legacy paper bridge on iOS; the New Architecture default in 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

Stock RN 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 does not re-resolve `hwb()` at render time, so theme tokens embedded in channels (`hwb(${t.h} 0% 0%)`) are not substituted. Use `oklch` / `oklab` / `lch` / `lab` / `color-mix` for theme-driven 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 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-value style keys. v7 supports the multi-value CSS shorthand (`inset: 10px 20px`) by expanding to per-edge values, so spec-authored CSS works on every target. v6 forwarded only single-value forms.

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. v7 supports `interactivity: inert` on React Native: the subtree is non-interactive and hidden from accessibility services. `auto` is a no-op. On rn-web, the keyword passes through to the browser.

Caveats:

- A focusable child inside an `inert` subtree can still receive D-pad / keyboard focus on Android / tvOS because RN does not propagate the focusable flag to descendants. v7 dev-warns when this can happen.

### 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+ accepts `isolation: auto | isolate`. iOS contributes only to z-ordering, not a real compositing isolation layer. Android silently drops the prop, but 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: Supported
- 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. v6 accepts only bare numbers and `Npx`; `em` / `rem` strings drop silently on native. v7 routes font-relative units (`em`, `rem`, `lh`, `rlh`) through the cascade resolver that already powers other length properties, so the inherited font-size folds in at render time. rn-web stays a pass-through.

### 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 against the device color scheme. Stock RN does not parse the function. v7 additionally resolves the CSS Color 4 system-color keywords (`canvas`, `canvastext`, `field`, `fieldtext`, `graytext`, `highlight`, `highlighttext`, `linktext`, `visitedtext`, `activetext`) to platform-appropriate light / dark colors, including inside composite shorthands (`box-shadow`, `filter: drop-shadow()`, `background`, `linear-gradient` color stops).

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+). v7 supports `line-clamp: N` 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 centers 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+ paints `linear-gradient()` and (0.80+) `radial-gradient()`, plus their `repeating-*` variants. v7 emits the right native shape so the same template works on RN and react-native-web; v6 dropped gradient strings on native. v7 additionally resolves CSS Color 4 system keywords inside gradient stops so they paint on native. Conic gradients are not implemented in stock RN on either platform; v7 forwards the string but it does not paint on native.

Caveats:

- Linear / radial: web pass-through plus native paint.
- Conic: web-only. Approximate on native with a layered radial-gradient and image mask, or use `react-native-skia` for true sweep painting.
- Raster `background-image: url()` is tracked separately under its own row (upstream PRs in flight).

### 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 mirrors physical properties; logical properties are direction-agnostic by definition.

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 and accept the same value shape as `width` / `height` (number, percent string, `auto`, plus `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 forwards `mix-blend-mode` to native. iOS handles all 15 non-`normal` blend modes from CSS Compositing 1. Android needs API 29+ (Android 10); the prop is silently dropped on API 24-28.

Caveats:

- Gamma-sensitive modes (color-burn, soft-light, overlay, hard-light) appear more saturated than on web because iOS and Android blend in linear-light on Display P3 devices.
- On react-native-web, every View is a stacking context by default. 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

Stock RN accepts all 147 CSS named colors plus `transparent` on both platforms, but its matcher is case-sensitive (lowercase only; uppercase `RED` will not match). `currentcolor` is web-only: RN has no cascading `color` to inherit, so the value normalizes to transparent on native.

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+ accepts the four CSS keywords on `<Image>` (fill / contain / cover / scale-down / none). v7 makes the same authored CSS work on rn-web Image too. `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

Pass-through on web in both versions. v7 also resolves these on React Native to sRGB, gamut-mapping wide-gamut inputs while preserving hue. Stock RN only recognizes hex / rgb / hsl / hwb, so the modern spaces would otherwise drop. v7 additionally 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()`. Theme-token bases re-resolve at render time.

Caveats:

- Percent channels follow CSS Color 4 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 resolved on native; 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-flavored 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.
- `hidden` is not a legal outline style per spec. v7 drops the declaration with a dev-warn; use `outline-style: none` to remove the outline.

### 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 views don't clip by default; Android views 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: Partial
- 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. v7 supports `overscroll-behavior: contain | none` on `<ScrollView>` and `<FlatList>`, disabling iOS rubber-banding and the Android edge glow. `auto` uses the platform defaults.

Caveats:

- The `overscroll-behavior-x` / `-y` longhands are not split out; RN has no per-axis overscroll surface.
- Only scrollable primitives consume it. On a plain `View`, the declaration has no effect.

### 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, 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. 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 analog; the vanishing point sits at the center 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`. The align axis flows through on native; the justify axis is silently dropped by RN but reaches the browser on rn-web. v7 forwards the full place-content grammar (`baseline`, `normal`, `safe`, `unsafe`, `left`, `right`) verbatim to rn-web so the browser handles the keywords it understands; native keeps the narrower flex keyword set.

### 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. RN accepts `pointerEvents` as a style key on both platforms (the legacy View prop is 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 on native: `rem` multiplies against the root font-size (default 16, configurable via cascade), `em` anchors at the parent's resolved `font-size`. They compose inside `calc()` and any length context (width, padding, margin, gap, font-size, etc.). v6 did not resolve 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: Partial
- 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. v7 supports `scrollbar-width: none` on `<ScrollView>` and `<FlatList>` to hide scroll indicators. `auto` and `thin` use the platform defaults (RN has no thin-scrollbar surface).

### 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 additionally maps `start` to a locale-aware natural alignment; stock Android does not recognize `start` / `end` and silently falls back to start-aligned. v7 brings both platforms to spec by resolving `start` / `end` / `match-parent` at render time against the inherited `direction`.

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 supports `solid`, `double`, `dashed`, and `dotted` (for both underline and strikethrough). `wavy` cannot be drawn on either platform; v7 falls back to `solid` with a dev-warn on native (rn-web keeps `wavy` so the browser handles it). Android ignores the property entirely on native; 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: Partial
- 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. v7 supports `text-overflow: ellipsis | clip` on `<Text>` once a line limit is set; pair with `line-clamp: N` (or `text-wrap: nowrap` for one line). Without a line limit there is no line to ellipsize and the value is a no-op. The spec's two-value form (`text-overflow: <start> <end>`) and string-value overflow markers are not supported on native.

Caveats:

- Only `<Text>` consumes it on native.
- Requires a companion line limit (`line-clamp`, or `text-wrap: nowrap` for one line). Without one, RN has no line to ellipsize and the value is dropped.
- `head` and `middle` ellipsize positions are RN-only (no CSS analog); reach them via the `numberOfLines` and `ellipsizeMode` props directly.

### 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 via individual `textShadowOffset` / `textShadowRadius` / `textShadowColor` keys but does not parse the CSS `text-shadow` shorthand string. v7 polyfills the shorthand `<offset-x> <offset-y> [<blur>] [<color>]` into those 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 longhands (`text-wrap-mode`, `text-wrap-style`) on React Native. `nowrap` (and the shorthand) lift `numberOfLines: 1` on `<Text>`. `balance` and `pretty` map to Android `textBreakStrategy` (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 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. Values follow RN's `DimensionValue` shape: a number, an `Npx` length, an `N%` percent string, or `auto`. Ems, viewport units, and other CSS lengths are not natively understood; v7 resolves the dynamic ones through its own runtime. The upstream Callstack PR #56162 would wire dynamic `calc()` resolution into stock RN for layout properties.

### 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 `transform-box` 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 on native (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 accepts `transform-origin` (px / percent / keyword) and recomputes when the view's frame size changes. A stale-dimensions bug on recycled Fabric views was fixed in 0.85 (react-native#55796).

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 on `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 only accepts `matrix()` with 16 or 9 numbers; the spec-canonical 6-number 2D form fails validation, and `matrix3d` is rejected entirely. v7 normalizes both forms so spec-authored CSS works. 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 through stock RN and both versions of styled-components. On Android, the matrix decomposition silently drops the shear, so views render as rotated rectangles instead of true parallelograms. An upstream Android fix is in flight (API 29+).

### 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 or 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 curves 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 units `lh` and `rlh` on React Native: `lh` anchors at the parent's resolved `line-height`, `rlh` anchors at the root (today these coincide except where descendants override). Glyph-metric units (`ch`, `ex`, `cap`, `ic`) have no equivalent on React Native and v7 does not resolve them; pre-compute pixel values from `Dimensions` and `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 accepts `url(...)` in the `background` shorthand and forwards it to the native background-image slot, but stock RN 0.85 only paints gradient functions there; raster `url()` values drop silently on native. A three-PR Callstack series wires `url()` parsing through. Until that lands, render raster backdrops with `Image` or `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>`: `auto | text | contain | all` map to `selectable: true`, `none` maps to `selectable: false`. On `<View>` the style is silently dropped. `contain` and `all` 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`. iOS has no platform API for vertical alignment of attributed text; v7 dev-warns on iOS and suggests wrapping `<Text>` in a `View` with `justify-content` as a workaround. On rn-web, v7 maps box-positioning keywords (`top` / `middle` / `bottom`) to `align-content` so they actually shift the content; baseline-shifting keywords (`baseline | sub | super | text-top | text-bottom | <length>`) flow through unchanged. An upstream PR adds iOS 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 analog 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. Workaround: combine `opacity: 0` with `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. Use `text-wrap: nowrap` (which v7 does polyfill 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

Stock RN accepts a number (logical pixels), percent string, or `auto`. v6 and v7 both strip the `px` unit and forward the number. Stock RN 0.85 also accepts the CSS keywords `max-content`, `fit-content`, and `stretch`. Only `min-content` is not implemented.

### 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

Pass-through on web. Stock RN sorts children by `zIndex` before painting on both iOS and Android. v6 and v7 both forward the value.

Caveats:

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