category
CSS Functions & Syntax
if(), attr(), counter, sibling-index, custom @function, nesting, @supports/at-rule(), @property, shape(), progress().
23 of 23 demos built, across 14 releases.
Chrome 150 (1)
-
named-feature() function for CSS @supports
The named-feature() function allows CSS @supports rules to query for a small set of specific named features that are not possible to test for using other @supports mechanisms but which are considered highly valuable to t...
Chrome 148 (1)
-
at-rule: CSS Feature Detection
This feature adds an `at-rule()` function to CSS `@supports` which enables authors to feature-detect support for CSS at-rules.
Chrome 146 (1)
-
named-feature() function for CSS @supports
The named-feature() function allows CSS @supports rules to query for a small set of specific named features that are not possible to test for using other @supports mechanisms but which are considered highly valuable to t...
Chrome 143 (1)
-
at-rule: CSS Feature Detection
This feature adds an `at-rule()` function to CSS `@supports` which enables authors to feature-detect support for CSS at-rules.
Chrome 140 (2)
-
CSS counter() and counters() in alt text of 'content' property
counter() and counters() in alt text of 'content' property is useful to provide more meaningful information to e.g. pseudo-elements to improve their accessibility.
-
CSS typed arithmetic
Typed arithmetic allows to write expressions in CSS such a calc(10em / 1px) or calc(20% / 0.5em * 1px) which is useful for e.g. typography, as it allows to convert typed value into an untyped one and reuse it for number ...
Chrome 139 (2)
-
CSS Custom Functions
Custom Functions are similar to custom properties, but instead of returning a single, fixed value, they return values based on other custom properties, parameters, and conditionals.
-
Short-circuiting var() and attr()
When the fallback is not taken, var()/attr() functions evaluate without looking for cycles in that fallback.
Chrome 138 (5)
-
CSS counter() and counters() in alt text of 'content' property
counter() and counters() in alt text of 'content' property is useful to provide more meaningful information to e.g. pseudo-elements to improve their accessibility.
-
CSS sibling-index() and sibling-count()
sibling-index() and sibling-count() can be used as integers in CSS property values to style elements based on their position among its siblings, or the total number of siblings respectively. These functions can be used d...
-
CSS Sign-Related Functions: abs(), sign()
The sign-related functions abs() and sign() compute various functions related to the sign of their argument. The abs(A) function contains one calculation A, and returns the absolute value of A, as the same type as t...
-
CSS typed arithmetic
Typed arithmetic allows to write expressions in CSS such a calc(10em / 1px) or calc(20% / 0.5em * 1px) which is useful for e.g. typography, as it allows to convert typed value into an untyped one and reuse it for number ...
-
Interpolation progress functional notation: CSS progress() function
The progress() functional notation returns a <number> value representing the position of one calculation (the progress value) between two other calculations (the progress start value and progress end value). progress() i...
Chrome 137 (1)
-
CSS if() function
The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value ...
Chrome 136 (1)
-
Rename `string` attr() type to `raw-string`
In https://github.com/w3c/csswg-drafts/issues/11645#issuecomment-2701601350 it was resolved to replace `string` attr() type with `raw-string`, see: https://drafts.csswg.org/css-values-5/#attr-notation. Change attr() ...
Chrome 135 (2)
-
CSS shape() function
shape() allows responsive free-form shapes in clip-path. The author can define a series of verbs, roughly equivalent to the verbs in path(), but where the verbs accept responsive units (e.g. % or vw), as well as any CSS...
-
Remove deprecated navigator.xr.supportsSession method
navigator.xr.supportsSession was replaced in the WebXR spec by the navigator.xr.isSessionSupported method in September of 2019 after receiving feedback on the API shape from the TAG. It has been marked as deprecated in C...
Chrome 134 (1)
-
CSS shape() function
shape() allows responsive free-form shapes in clip-path. The author can define a series of verbs, roughly equivalent to the verbs in path(), but where the verbs accept responsive units (e.g. % or vw), as well as any CSS...
Chrome 133 (2)
-
CSS advanced attr() function
Implement the augmentation to attr() specified in CSS Level 5, which allows types besides <string> and usage in all CSS properties (besides pseudo-element 'content'). Example: <style> div { background-color: att...
-
CSS sibling-index() and sibling-count()
sibling-index() and sibling-count() can be used as integers in CSS property values to style elements based on their position among its siblings, or the total number of siblings respectively. These functions can be used d...
Chrome 131 (1)
-
@property support <string> syntax
Support for "<string>" syntax component name for registered custom properties.
Chrome 130 (2)
-
CSS Nesting: Stable Bare Declarations (CSSNestingDeclarations)
Keeps bare declarations following a nested rule in their place, by wrapping those declarations in CSSNestingDeclarations rules during parsing.
-
CSS Nesting: The Nested Declarations Rule
Keeps bare declarations following a nested rule in their place, by wrapping those declarations in CSSNestedDeclarations rules during parsing.