September 2023 web platform update
Newly available on the web platform
Newly available
-
contain-intrinsic-size: The
contain-intrinsic-size
CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size. Learn more. -
@counter-style: The
@counter-style
CSS at-rule defines custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list. Learn more. -
Device orientation events: The
DeviceMotion
andDeviceOrientation
events report the movement and orientation of the browser's device in physical space. Learn more. -
Hyphenation: The
hyphens
CSS property controls when long words are broken by line wrapping. Although calledhyphens
, the property applies to word-splitting behavior across languages, such as customary spelling changes or the use of other characters to mark an intraword line break. Learn more. -
image-set(): The
image-set()
CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities. Learn more. -
<link rel="modulepreload">: The
rel="modulepreload"
attribute for the<link>
HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution. Learn more. -
Subgrid: The
subgrid
value for thegrid-template-columns
andgrid-template-rows
properties allows a grid item to inherit the grid definition of its parent grid container. Learn more.
Now available in Chrome
Limited availability
-
Array grouping: The
Object.groupBy()
andMap.groupBy()
static methods group values of arrays and iterables based on a function that returns a key for each value. Learn more. -
display animation: You can animate elements between
display: none
and any otherdisplay
value or animate betweencontent-visibility: hidden
and any othercontent-visibility
value. This also applies to transitions. Learn more. -
overlay: The
overlay
CSS property, used as anallow-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 theoverlay
property; only use it as transition property. Learn more. -
@starting-style: The
@starting-style
CSS at-rule defines the starting values for properties that are transitioning when the target element's style is first updated. Learn more. -
text-wrap: pretty: The
text-wrap: pretty
CSS declaration prioritizes better layout over speed when text is broken into multiple lines. Learn more. -
transition-behavior: The
transition-behavior: allow-discrete
CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%. Learn more.
Now available in Chrome Android
Limited availability
-
Array grouping: The
Object.groupBy()
andMap.groupBy()
static methods group values of arrays and iterables based on a function that returns a key for each value. Learn more. -
display animation: You can animate elements between
display: none
and any otherdisplay
value or animate betweencontent-visibility: hidden
and any othercontent-visibility
value. This also applies to transitions. Learn more. -
overlay: The
overlay
CSS property, used as anallow-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 theoverlay
property; only use it as transition property. Learn more. -
@starting-style: The
@starting-style
CSS at-rule defines the starting values for properties that are transitioning when the target element's style is first updated. Learn more. -
text-wrap: pretty: The
text-wrap: pretty
CSS declaration prioritizes better layout over speed when text is broken into multiple lines. Learn more. -
transition-behavior: The
transition-behavior: allow-discrete
CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%. Learn more.
Now available in Edge
Limited availability
-
Array grouping: The
Object.groupBy()
andMap.groupBy()
static methods group values of arrays and iterables based on a function that returns a key for each value. Learn more. -
display animation: You can animate elements between
display: none
and any otherdisplay
value or animate betweencontent-visibility: hidden
and any othercontent-visibility
value. This also applies to transitions. Learn more. -
overlay: The
overlay
CSS property, used as anallow-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 theoverlay
property; only use it as transition property. Learn more. -
@starting-style: The
@starting-style
CSS at-rule defines the starting values for properties that are transitioning when the target element's style is first updated. Learn more. -
text-wrap: pretty: The
text-wrap: pretty
CSS declaration prioritizes better layout over speed when text is broken into multiple lines. Learn more. -
transition-behavior: The
transition-behavior: allow-discrete
CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%. Learn more.
Now available in Firefox
Limited availability
-
abs() and sign(): The
abs()
andsign()
CSS functions compute the absolute value or the sign of the input. Learn more. -
pow(), sqrt(), hypot(), log(), and exp(): The
pow()
,sqrt()
,hypot()
,log()
, andexp()
CSS functions compute various exponential functions. Learn more. -
font-synthesis-position: The
font-synthesis-position
CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font. Learn more. -
round(), mod(), and rem(): The
round()
,mod()
, andrem()
CSS functions compute rounded values and the remainder after division. Learn more. -
<search>: The
<search>
HTML element is a container that represents the parts of the web page with search functionality. Learn more.
Now available in Firefox for Android
Limited availability
-
abs() and sign(): The
abs()
andsign()
CSS functions compute the absolute value or the sign of the input. Learn more. -
pow(), sqrt(), hypot(), log(), and exp(): The
pow()
,sqrt()
,hypot()
,log()
, andexp()
CSS functions compute various exponential functions. Learn more. -
font-synthesis-position: The
font-synthesis-position
CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font. Learn more. -
round(), mod(), and rem(): The
round()
,mod()
, andrem()
CSS functions compute rounded values and the remainder after division. Learn more. -
<search>: The
<search>
HTML element is a container that represents the parts of the web page with search functionality. Learn more.
Now available in Safari
Limited availability
-
JPEG XL: The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression. Learn more.
-
Managed media source: The
ManagedMediaSource
API is aMediaSource
where the browser manages the memory of source buffers and may evict data if needed. Learn more. -
Popover: The
popover
HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using theshowPopover()
method. Learn more. -
<search>: The
<search>
HTML element is a container that represents the parts of the web page with search functionality. Learn more. -
Set methods: The
difference()
,intersection()
,isDisjointFrom()
,isSubsetOf()
,isSupersetOf()
,symmetricDifference()
, andunion()
methods of the JavaScriptSet
object performs operations between two sets. Learn more. -
URL.canParse(): The
URL.canParse()
static method checks whether a URL can be parsed into a validURL
object. It's an alternative to callingnew URL()
in atry…catch
statement. Learn more.
Now available in Safari on iOS
Limited availability
-
JPEG XL: The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression. Learn more.
-
Popover: The
popover
HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using theshowPopover()
method. Learn more. -
<search>: The
<search>
HTML element is a container that represents the parts of the web page with search functionality. Learn more. -
Set methods: The
difference()
,intersection()
,isDisjointFrom()
,isSubsetOf()
,isSupersetOf()
,symmetricDifference()
, andunion()
methods of the JavaScriptSet
object performs operations between two sets. Learn more. -
URL.canParse(): The
URL.canParse()
static method checks whether a URL can be parsed into a validURL
object. It's an alternative to callingnew URL()
in atry…catch
statement. Learn more.