BASELINE NowYouCanUse.com
Web Platform Baseline Status Breakdown Total Features: 1198
Search:
Categories: All CSS (101) HTML elements (100) Selectors (46) JavaScript (43) Forms (42)
WebGL extensions (37) WebAssembly (22) Media queries (21) Fonts (19) Performance (19) Text (19) Scrolling (18) Arrays (17) Layout (17) HTML (16) Progressive web app (15) Typed arrays (14) Units (14) Canvas (13) Background (12) Color types (12) Media elements (12) Strings (12) Clipping, shapes, and masking (11) Security (11) Web components (11) WebXR (11) Typographic font features (10) Animation (9) DOM (9) Internationalization (9) Reporting (9) Text wrap (9) Workers (9) Clipboard (8) Containment (7) Fetch (7) JavaScript modules (7) Print media (7) Sensors (7) CSS object models (6) Image formats (6) Iterators (6) Landmark elements (6) Positioning (6) Promises (6) SVG (6) Storage (6) Streams (6) Container queries (5) Credential management (5) Custom elements (5) Explicit defaults (5) Font synthesis (5) HTTP (5) Messaging (5) Multi-column (5) Resource hints (5) Ruby (5) Selection (5) Speech (5) Transitions (CSS) (5) View transitions (5) Web audio (5) WebGL (5) Anchor positioning (4) Cookies (4) Counters (4) File system access (4) Flexbox (4) Gamepad (4) Grid (4) Images (4) Lists (4) Primitive types (4) Regular expressions (4) WebDriver (4) WebRTC (4) Blend mode (3) Borders and outlines (3) Geolocation (3) Gradients (3) Image scaling (3) JSON (3) Maps (3) MathML (3) Payments (3) Reading order (3) Scroll markers (3) Transforms (3) WebAuthn (3) WebGPU (3) White space (3) Worklets (3) XML (3) Collections (2) Compute pressure (2) IndexedDB (2) Parsing and serialization (2) Resource integrity (2) Sets (2) Text fragments (2) WebMCP (2) CSS environment variables (1)
Showing 30 of 35 features

Limited Availability

30 features
• In Progress / Not Yet Baseline
Limited

The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes.

Chrome 133
Firefox 155
Safari
Edge 133
Status: Incomplete cross-engine support
Limited

The window-drag: move CSS declaration sets an element as a window drag handle, like a device's app title bar. You can use this to add click-and-drag areas to an installed progressive web app, often alongside window controls overlay.

Chrome 152
Firefox
Safari
Edge 152
Status: Incomplete cross-engine support
Limited

The at-rule() function, when used with @supports, checks if a CSS at-rule is supported. For example @supports at-rule(@starting-style) checks if the @starting-style at-rule is supported.

Chrome 148
Firefox
Safari
Edge 148
Status: Incomplete cross-engine support

The overflow-clip-margin CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as overflow: clip.

Chrome
Firefox 148
Safari
Edge
Status: Incomplete cross-engine support
Limited

The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.

Chrome 93
Firefox 92
Safari 26.2
Edge 93
Status: Incomplete cross-engine support
Limited

The random() CSS function chooses a random numeric value within a specified range. This allows for dynamic, randomized styling using CSS.

Chrome
Firefox
Safari 26.2
Edge
Status: Incomplete cross-engine support
Limited

The @function CSS at-rule defines a custom function that takes CSS values or custom properties as arguments, and returns a CSS value. It can be based on conditional logic such as by using the @media at-rule.

Chrome 139
Firefox
Safari
Edge 139
Status: Incomplete cross-engine support
Limited

The if() CSS function is an inline conditional value that returns a value based on a set of conditions.

Chrome 137
Firefox
Safari
Edge 137
Status: Incomplete cross-engine support
Limited

The reading-flow CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation. The reading-order property overrides this order.

Chrome 137
Firefox
Safari
Edge 137
Status: Incomplete cross-engine support

The dynamic-range-limit CSS property controls the peak luminance of high dynamic range content. You can use this to coordinate the apparent brightness of HDR and SDR content.

Chrome 136
Firefox
Safari
Edge 136
Status: Incomplete cross-engine support
Limited

The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.

Chrome 129
Firefox
Safari
Edge 129
Status: Incomplete cross-engine support

You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.

Chrome 117
Firefox
Safari 18
Edge 117
Status: Incomplete cross-engine support

The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.

Chrome 123
Firefox
Safari
Edge 123
Status: Incomplete cross-engine support
Limited

The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property.

Chrome 117
Firefox
Safari
Edge 117
Status: Incomplete cross-engine support

The overflow: overlay CSS declaration is an alias to overflow: auto. Historically, it caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space.

Chrome 114
Firefox 112
Safari 12
Edge 114
Status: Incomplete cross-engine support
Limited

The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.

Chrome
Firefox
Safari 16.4
Edge
Status: Incomplete cross-engine support

The initial-letter CSS property sets the number of lines the first letter of an element occupies. You can use the property to make a raised capital or drop cap.

Chrome 110
Firefox
Safari
Edge 110
Status: Incomplete cross-engine support

The object-view-box CSS property crops and zooms to an inset area of an image.

Chrome 104
Firefox
Safari
Edge 104
Status: Incomplete cross-engine support
Limited

The cursor CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.

Chrome 68
Firefox 27
Safari 11
Edge 79
Status: Incomplete cross-engine support
Limited

The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>.

Chrome
Firefox 88
Safari
Edge
Status: Incomplete cross-engine support
Limited

The user-select CSS property controls which elements can be selected by the user.

Chrome 54
Firefox 69
Safari
Edge 79
Status: Incomplete cross-engine support
Limited

The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.

Chrome 65
Firefox
Safari
Edge 79
Status: Incomplete cross-engine support

The resize CSS property sets whether an element can be resized by the user, and on which axes.

Chrome 4
Firefox 5
Safari 4
Edge 79
Status: Incomplete cross-engine support

The word-break: break-word CSS declaration sets word breaks to occur according to their customary rules.

Chrome 1
Firefox 67
Safari 3
Edge 12
Status: Incomplete cross-engine support
Limited

The speak-as CSS property sets how any element's content is spoken. Not to be confused with the speak-as descriptor of @counter-style at-rules.

Chrome
Firefox
Safari 11.1
Edge
Status: Incomplete cross-engine support

The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents.

Chrome 48
Firefox 43
Safari 10.1
Edge 12
Status: Incomplete cross-engine support
Limited

The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, background: filter(url(image.png), blur(2px)).

Chrome
Firefox
Safari 9.1
Edge
Status: Incomplete cross-engine support

The rel="alternate stylesheet" attribute for the <link> HTML element offers an alternative style option to users.

Chrome
Firefox 3
Safari
Edge
Status: Incomplete cross-engine support
Limited

The ime-mode CSS property sets the state of the input method editor for text fields.

Chrome
Firefox 3
Safari
Edge
Status: Incomplete cross-engine support
Page 1 of 2 (35 features) Next →