Browser Feature Watch

This page serves as an one-stop shop to keep track of feature support across the major, modern browsers, ordered by level of support. Updated automatically daily.

Chrome Edge Firefox Opera Safari Android Browser Chrome (Android) Firefox (Android) Safari (iOS) Samsung Internet
@container10610611094161241241251620
:has()1051051219115.412412412515.420
Cascade Layers9999978615.412412412515.418
subgrid11711771103161241241251624
color()11111111398151241241251522
oklch()1111111139715.411111111315.422.0
oklab()1111111139715.411111111315.422.0
lab()/lch()11111111398151241241251522
hwb()101101968715101101961519.0
color-mix()1111111139716.211111111316.222.0
Viewport Unit Variants1081081019415.412412412515.421
:focus-visible868647215.412412412515.414
font-palette1011051078715.412412412515.419
Comparison Functions7979756613.112412412513.412
Trigonometry Functions1111111089715.411111110815.422.0
Numeric Constants1091091089515.410910910815.421.0
:is()88887875141241241251415
Logical Properties89896676151241241251515
inert Attribute1021021128815.510210211215.519.0
CSS Variables4916313610124124125105
linear()412410.53.1418421.0
popover Attribute114114125100171141141251723.0
<dialog>3779982415.412412412515.44
accent-color9393927915.493939215.417.0
Media Queries Range Syntax104104639116.412412412516.420
Nesting12012011710617.212412412517.224
Exponential Functions12012011810615.412012011815.4No
Intrinsic & Extrinsic Sizing227912815164.4124125164
@property8585P7116.48585No16.414.0
Colrv1 Font Formats989810786No124124125No18
is Attribute67796354No676763No9.0
Relative Colors119119No10616.4124124No16.4No
Web Share API12795NoNo12.1No12412512.28.2
animation-timeline115115110101No115115NoNo23.0
::target-text8989No75No8989NoNo15.0
View Transition API111111No97No124124NoNo23
Stepped Value FunctionsNoNo118No15.4NoNo11815.4No
Sign-Related FunctionsNoNo118No15.4NoNo11815.4No
font-size-adjustNoNo118No17NoNo12517No
text-wrap12712412110917.5124124No17.524
margin-trimNoNoNoNo16.4NoNoNo16.4No
@scopeNoNo21NoNoNoNoNoNoNo
color-contrast()NoNoNoNo15NoNoNo15No
@when/@elseNoNoNoNoNoNoNoNoNoNo
@scroll-timelineNoNoNoNoNoNoNoNoNoNo
attr()NoNoNoNoNoNoNoNoNoNo

@container CSS Permalink

Like media queries, but even better. Basically, allows us to write context-aware CSS by querying an element’s parent.

Desktop support:

  • Chrome: 106
  • Edge: 106
  • Firefox: 110
  • Opera: 94
  • Safari: 16

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 16
  • Samsung Internet: 20

css-container-queries

Browser support data for css-container-queries comes from caniuse.com and is up-to-date as of .

:has() CSS Permalink

The fabled “parent selector”! This allows us to finally style an element based on its children.

Desktop support:

  • Chrome: 105
  • Edge: 105
  • Firefox: 121
  • Opera: 91
  • Safari: 15.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15.4
  • Samsung Internet: 20

css-has

Browser support data for css-has comes from caniuse.com and is up-to-date as of .

Cascade Layers CSS Permalink

Gives us tighter control on the reigns of the cascade. This adds a layer of complexity to specificity in our CSS but allows us to designate different parts of our CSS to different layers, much like the concept of stacking with z-index. This complexity actually makes the practise of overriding selector specificity, using !important (proactively!), and a number of other silly tricks we've added to our toolkit over the years.

Desktop support:

  • Chrome: 99
  • Edge: 99
  • Firefox: 97
  • Opera: 86
  • Safari: 15.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15.4
  • Samsung Internet: 18

css-cascade-layers

Browser support data for css-cascade-layers comes from caniuse.com and is up-to-date as of .

subgrid CSS Permalink

Allows grid to cascade into children of a grid container, rather than the need for a flat layout.

Desktop support:

  • Chrome: 117
  • Edge: 117
  • Firefox: 71
  • Opera: 103
  • Safari: 16

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 16
  • Samsung Internet: 24

css-subgrid

Browser support data for css-subgrid comes from caniuse.com and is up-to-date as of .

color() CSS Permalink

Specify a color in a different color space.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Opera: 98
  • Safari: 15

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15
  • Samsung Internet: 22

css-color-function

Browser support data for css-color-function comes from caniuse.com and is up-to-date as of .

oklch() CSS Permalink

The oklch() functional notation expresses a given color in the OKLCH color space.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Opera: 97
  • Safari: 15.4

Mobile support:

  • Android Browser: 111
  • Chrome (Android): 111
  • Firefox (Android): 113
  • Safari (iOS): 15.4
  • Samsung Internet: 22.0

oklch

Browser support data for oklch comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

oklab() CSS Permalink

The oklab() functional notation expresses a given color in the OKLAB color space.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Opera: 97
  • Safari: 15.4

Mobile support:

  • Android Browser: 111
  • Chrome (Android): 111
  • Firefox (Android): 113
  • Safari (iOS): 15.4
  • Samsung Internet: 22.0

oklab

Browser support data for oklab comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

lab()/lch() CSS Permalink

Alternate, more-understandable color functions. lab() defines colors using lightness and a and b values which define the hue. lch() defines colors using lightness, chroma, and hue.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Opera: 98
  • Safari: 15

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15
  • Samsung Internet: 22

css-lch-lab

Browser support data for css-lch-lab comes from caniuse.com and is up-to-date as of .

hwb() CSS Permalink

Define colors using hue, whiteness, and blackness.

Desktop support:

  • Chrome: 101
  • Edge: 101
  • Firefox: 96
  • Opera: 87
  • Safari: 15

Mobile support:

  • Android Browser: 101
  • Chrome (Android): 101
  • Firefox (Android): 96
  • Safari (iOS): 15
  • Samsung Internet: 19.0

hwb

Browser support data for hwb comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

color-mix() CSS Permalink

Mixes two colors together.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Opera: 97
  • Safari: 16.2

Mobile support:

  • Android Browser: 111
  • Chrome (Android): 111
  • Firefox (Android): 113
  • Safari (iOS): 16.2
  • Samsung Internet: 22.0

css-color-mix

Browser support data for css-color-mix comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

Viewport Unit Variants CSS Permalink

Small, large, and dynamic viewport units allow us clearer and more concise definitions for layout.

Desktop support:

  • Chrome: 108
  • Edge: 108
  • Firefox: 101
  • Opera: 94
  • Safari: 15.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15.4
  • Samsung Internet: 21

viewport-unit-variants

Browser support data for viewport-unit-variants comes from caniuse.com and is up-to-date as of .

:focus-visible CSS Permalink

More discrete condition for focus styles.

Desktop support:

  • Chrome: 86
  • Edge: 86
  • Firefox: 4
  • Opera: 72
  • Safari: 15.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15.4
  • Samsung Internet: 14

css-focus-visible

Browser support data for css-focus-visible comes from caniuse.com and is up-to-date as of .

font-palette CSS Permalink

Define a palette from a color font.

Desktop support:

  • Chrome: 101
  • Edge: 105
  • Firefox: 107
  • Opera: 87
  • Safari: 15.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15.4
  • Samsung Internet: 19

css-font-palette

Browser support data for css-font-palette comes from caniuse.com and is up-to-date as of .

Comparison Functions CSS Permalink

Brings min(), max(), and clamp() to CSS.

Desktop support:

  • Chrome: 79
  • Edge: 79
  • Firefox: 75
  • Opera: 66
  • Safari: 13.1

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 13.4
  • Samsung Internet: 12

css-math-functions

Browser support data for css-math-functions comes from caniuse.com and is up-to-date as of .

Trigonometry Functions CSS Permalink

Brings sin(), cos(), tan(), asin(), acos(), atan(), and atan2() to CSS.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: 108
  • Opera: 97
  • Safari: 15.4

Mobile support:

  • Android Browser: 111
  • Chrome (Android): 111
  • Firefox (Android): 108
  • Safari (iOS): 15.4
  • Samsung Internet: 22.0

trig-funcs

Browser support data for trig-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

Numeric Constants CSS Permalink

Brings the numeric constants e and pi to CSS.

Desktop support:

  • Chrome: 109
  • Edge: 109
  • Firefox: 108
  • Opera: 95
  • Safari: 15.4

Mobile support:

  • Android Browser: 109
  • Chrome (Android): 109
  • Firefox (Android): 108
  • Safari (iOS): 15.4
  • Samsung Internet: 21.0

calc-constants

Browser support data for calc-constants comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

:is() CSS Permalink

Takes a list of selectors as its argument and targets any matching selector in the list. I find it useful for grouping headings, types of elements, and even interaction-based pseudo-classes for anchors, buttons, and the like.

Desktop support:

  • Chrome: 88
  • Edge: 88
  • Firefox: 78
  • Opera: 75
  • Safari: 14

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 14
  • Samsung Internet: 15

css-matches-pseudo

Browser support data for css-matches-pseudo comes from caniuse.com and is up-to-date as of .

Logical Properties CSS Permalink

Properties used to define size-based values, what we’re used as being width, height, margin-left, and so on, but in such a way that works hand-in-hand with writing-mode without the need to redefine the “top” or “bottom” of an element to do so.

Desktop support:

  • Chrome: 89
  • Edge: 89
  • Firefox: 66
  • Opera: 76
  • Safari: 15

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15
  • Samsung Internet: 15

css-logical-props

Browser support data for css-logical-props comes from caniuse.com and is up-to-date as of .

inert Attribute HTML Permalink

An HTML attribute that allows you designate parts of your document as inactive, disallowing any interaction (mouse/keyboard/otherwise) within those elements.

Desktop support:

  • Chrome: 102
  • Edge: 102
  • Firefox: 112
  • Opera: 88
  • Safari: 15.5

Mobile support:

  • Android Browser: 102
  • Chrome (Android): 102
  • Firefox (Android): 112
  • Safari (iOS): 15.5
  • Samsung Internet: 19.0

inert

Browser support data for inert comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

CSS Variables CSS Permalink

Allows a declaring of native, cascading variables in CSS.

Desktop support:

  • Chrome: 49
  • Edge: 16
  • Firefox: 31
  • Opera: 36
  • Safari: 10

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 10
  • Samsung Internet: 5

css-variables

Browser support data for css-variables comes from caniuse.com and is up-to-date as of .

linear() CSS Permalink

Allows defining more complex mathematical functions to describe the rate of change for numerical value changes.

Desktop support:

  • Chrome: 4
  • Edge: 12
  • Firefox: 4
  • Opera: 10.5
  • Safari: 3.1

Mobile support:

  • Android Browser: 4
  • Chrome (Android): 18
  • Firefox (Android): 4
  • Safari (iOS): 2
  • Samsung Internet: 1.0

easing-function

Browser support data for easing-function comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

popover Attribute HTML Permalink

An HTML attribute to get and set the popover state of an element via JavaScript.

Desktop support:

  • Chrome: 114
  • Edge: 114
  • Firefox: 125
  • Opera: 100
  • Safari: 17

Mobile support:

  • Android Browser: 114
  • Chrome (Android): 114
  • Firefox (Android): 125
  • Safari (iOS): 17
  • Samsung Internet: 23.0

popover

Browser support data for popover comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

<dialog> HTML Permalink

An HTML element to create a custom dialog box much like a modal window and includes a backdrop pseudo element.

Desktop support:

  • Chrome: 37
  • Edge: 79
  • Firefox: 98
  • Opera: 24
  • Safari: 15.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 15.4
  • Samsung Internet: 4

dialog

Browser support data for dialog comes from caniuse.com and is up-to-date as of .

accent-color CSS Permalink

Allows defining the accent color used for UI controls generated by some elements (forms, media, etc.).

Desktop support:

  • Chrome: 93
  • Edge: 93
  • Firefox: 92
  • Opera: 79
  • Safari: 15.4

Mobile support:

  • Android Browser: 93
  • Chrome (Android): 93
  • Firefox (Android): 92
  • Safari (iOS): 15.4
  • Samsung Internet: 17.0

accent-color

Browser support data for accent-color comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

Media Queries Range Syntax CSS Permalink

Adds syntax improvements to media queries to better describe ranges and comparison operators.

Desktop support:

  • Chrome: 104
  • Edge: 104
  • Firefox: 63
  • Opera: 91
  • Safari: 16.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 16.4
  • Samsung Internet: 20

css-media-range-syntax

Browser support data for css-media-range-syntax comes from caniuse.com and is up-to-date as of .

Nesting CSS Permalink

This one is a huge part of what makes Sass/SCSS so appealing to developers. There will always be a value in pre-rendering some parts of our CSS, but I’m excited to see more features like this that will make life easier for developers all the way through from “beginner” to “expert”.

Desktop support:

  • Chrome: 120
  • Edge: 120
  • Firefox: 117
  • Opera: 106
  • Safari: 17.2

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 17.2
  • Samsung Internet: 24

css-nesting

Browser support data for css-nesting comes from caniuse.com and is up-to-date as of .

Exponential Functions CSS Permalink

Brings pow(), sqrt(), hypot(), log(), and exp() to CSS.

Desktop support:

  • Chrome: 120
  • Edge: 120
  • Firefox: 118
  • Opera: 106
  • Safari: 15.4

Mobile support:

  • Android Browser: 120
  • Chrome (Android): 120
  • Firefox (Android): 118
  • Safari (iOS): 15.4
  • Samsung Internet: No

exponent-funcs

Browser support data for exponent-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

Intrinsic & Extrinsic Sizing CSS Permalink

Allows defining size using intrinsic values: max-content, min-content, fit-content, and stretch.

Desktop support:

  • Chrome: 22
  • Edge: 79
  • Firefox: 128
  • Opera: 15
  • Safari: 16

Mobile support:

  • Android Browser: 4.4
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 16
  • Samsung Internet: 4

intrinsic-width

Browser support data for intrinsic-width comes from caniuse.com and is up-to-date as of .

@property CSS Permalink

Gives us the ability to explicitly define our CSS custom properties, including type-checking, default values, and ability to cascade the value.

Desktop support:

  • Chrome: 85
  • Edge: 85
  • Firefox: Preview
  • Opera: 71
  • Safari: 16.4

Mobile support:

  • Android Browser: 85
  • Chrome (Android): 85
  • Firefox (Android): No
  • Safari (iOS): 16.4
  • Samsung Internet: 14.0

at-rules

Browser support data for at-rules comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

Colrv1 Font Formats CSS Permalink

A font format with additional graphic capabilities: different colours, gradients, and blend modes to name a few.

Desktop support:

  • Chrome: 98
  • Edge: 98
  • Firefox: 107
  • Opera: 86
  • Safari: No

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): No
  • Samsung Internet: 18

colr-v1

Browser support data for colr-v1 comes from caniuse.com and is up-to-date as of .

is Attribute HTML Permalink

An HTML attribute to allow specifying a standard HTML element to behave like a custom element.

Desktop support:

  • Chrome: 67
  • Edge: 79
  • Firefox: 63
  • Opera: 54
  • Safari: No

Mobile support:

  • Android Browser: 67
  • Chrome (Android): 67
  • Firefox (Android): 63
  • Safari (iOS): No
  • Samsung Internet: 9.0

is

Browser support data for is comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

Relative Colors CSS Permalink

Gives us the ability to generate colours from other colours, with the ability to destructure the colour channels and manipulate them on the way.

Desktop support:

  • Chrome: 119
  • Edge: 119
  • Firefox: No
  • Opera: 106
  • Safari: 16.4

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): No
  • Safari (iOS): 16.4
  • Samsung Internet: No

relative-colors

Browser support data for relative-colors comes from caniuse.com and is up-to-date as of .

Web Share API HTML Permalink

“A way to allow websites to invoke the native sharing capabilities of the host platform”

Desktop support:

  • Chrome: 127
  • Edge: 95
  • Firefox: No
  • Opera: No
  • Safari: 12.1

Mobile support:

  • Android Browser: No
  • Chrome (Android): 124
  • Firefox (Android): 125
  • Safari (iOS): 12.2
  • Samsung Internet: 8.2

web-share

Browser support data for web-share comes from caniuse.com and is up-to-date as of .

animation-timeline CSS Permalink

Allows specifying a timeline to control the progress of a CSS animation.

Desktop support:

  • Chrome: 115
  • Edge: 115
  • Firefox: 110
  • Opera: 101
  • Safari: No

Mobile support:

  • Android Browser: 115
  • Chrome (Android): 115
  • Firefox (Android): No
  • Safari (iOS): No
  • Samsung Internet: 23.0

mdn-css_properties_animation-timeline

Browser support data for mdn-css_properties_animation-timeline comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

::target-text CSS Permalink

Represents the text that has been scrolled to if the browser supports scroll-to-text fragments, and allows styling similarly to ::selection.

Desktop support:

  • Chrome: 89
  • Edge: 89
  • Firefox: No
  • Opera: 75
  • Safari: No

Mobile support:

  • Android Browser: 89
  • Chrome (Android): 89
  • Firefox (Android): No
  • Safari (iOS): No
  • Samsung Internet: 15.0

target-text

Browser support data for target-text comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

View Transition API CSS Permalink

Allows defining visual transitions which react to state changes, e.g. navigating between pages.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: No
  • Opera: 97
  • Safari: No

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): No
  • Safari (iOS): No
  • Samsung Internet: 23

view-transition

Browser support data for view-transition comes from caniuse.com and is up-to-date as of .

Stepped Value Functions CSS Permalink

Brings round(), mod(), and rem() to CSS.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: 118
  • Opera: No
  • Safari: 15.4

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): 118
  • Safari (iOS): 15.4
  • Samsung Internet: No

stepped-value-funcs

Browser support data for stepped-value-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

Sign-Related Functions CSS Permalink

Brings abs() and sign() to CSS.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: 118
  • Opera: No
  • Safari: 15.4

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): 118
  • Safari (iOS): 15.4
  • Samsung Internet: No

sign-funcs

Browser support data for sign-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

font-size-adjust CSS Permalink

Provides the ability to modify the size of a font as a numeric mulitplier of the font size.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: 118
  • Opera: No
  • Safari: 17

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): 125
  • Safari (iOS): 17
  • Samsung Internet: No

font-size-adjust

Browser support data for font-size-adjust comes from caniuse.com and is up-to-date as of .

text-wrap CSS Permalink

Evenly distributes words across multiple lines to prevent widows.

Desktop support:

  • Chrome: 127
  • Edge: 124
  • Firefox: 121
  • Opera: 109
  • Safari: 17.5

Mobile support:

  • Android Browser: 124
  • Chrome (Android): 124
  • Firefox (Android): No
  • Safari (iOS): 17.5
  • Samsung Internet: 24

text-wrap

Browser support data for text-wrap comes from caniuse.com and is up-to-date as of .

margin-trim CSS Permalink

Allows a container to trim the margins of its children’s adjoining edges.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: No
  • Opera: No
  • Safari: 16.4

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): 16.4
  • Samsung Internet: No

margin-trim

Browser support data for margin-trim comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

@scope CSS Permalink

Allows for CSS rules to be scoped to part of the DOM based on the position of the subject to be styled.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: 21
  • Opera: No
  • Safari: No

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): No
  • Samsung Internet: No

style-scoped

Browser support data for style-scoped comes from caniuse.com and is up-to-date as of .

color-contrast() CSS Permalink

Given one color, chooses from a list of other colors to output the one with the highest contrast.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: No
  • Opera: No
  • Safari: 15

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): 15
  • Samsung Internet: No

css-color-contrast

Browser support data for css-color-contrast comes from MDN’s browser-compat-data and is up-to-date as of version 5.5.23.

@when/@else CSS Permalink

Similar to conditionals in other programming languages. Could be useful for making complex media queries more logical.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: No
  • Opera: No
  • Safari: No

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): No
  • Samsung Internet: No

css-when-else

Browser support data for css-when-else comes from caniuse.com and is up-to-date as of .

@scroll-timeline CSS Permalink

Native-CSS animations based on scroll position—no more need for JS!

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: No
  • Opera: No
  • Safari: No

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): No
  • Samsung Internet: No

css-scroll-timeline

Browser support data for css-scroll-timeline comes from caniuse.com and is up-to-date as of .

attr() CSS Permalink

Expands the use of the attr() function by making it available to more properties and by allowing a type or unit to be passed alongside the targetted attribute. This could be used for things like passing a url-type attribute to background-image.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: No
  • Opera: No
  • Safari: No

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): No
  • Samsung Internet: No

css3-attr

Browser support data for css3-attr comes from caniuse.com and is up-to-date as of .

Array.prototype.at() JavaScript Permalink

Like indexOf() but allows us to pass a negative integer, rather than hinging upon the array’s length.

Because this is still an experimental feature, data is currently unavailable.


A lot of inspiration for this living collection comes from Michelle Barker, who wrote about upcoming browser features on Smashing Magazine and on CSS { In Real Life }.

Please feel free to suggest new features or even other browsers.

You can also send an anonymous reply (using Quill and Comment Parade).

6 Responses

  1. 2 Likes
  2. 1 Repost
  3. 1 Link
  4. 2 Social Replies