From d0d244d9ce555e8155cb1a8c027e90d2acac278f Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 20 Oct 2025 10:43:51 -0400 Subject: [PATCH 001/124] [css-color-5] Defined that if there are multiple @color-profile rules,the last one wins #12980 --- css-color-5/Overview.bs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index ccc208c8844..ff8c935761e 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -2025,6 +2025,9 @@ or any other color or monochrome output device which has been characterized. The '@color-profile/src' descriptor specifies the URL to retrieve the color-profile information from. + If multiple ''@color-profile' rules are defined with the same name, + the last one in document order wins, and all preceding ones are ignored. + The retrieved ICC profile is valid if - it can be parsed as an ICC Profile From 5f26843835886ddd297e6d7725c88112c8dfaa9d Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 20 Oct 2025 10:47:21 -0400 Subject: [PATCH 002/124] [css-fonts-4] Defined that if there are multiple @font-palette-values rules, the last one wins #12981 --- css-fonts-4/Overview.bs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index eea1950fd5c..79cfe1abd3b 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -7682,6 +7682,9 @@ User-defined font color palettes: The ''@font-palette-values'' rule The ''@font-palette-values'' rule accepts the descriptors defined in this specification. + If multiple ''@font-palette-values'' rules are defined with the same name, + the last one in document order wins, and all preceding ones are ignored. +
Modify Bixa Color's color palette. From 40c794e174ee5eb50a891051aedd11e344715aa0 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Sat, 18 Oct 2025 23:57:41 +0200 Subject: [PATCH 003/124] [css-conditional-5] Made last @supports-condition win #12973 --- css-conditional-5/Overview.bs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs index f734cfd57d3..0637a481a92 100644 --- a/css-conditional-5/Overview.bs +++ b/css-conditional-5/Overview.bs @@ -1778,7 +1778,8 @@ improving maintainability and readability. Once defined, the named supports condition can be used in subsequent ''@supports'' or ''@when'' conditions. - Multiple ''@supports-condition'' rules with the same name in a style sheet are invalid and must be ignored. + If multiple ''@supports-condition'' rules are defined with the same name, + the last one in document order wins, and all preceding ones are ignored.
For example, we can define a supports query checking multiple properties at once: From cd10620c303d00ad78eac71468dc9fe42aed2ffc Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 20 Oct 2025 12:04:53 -0400 Subject: [PATCH 004/124] typo --- css-color-5/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index ff8c935761e..75820e63186 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -2025,7 +2025,7 @@ or any other color or monochrome output device which has been characterized. The '@color-profile/src' descriptor specifies the URL to retrieve the color-profile information from. - If multiple ''@color-profile' rules are defined with the same name, + If multiple ''@color-profile'' rules are defined with the same name, the last one in document order wins, and all preceding ones are ignored. The retrieved ICC profile is valid if From 8464fd573532c53ff9b5fec034459c46755bb971 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 20 Oct 2025 12:10:48 -0400 Subject: [PATCH 005/124] [css-fonts-4][editorial] wpt --- css-fonts-4/Overview.bs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index 79cfe1abd3b..fda236b1db1 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -837,7 +837,6 @@ Generic font families font-weight-lighter-001.xht font-weight-normal-001.xht font-weight-sign-function.html - test-synthetic-bold.xht test-synthetic-bold.html synthetic-bold-space-width.html parsing/font-weight-computed.html @@ -1186,7 +1185,6 @@ Font style: the 'font-style!!property' property font-style-angle.html test-synthetic-italic-2.html test-synthetic-italic-3.html - test-synthetic-italic.xht test-synthetic-italic.html animations/font-style-interpolation.html parsing/font-style-computed.html @@ -1355,9 +1353,9 @@ Font size: the 'font-size' property font-size-relative-across-calc-ff-bug-001.html - font-size-zero-1-ref.html font-size-zero-1.html font-size-zero-2.html + font-size-zero-3.html font-size-xxx-large.html rem-in-monospace.html animations/font-size-interpolation-001.html @@ -2097,6 +2095,7 @@ Controlling synthesized bold: The 'font-synthesis-weight' property font-synthesis-weight-first-letter.html font-synthesis-weight-first-line.html font-synthesis-weight.html + font-synthesis-weight-webfont-bold.html parsing/font-synthesis-weight-invalid.html parsing/font-synthesis-weight-valid.html From 1319f974e70efb53bbacc8b5ee65dedb20082c98 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 20 Oct 2025 12:23:57 -0400 Subject: [PATCH 006/124] [css-fonts-5][editorial] wpt --- css-fonts-5/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css-fonts-5/Overview.bs b/css-fonts-5/Overview.bs index bf4635778f7..026a8b54dea 100644 --- a/css-fonts-5/Overview.bs +++ b/css-fonts-5/Overview.bs @@ -1373,6 +1373,8 @@ Changes parsing/font-width-valid.html test-synthetic-bold.html test-synthetic-italic.html + font-size-zero-3.html + font-synthesis-weight-webfont-bold.html +
  • Clarified that the last @supports-condition in document order wins + (#12973) +
  • Extended [=supports queries=] to express [=at-rule=] capabilities via ''at-rule()''. @@ -2027,6 +2029,35 @@ Changes since the #11117)
  • Added ''@supports-condition'' at-rule and related {{CSSSupportsConditionRule}} interface. (#12622)
  • +
  • Clarified that container-names are not tree-scoped + (#12090) +
  • +
  • Defined direction feature for scroll-state() queries + (#6400) +
  • +
  • Clarified that 0 and 0px are equivalent in conditions + (#12236) +
  • + +
  • Defined a range syntax for style container queries + (#8376) +
  • +
  • Explicitly allow tree-counting functions + (#10982) +
  • +
  • Dimensional query containers no longer apply layout containment + (#10544)
  • +
  • Added "both" value for snapped query + (#11181) +
  • +
  • Added axis keywords for overflowing + (#11183) +
  • +
  • Renamed overflowing to scrollable + (#11182)
  • +
  • Made <> optional + (#9192) +
  • From 2016bbf8f5a9ba1cdb22d55cc8b5ee822e8b2490 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 22 Oct 2025 00:59:33 +0200 Subject: [PATCH 011/124] [css-align-3][editorial] Fixed Bikeshed error --- css-align-3/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs index 9b8449f886e..d565c21017f 100644 --- a/css-align-3/Overview.bs +++ b/css-align-3/Overview.bs @@ -2681,7 +2681,7 @@ Changes

    (Issue 1318)
  • Clamped baselines of scrollable boxes to the border edge, rather than margin edge. (Issue 766) -
  • Updated the flex container gap definition to use 'gutter'. (Issue 12084) +
  • Updated the flex container gap definition to use [=gutter=]. (Issue 12084)

    From 028e69f82e3ac694cfd6c22a75a4832f517496cf Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 22 Oct 2025 01:00:21 +0200 Subject: [PATCH 012/124] [css-anchor-position-1][editorial] Fixed Bikeshed errors --- css-anchor-position-1/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index bcd0ec7304c..4811df1639b 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -114,7 +114,7 @@ to find the “best” one that avoids overlap/overflow. Note that using the [[HTML#the-popover-attribute|Popover API]] will automatically set 'position' and create the anchoring relationship without setting 'anchor-name' or 'position-anchor' value - (by defining an [=implicit anchor=]), + (by defining an [=implicit anchor element=]), so those properties wouldn't need to be explicitly set again. So with the correct markup, this example can be simplified to: @@ -717,7 +717,7 @@ by specifying the rows and columns the region occupies as follows:
    : start, end, self-start, self-end : top, bottom, left, right - : y-start, y-end, self-x-start, self-y-end + : y-start, y-end, self-y-start, self-y-end : x-start, x-end, self-x-start, self-x-end : block-start, block-end, self-block-start, self-block-end : inline-start, inline-end, self-inline-start, self-inline-end @@ -1368,7 +1368,7 @@ it is aligned as per ''align-self/center''. █▌ █▌ ████▌ ███▌ ▐▌ █▌ ████ █▌ ▐█ █████▌ █▌ ▐▌ █ █▌ █▌ ▐█ █▌ █▌ █▌ █▌ ▐▌ █ █▌ █▌ ▐█ -█▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██ +█▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██ --> Anchor-Based Sizing {#sizing} From c94eb585c1d55460a8f8c060f312e9d8fb77ae7b Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 22 Oct 2025 01:00:38 +0200 Subject: [PATCH 013/124] [css-animations-1][editorial] Fixed Bikeshed errors --- css-animations-1/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-animations-1/Overview.bs b/css-animations-1/Overview.bs index 3b16f042f39..5718e6647ad 100644 --- a/css-animations-1/Overview.bs +++ b/css-animations-1/Overview.bs @@ -24,7 +24,7 @@ Former Editor: Sylvain Galineau, Adobe, galineau@adobe.com Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior. Link Defaults: css-values-3 (type)

    the state of the animation if it were given a duration of ''10s''.
    - +
    Animation states specified by keyframes
  • @@ -1082,7 +1082,7 @@ Attributes
    The declared declarations in the rule, in specified order.
    parent CSS rule -
    The context object (i.e. this {{CSSKeyframeRule}}). +
    The context object (i.e. this {{CSSKeyframeRule}}).
    owner node
    Null. From fefdce42a6016169b20b71aceb703c645ca76992 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 22 Oct 2025 01:00:52 +0200 Subject: [PATCH 014/124] [css-borders-4][editorial] Fixed Bikeshed errors --- css-borders-4/Overview.bs | 62 +++++++++++++++++++++++---------------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index f778acf8d0d..cb240ade620 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -14,7 +14,8 @@ Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 649 Editor: Noam Rosenthal, Google, w3cid 121539 Former Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343 Abstract: This module contains the features of CSS relating to the borders and decorations of boxes on the page. -Ignored Terms: total width, border-*-*-radius, corner-*-shape, corner-*-*-shape, corner-*-*, corner-*, box-shadow-*, border-*-clip +Ignored Terms: border-*-*-radius, border-*-clip, box-shadow-*, corner-*-shape, corner-*-*-shape, corner-*-*, corner-* +Ignored Vars: block, inline, Li, Ltop, Lbottom, Lleft, Lright, total width, W, Wside, Wleft, Wright, Wtop, Wbottom Repository: w3c/csswg-drafts WPT Path Prefix: css/css-borders/ WPT Display: open @@ -128,11 +129,11 @@ Line Colors: the 'border-color' properties Sample rendering: - + The same border colors with ''border-style: dotted'': - +
    @@ -311,9 +312,7 @@ Line Patterns: the 'border-style' properties
     	but behind the element’s content (in case it overlaps).
     
     	
    - Examples of border styles +
    Example renderings of the predefined border styles.
    @@ -586,9 +585,7 @@ Corners follow the curve of the border.
    - The effect of rounded corners on unequal borders +
    The effect of a rounded corner when the two borders it connects @@ -620,6 +617,7 @@ Corners describing a quarter-ellipse; but since the opposite sides have a border thickness the padding edge curve starts inward from the outer arc's endpoints." + width="141" >
    @@ -696,9 +694,7 @@ Color and Style Transitions or what function maps from this ratio to a point on the curve.
    - Illustration of the transition region on curved corners +
    Given these corner shapes, color and style transitions @@ -774,7 +770,8 @@ Overlapping Curves
    [image: rectangle with two tiny rounded corners and two very large ones, on opposite corners]
    @@ -827,6 +824,7 @@ Corner Sizing: the 'border-*-*-radius' properties
    Diagram of the inscribed ellipse
    @@ -1253,7 +1251,7 @@ Corner Shaping: the 'corner-*-shape' properties
    - +
    Different ''superellipse()'' values for the top right corner: infinity, 1, 0, -1, and -infinity.
    @@ -1411,7 +1409,9 @@ while when rendering 'box-shadow' or offsetting for 'overflow-clip-margin', the
    Adjusting corner shapes + alt="Adjusting corner shapes" + width="600" + >
    Borders are aligned to the curve, shadows and clip are aligned to the axis.
    @@ -1642,7 +1642,10 @@ Border Images The image to tile is as follows. Apart from the diamonds, it is transparent: - Tile for border + Tile for border The image is 81 by 81 pixels and has to be divided into 9 equal parts. The style rules could thus be as follows: @@ -1657,7 +1660,10 @@ Border Images The result, when applied to a DIV of 12 by 5em, will be similar to this: - element with a diamond border + element with a diamond border
    @@ -1668,13 +1674,14 @@ Border Images
    Diagram: The border image shows a wavy green border
-		     with more exaggerated waves towards the corners,
-		     which are capped by a disconnected green circle.
-		     Four cuts at 124px offsets from each side
-		     divide the image into 124px-wide square corners,
-		     124px-wide but thin side slices,
-		     and a small center square.
    @@ -1701,6 +1708,7 @@ Border Images The whole border image effect is outset 31px, so that the troughs of the waves align just outside the padding edge." + width="452" >
    @@ -1866,7 +1874,9 @@ Image Slicing: the 'border-image-slice' property
    Diagram: two horizontal cuts and two vertical cuts through an image + alt="Diagram: two horizontal cuts and two vertical cuts through an image" + width="388" + >
    Diagram illustrating the cuts corresponding to the value ''25% 30% 12% 20%'' @@ -3083,7 +3093,7 @@ as described in -An element's relevant side for border shape is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''. +An element's relevant side for border shape is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end=]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''. 1. If |element|'s [=computed value|computed=] 'border-block-start-style' is not ''border-style/none'', then return [=block-start=]. 1. If |element|'s [=computed value|computed=] 'border-inline-start-style' is not ''border-style/none'', then return [=inline-start=]. 1. If |element|'s [=computed value|computed=] 'border-block-end-style' is not ''border-style/none'', then return [=block-end=]. From b677e718b49d187a9e7d62f4df155f6a53aeaaa8 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 22 Oct 2025 01:07:02 +0200 Subject: [PATCH 015/124] [css-box-3][editorial] Fixed Bikeshed errors --- css-box-3/Overview.bs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css-box-3/Overview.bs b/css-box-3/Overview.bs index 6957f06a007..4b06ce5d90f 100644 --- a/css-box-3/Overview.bs +++ b/css-box-3/Overview.bs @@ -17,6 +17,7 @@ Ignored Terms: internal table elements, block layout Issue Tracking: CSSWG GitHub https://github.com/w3c/csswg-drafts/issues
    @@ -125,7 +126,7 @@ The CSS Box Model {#box-model}

    Diagram of a typical box, showing the
-		content, padding, border and margin areas + content, padding, border and margin areas" width="461">

    The various areas and edges of a typical box.

    From 8eb7daa42667628decf44ced9ba05e0588614504 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 22 Oct 2025 01:09:51 +0200 Subject: [PATCH 016/124] [css-box-4][editorial] Fixed Bikeshed errors --- css-box-4/Overview.bs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css-box-4/Overview.bs b/css-box-4/Overview.bs index 1434c803b76..9283c77a46f 100644 --- a/css-box-4/Overview.bs +++ b/css-box-4/Overview.bs @@ -15,7 +15,9 @@ Ignored Terms: internal table elements, block layout Introduction {#intro} @@ -113,7 +115,7 @@ The CSS Box Model {#box-model}

    Diagram of a typical box, showing the
-		content, padding, border and margin areas + content, padding, border and margin areas" width="461">

    The various areas and edges of a typical box.

    From 43aeb2dec00f50614635557707e3d9da89e646f7 Mon Sep 17 00:00:00 2001 From: andruud Date: Wed, 22 Oct 2025 08:35:33 +0200 Subject: [PATCH 017/124] [css-nesting-1] Fix linking of <> (#12991) `` is a production, and should use the production markup `<>`. Fixes this error: LINE 1347:22: ''...'' shorthand (opened on 1347:7) was closed, but there were still open elements inside of it. --- css-nesting-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index f129509aba7..78dc8f5717d 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -1344,7 +1344,7 @@ will collapse into a single rule when serialized and parsed again. Significant changes since the
    Feb 14, 2023 Working Draft: -* The '''' selector of a ''@scope'' rule +* The <> selector of a ''@scope'' rule no longer acts as the parent rule for nesting. (Issue 9740) From d0bbc1720b307f74233fb8fe722dc32ad9c46e0e Mon Sep 17 00:00:00 2001 From: andruud Date: Wed, 22 Oct 2025 08:42:58 +0200 Subject: [PATCH 018/124] [css-nesting-1] Fix character reference errors (#12988) For example: LINE 330:39: Character reference '&Bar' didn't end in ;. Replaced various instances of '&' with '&'. --- css-nesting-1/Overview.bs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 78dc8f5717d..22537b61004 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -327,10 +327,10 @@ Syntax {#syntax} as nesting is not a syntax transformation, but rather matches on the actual elements the parent selector matches. - It is also true that the selector ''&Bar'' is invalid in CSS in the first place, + It is also true that the selector ''&Bar'' is invalid in CSS in the first place, as the ''Bar'' part is a type selector, which must come first in the compound selector. - (That is, it must be written as ''Bar&''.) + (That is, it must be written as ''Bar&''.) So, luckily, there is no overlap between CSS Nesting and the preprocessor syntax. @@ -1091,10 +1091,10 @@ Nesting Selector: the ''&'' selector {#nest-selector} While the position of a [=nesting selector=] in a [=compound selector=] does not make a difference in its behavior - (that is, ''&.foo'' and ''.foo&'' match the same elements), + (that is, ''&.foo'' and ''.foo&'' match the same elements), the existing rule that a [=type selector=], if present, must be first in the [=compound selector=] continues to apply - (that is, ''&div'' is illegal, and must be written ''div&'' instead). + (that is, ''&div'' is illegal, and must be written ''div&'' instead). - ### Effects of color space on interpolation: examples ### {#color-interpolation} From 6144c824f50659d41f3f3e89e07ee56f9d2a11e2 Mon Sep 17 00:00:00 2001 From: "Psychpsyo (Cameron)" <60073468+Psychpsyo@users.noreply.github.com> Date: Thu, 11 Sep 2025 00:02:06 +0200 Subject: [PATCH 052/124] Fix typo --- css-content-3/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-content-3/Overview.bs b/css-content-3/Overview.bs index 9f97908d2da..46233746103 100644 --- a/css-content-3/Overview.bs +++ b/css-content-3/Overview.bs @@ -491,8 +491,8 @@ Inserting Quotation Marks: the ''*-quote'' keywords
    These values are replaced by the appropriate string as defined by the 'quotes' property, - and increments (for ''no-open-quote'') - or decrements (for ''no-close-quote'') + and increments (for ''open-quote'') + or decrements (for ''close-quote'') the level of nesting for quotes.
    no-open-quote From 4745978e2bbc5015ce075095f9ca71185d84c0c6 Mon Sep 17 00:00:00 2001 From: Munira Tursunova Date: Tue, 26 Aug 2025 13:33:47 +0200 Subject: [PATCH 053/124] Add explainer for CSS if() function --- css-values-5/if-explainer.md | 141 +++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 css-values-5/if-explainer.md diff --git a/css-values-5/if-explainer.md b/css-values-5/if-explainer.md new file mode 100644 index 00000000000..b45db98bf42 --- /dev/null +++ b/css-values-5/if-explainer.md @@ -0,0 +1,141 @@ +# Explainer: CSS `if()` function + +This document is an explainer for the `if()` function proposed for CSS Values and Units Module Level 5. + +## Introduction + +The `if()` function introduces powerful, inline conditional logic to CSS properties. It allows authors to select a value for a property based on a set of ordered conditions, similar to `if/else` constructs in many programming languages. This provides a more dynamic and streamlined way to write CSS without relying on verbose selectors or JavaScript. + +## Motivation + +Currently, CSS authors often need to repeat selectors to apply different styles under different conditions. For example, to change a property based on a media query, one would write: + +```css +.my-element { + color: blue; +} + +@media (min-width: 600px) { + .my-element { + color: red; + } +} +``` + +While functional, this pattern can lead to verbose and fragmented code, especially when multiple conditions are involved. The `if()` function aims to simplify this by allowing conditional logic to be expressed inline within a single declaration: + +```css +.my-element { + color: if(media(min-width: 600px): red; else: blue); +} +``` + +This approach improves readability and co-locates related logic, making stylesheets easier to maintain. This is especially powerful when combined with CSS Custom Properties, allowing for the creation of dynamic, themeable components with logic encapsulated directly in the CSS. + +## Syntax + +The `if()` function's syntax is formally defined as: + +``` +<> = if( [ <> ; ]* <> ;? ) + = : ? + = ]> | else + = + supports( [ : ] | ) | + media( | ) | + style( ) +``` + +In essence, the function is a list of conditional branches separated by semicolons. Each branch contains a condition followed by a colon (`:`) and a value. The conditions are evaluated in order, and the value from the first branch with a true condition is used. + +The `else` keyword can be used as a condition that is always true. This makes it useful for providing a final fallback value, as any branches after an `else` branch will be ignored. + +## Core Use Cases + +The `if()` function is well-suited for a variety of scenarios where a property's value needs to change based on context. + +* **Responsive Design:** Instead of defining multiple rules in separate `@media` blocks, `if()` allows responsive logic to be encapsulated within a single property. This is ideal for component-based architectures, as it co-locates the logic and makes it easier to manage fluid typography, spacing, or layout adjustments directly where they are applied. + +* **Theming:** `if()` enables dynamic and sophisticated theming systems. By checking the value of a custom property with `style()`, a component can adjust multiple aspects of its appearance (e.g., background, text color, border) based on a single theme flag (like `--theme: dark`). This centralizes theme logic and allows for the creation of derived styles that automatically respond to theme changes. + +* **Feature Detection & Progressive Enhancement:** Similar to the `@supports` rule, `if()` can check for browser feature support. Its advantage is providing an inline fallback within a single declaration. This is perfect for progressively enhancing a component. For example, you can use a modern layout mode like `subgrid` if it's supported, and fall back to a simpler, more widely-supported value like `grid` or `block` if it's not, all within the same `display` property. + +## Examples + +### 1. Simple Media Query + +A common use case is to switch a value based on a media query. + +```css +.component { + background-color: if(media(width >= 600px): blue; else: green); +} +``` + +### 2. Feature Support + +Conditionally apply a value based on whether the browser supports a particular CSS feature. + +```css +.card { + display: if(supports(display: grid): grid; else: block); +} +``` + +### 3. Theming with Custom Properties + +The `if()` function is particularly powerful for creating themes. Here, we use `style()` to check the value of a `--theme` custom property inherited from an ancestor and adjust colors accordingly. + +```css +/* On a parent element, you might have: --theme: dark; */ + +.themed-component { + --bg-color: if( + style(--theme: dark): #333; + style(--theme: sepia): #f4e8d5; + else: #eee + ); + --text-color: if( + style(--theme: dark): #eee; + style(--theme: sepia): #5b4636; + else: #333 + ); + + background-color: var(--bg-color); + color: var(--text-color); +} +``` + +### 4. Combining Conditions with `and` + +Conditions can be combined with boolean keywords like `and`, `or`, and `not`. This allows for more complex logic, such as applying a style only when multiple conditions are met. + +```css +.widget { + --base-size: 2rem; + --enhanced-size: 3rem; + + /* Use the enhanced size only on wide screens that also support subgrid */ + font-size: if( + media(width >= 1024px) and supports(display: subgrid): var(--enhanced-size); + else: var(--base-size) + ); +} +``` + +## Fallback Behavior + +If no condition in an `if()` function evaluates to true and no `else` branch is provided, the function resolves to an empty token stream. This makes the declaration invalid at computed-value time, causing the property to fall back to its inherited or initial value (behaving like `unset`). + +```css +.box { + /* If the viewport width is less than 500px, this property becomes invalid */ + padding: if(media(width >= 500px): 20px); +} +``` + +To ensure predictable behavior, it is recommended to always provide an `else` branch. + +## Security and Privacy Considerations + +The `if()` function itself does not introduce new security or privacy concerns. It provides a new syntax for expressing conditional logic but relies on existing mechanisms (`media()`, `supports()`, `style()`) that have their own, already-defined security profiles. It does not introduce any new capabilities that could be used to fingerprint users or exfiltrate data. \ No newline at end of file From e8a7432d577fb4bc762e6739b3e01e4e2553fed9 Mon Sep 17 00:00:00 2001 From: Munira Tursunova Date: Fri, 5 Sep 2025 15:48:27 +0200 Subject: [PATCH 054/124] Applied review comments --- css-values-5/if-explainer.md | 109 +++++++++++++++++++++++++---------- 1 file changed, 77 insertions(+), 32 deletions(-) diff --git a/css-values-5/if-explainer.md b/css-values-5/if-explainer.md index b45db98bf42..60393bb58de 100644 --- a/css-values-5/if-explainer.md +++ b/css-values-5/if-explainer.md @@ -4,33 +4,48 @@ This document is an explainer for the `if()` function proposed for CSS Values an ## Introduction -The `if()` function introduces powerful, inline conditional logic to CSS properties. It allows authors to select a value for a property based on a set of ordered conditions, similar to `if/else` constructs in many programming languages. This provides a more dynamic and streamlined way to write CSS without relying on verbose selectors or JavaScript. +The `if()` function introduces powerful, +inline conditional logic to CSS properties. +It allows authors to select a value for a property based on a set of ordered conditions, +similar to `if/else` constructs in many programming languages. +This provides a more dynamic and streamlined way to write CSS +without relying on verbose selectors or JavaScript. ## Motivation -Currently, CSS authors often need to repeat selectors to apply different styles under different conditions. For example, to change a property based on a media query, one would write: +Currently, CSS authors often need to repeat selectors +to apply different styles under different conditions. +For example, to change a property based on a custom property for theming, +one would write: ```css .my-element { - color: blue; + color: blue; /* default */ } -@media (min-width: 600px) { - .my-element { - color: red; - } +.theme-dark .my-element { + color: red; /* theme override */ } ``` -While functional, this pattern can lead to verbose and fragmented code, especially when multiple conditions are involved. The `if()` function aims to simplify this by allowing conditional logic to be expressed inline within a single declaration: +While functional, this pattern can lead to verbose and fragmented code, +especially when multiple conditions are involved. +The `if()` function aims to simplify this +by allowing conditional logic to be expressed inline within a single declaration, +using `style()` query to check custom properties values: ```css +/* Assuming a parent has --theme: dark set */ .my-element { - color: if(media(min-width: 600px): red; else: blue); + color: if(style(--theme: dark): red; else: blue); } ``` -This approach improves readability and co-locates related logic, making stylesheets easier to maintain. This is especially powerful when combined with CSS Custom Properties, allowing for the creation of dynamic, themeable components with logic encapsulated directly in the CSS. +This approach improves readability and co-locates related logic, +making stylesheets easier to maintain. +This is especially powerful when combined with CSS Custom Properties, +allowing for the creation of dynamic, +themeable components with logic encapsulated directly in the CSS. ## Syntax @@ -46,21 +61,17 @@ The `if()` function's syntax is formally defined as: style( ) ``` -In essence, the function is a list of conditional branches separated by semicolons. Each branch contains a condition followed by a colon (`:`) and a value. The conditions are evaluated in order, and the value from the first branch with a true condition is used. +In essence, +the function is a list of conditional branches separated by semicolons. +Each branch contains a condition followed by a colon (`:`) and a value. +The conditions are evaluated in order, +and the value from the first branch with a true condition is used. -The `else` keyword can be used as a condition that is always true. This makes it useful for providing a final fallback value, as any branches after an `else` branch will be ignored. +The `else` keyword can be used as a condition that is always true. +This makes it useful for providing a final fallback value, +as any branches after an `else` branch will be ignored. -## Core Use Cases - -The `if()` function is well-suited for a variety of scenarios where a property's value needs to change based on context. - -* **Responsive Design:** Instead of defining multiple rules in separate `@media` blocks, `if()` allows responsive logic to be encapsulated within a single property. This is ideal for component-based architectures, as it co-locates the logic and makes it easier to manage fluid typography, spacing, or layout adjustments directly where they are applied. - -* **Theming:** `if()` enables dynamic and sophisticated theming systems. By checking the value of a custom property with `style()`, a component can adjust multiple aspects of its appearance (e.g., background, text color, border) based on a single theme flag (like `--theme: dark`). This centralizes theme logic and allows for the creation of derived styles that automatically respond to theme changes. - -* **Feature Detection & Progressive Enhancement:** Similar to the `@supports` rule, `if()` can check for browser feature support. Its advantage is providing an inline fallback within a single declaration. This is perfect for progressively enhancing a component. For example, you can use a modern layout mode like `subgrid` if it's supported, and fall back to a simpler, more widely-supported value like `grid` or `block` if it's not, all within the same `display` property. - -## Examples +## Use Cases ### 1. Simple Media Query @@ -74,17 +85,33 @@ A common use case is to switch a value based on a media query. ### 2. Feature Support -Conditionally apply a value based on whether the browser supports a particular CSS feature. +Conditionally apply a value based on whether the browser supports a particular CSS feature, +allowing for progressive enhancement. +For example, using a modern, +more vibrant color from a wider-gamut color space like Display P3, +inside of a gradient, +and falling back to a standard sRGB color if P3 is not supported. +Without `if()`, +the author would have to repeat the entire `linear-gradient()` expression. ```css -.card { - display: if(supports(display: grid): grid; else: block); +.highlight { + background-image: linear-gradient( + to right, + hsl(50 100% 50%), + if( + supports(color: color(display-p3 0 0 0)): color(display-p3 1 0.5 0); + else: hsl(30 100% 50%) + ) + ); } ``` ### 3. Theming with Custom Properties -The `if()` function is particularly powerful for creating themes. Here, we use `style()` to check the value of a `--theme` custom property inherited from an ancestor and adjust colors accordingly. +The `if()` function is particularly powerful for creating themes. +Here, we use `style()` to check the value of a `--theme` custom property inherited from an ancestor +and adjust colors accordingly. ```css /* On a parent element, you might have: --theme: dark; */ @@ -108,16 +135,18 @@ The `if()` function is particularly powerful for creating themes. Here, we use ` ### 4. Combining Conditions with `and` -Conditions can be combined with boolean keywords like `and`, `or`, and `not`. This allows for more complex logic, such as applying a style only when multiple conditions are met. +Conditions can be combined with boolean keywords like `and`, `or`, and `not`. +This allows for more complex logic, +such as applying a style only when multiple conditions are met. ```css .widget { --base-size: 2rem; --enhanced-size: 3rem; - /* Use the enhanced size only on wide screens that also support subgrid */ + /* Use the enhanced size only on wide screens that also support flexbox */ font-size: if( - media(width >= 1024px) and supports(display: subgrid): var(--enhanced-size); + media(width >= 1024px) and supports(display: flex): var(--enhanced-size); else: var(--base-size) ); } @@ -125,7 +154,11 @@ Conditions can be combined with boolean keywords like `and`, `or`, and `not`. Th ## Fallback Behavior -If no condition in an `if()` function evaluates to true and no `else` branch is provided, the function resolves to an empty token stream. This makes the declaration invalid at computed-value time, causing the property to fall back to its inherited or initial value (behaving like `unset`). +If no condition in an `if()` function evaluates to true +and no `else` branch is provided, +the function resolves to a `` value. +This makes the declaration invalid at computed-value time, +causing the property to fall back to its inherited or initial value (behaving like `unset`). ```css .box { @@ -136,6 +169,18 @@ If no condition in an `if()` function evaluates to true and no `else` branch is To ensure predictable behavior, it is recommended to always provide an `else` branch. +## Stakeholder Feedback + +This proposal has been discussed in the CSS Working Group, +and feedback from browser vendors and web developers has been positive. +Currently, `media()`, `supports()`, and `style()` queries are supported, +but there are possibilities for expansion in the future. + ## Security and Privacy Considerations -The `if()` function itself does not introduce new security or privacy concerns. It provides a new syntax for expressing conditional logic but relies on existing mechanisms (`media()`, `supports()`, `style()`) that have their own, already-defined security profiles. It does not introduce any new capabilities that could be used to fingerprint users or exfiltrate data. \ No newline at end of file +The `if()` function itself does not introduce new security or privacy concerns. +It provides a new syntax for expressing conditional logic +but relies on existing mechanisms (`media()`, `supports()`, `style()`) +that have their own, already-defined security profiles. +It does not introduce any new capabilities +that could be used to fingerprint users or exfiltrate data. From 2f1038178433c298de9d61c6ec1922f9f736e7df Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 15 Jan 2025 13:43:35 -0800 Subject: [PATCH 055/124] [css-flexbox-1] Gloss in-flow/out-of-flow jargon --- css-flexbox-1/Overview.bs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs index e666f201b21..3b41441bf54 100644 --- a/css-flexbox-1/Overview.bs +++ b/css-flexbox-1/Overview.bs @@ -786,7 +786,7 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values In particular: * 'float' and 'clear' do not create floating or clearance of flex item, - and do not take it out-of-flow. + and do not take it out-of-flow. * 'vertical-align' has no effect on a flex item. * the ''::first-line'' and ''::first-letter'' pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter @@ -838,9 +838,9 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values Flex Items Loosely speaking, the flex items of a flex container - are boxes representing its in-flow contents. + are boxes representing its in-flow contents. - Each in-flow child of a flex container + Each in-flow child of a flex container becomes a flex item, and each child text sequence is wrapped in an anonymous block container flex item. @@ -979,7 +979,7 @@ Flex Items

    Absolutely-Positioned Flex Children

    - As it is out-of-flow, + As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout. The [=cross-axis=] edges of the [=static-position rectangle=] @@ -4777,7 +4777,7 @@ Sample Flex Fragmentation Algorithm a flex container with ''justify-content:start'' and no flexible items should paginate identically to - a block with in-flow children with same content, + a block with in-flow children with same content, same used size and same used margins.
    multi-line column flex container From 018df75c86e5e284890d4fe4cc72eebbe335284b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 16 Jan 2025 12:15:52 -0800 Subject: [PATCH 056/124] [css-tables-3] Gloss in-flow/out-of-flow jargon --- css-tables-3/Overview.bs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs index 9bb9ed07cf5..f3145d96638 100644 --- a/css-tables-3/Overview.bs +++ b/css-tables-3/Overview.bs @@ -359,7 +359,7 @@ spec:css-sizing-3; type:property; text:box-sizing

    Fixup Algorithm

    - For the purposes of these rules, out-of-flow elements are represented as inline elements of zero width and height. + For the purposes of these rules, out-of-flow elements are represented as inline elements of zero width and height. Their containing blocks are chosen accordingly. The following steps are performed in three stages: @@ -1966,7 +1966,7 @@ spec:css-sizing-3; type:property; text:box-sizing The baseline of a cell is defined as - the baseline of the first in-flow line box in the cell, or + the baseline of the first in-flow line box in the cell, or the first in-flow table-row in the cell, whichever comes first. If there is no such line box or table-row, @@ -2000,7 +2000,7 @@ spec:css-sizing-3; type:property; text:box-sizing

    For the purposes of finding a baseline, - in-flow boxes with a scrolling mechanisms (see the 'overflow' property) + in-flow boxes with a scrolling mechanisms (see the 'overflow' property) must be considered as if scrolled to their origin position.

    @@ -2523,7 +2523,7 @@ With a table-root as containing block then indicate offsets inwards from the corresponding edges of this containing block, as normal. - Absolute positioning occurs after layout of the table and its in-flow contents, + Absolute positioning occurs after layout of the table and its in-flow contents, and does not contribute to the sizing of any table grid tracks or affect the size/configuration of the table grid in any way. From 4e685114736f6aab58068ef62689fbeed03ce714 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 17 Jan 2025 22:11:50 -0800 Subject: [PATCH 057/124] [css-text-decor-3] Gloss in-flow/out-of-flow jargon --- css-text-decor-3/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-text-decor-3/Overview.bs b/css-text-decor-3/Overview.bs index f67f98d836e..f7e622f2026 100644 --- a/css-text-decor-3/Overview.bs +++ b/css-text-decor-3/Overview.bs @@ -88,10 +88,10 @@ Line Decoration: Underline, Overline, and Strike-Through When specified on or propagated to a ruby container, the decorations are propagated only to the ruby base. For all other box types, - the decorations are propagated to all in-flow children. + the decorations are propagated to all in-flow children.

    - Note that text decorations are not propagated to any out-of-flow descendants, + Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes. From b2b9f3343e30ecc7a5a7aa717eb4735194b040ba Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 17 Jan 2025 22:55:49 -0800 Subject: [PATCH 058/124] [css-pseudo-4] Gloss in-flow/out-of-flow jargon --- css-pseudo-4/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 316fc66dc55..a6879407cb1 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -491,12 +491,12 @@ Finding the First-Letter Text Its [=first-letter text=] is the first such [=inline-level content=] participating in the [=inline formatting context=] of its [=originating element=]’s [=first formatted line=], - if it is not preceded by any other in-flow content + if it is not preceded by any other [=in-flow=] content (such as images or inline tables) on its line. For this purpose, any [=marker boxes=] are ignored, - as if they were out-of-flow. - However, if an element has in-flow ''::before'' or ''::after'' content, + as if they were [=out-of-flow=]. + However, if an element has [=in-flow=] ''::before'' or ''::after'' content, the [=first-letter text=] is selected from the content of the element including that generated content. From 1377915de4fba7df67d388efb68e4dc2d7e075ac Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Tue, 28 Oct 2025 11:22:17 -0400 Subject: [PATCH 059/124] [selectors-4][editorial] Split changes according to which WD they apply to --- selectors-4/Overview.bs | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index 7ec3742de3f..90750abd9bb 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -4408,25 +4408,31 @@ while still preserving as much of the usefulness of '':visited'' as pos

    Changes

    +

    +Changes since the 11 November 2022 Working Draft

    + + * Marked '':blank'' as at-risk and removed the at-risk status from '':read-write'' and '':has()'' + * Added '':popover-open'' pseudo-class. + (Issue 8637) + * Made '':has()'' and the selector argument of '':nth-child()''/'':nth-last-child()'' + no longer forgiving. + (Issue 7676) + * Moved the legacy single-colon pseudo-element syntax into the grammar itself. + (Issue 8122) +

    Changes since the 7 May 2022 Working Draft

    Significant changes since the 7 May 2022 Working Draft: - * Marked '':blank'' as at-risk and removed the at-risk status from '':read-write'' and '':has()'' * Added '':open'' pseudo-class. (Issue 7319, Issue 11039) - * Added '':popover-open'' pseudo-class. - (Issue 8637) * Disallowed [=pseudo-elements=] from '':has()'' unless explicitly allowed by the pseudo-element’s definition. (Issue 7463) * Disallowed nesting of '':has()''. (Issue 7344) - * Made '':has()'' and the selector argument of '':nth-child()''/'':nth-last-child()'' - no longer forgiving. - (Issue 7676) * Defined matching of ''::lang("")'' and of elements not tagged with a language. (Issue 6915) * Untangled the concepts of "scoped" and "relative" selectors completely. @@ -4438,8 +4444,6 @@ Changes since the 7 May 2022 Working Draft (Issue 3760) * Defined '':-webkit-autofill'' [=legacy selector alias=]. (Issue 7474) - * Moved the legacy single-colon pseudo-element syntax into the grammar itself. - (Issue 8122)

    Changes since the 21 November 2018 Working Draft

    From ea34f77c9ff58de4b4d12755aa6e6d9f1cadd819 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Tue, 28 Oct 2025 11:24:45 -0400 Subject: [PATCH 060/124] [selectors-4][editorial] Link most recent WD --- selectors-4/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index 90750abd9bb..627662996c0 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -4411,6 +4411,8 @@ Changes

    Changes since the 11 November 2022 Working Draft

    + Significant changes since the 11 November 2022 Working Draft: + * Marked '':blank'' as at-risk and removed the at-risk status from '':read-write'' and '':has()'' * Added '':popover-open'' pseudo-class. (Issue 8637) From ea30f326bd9e7fea226da938bccb1420fe516efb Mon Sep 17 00:00:00 2001 From: andruud Date: Tue, 21 Oct 2025 09:50:57 +0200 Subject: [PATCH 061/124] [css-nesting-1] Fix warning about multiple elements with the same ID `WARNING: Multiple elements have the same id 'nested-declarations-rule'` --- css-nesting-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 22537b61004..352d99df07c 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -1108,7 +1108,7 @@ Nesting Selector: the ''&'' selector {#nest-selector} █▌ ▐▌ █████▌ ███▌ █▌ █████▌ ████▌ ████▌ █████▌ ███▌ █████ --> -

    +

    The Nested Declarations Rule

    For somewhat-technical reasons, From 4f6d84692ac15bf1cef519addfcd4b0638675c15 Mon Sep 17 00:00:00 2001 From: Munira Date: Tue, 28 Oct 2025 18:35:29 +0300 Subject: [PATCH 062/124] Include panning with and without momentum in relative scrolls (#13022) --- css-scroll-snap-1/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-scroll-snap-1/Overview.bs b/css-scroll-snap-1/Overview.bs index dd7a73062eb..9e68ddec10d 100644 --- a/css-scroll-snap-1/Overview.bs +++ b/css-scroll-snap-1/Overview.bs @@ -993,8 +993,6 @@ Types of Scrolling Methods {#scroll-types}
    Common examples of [=absolute scrolls=] include: - * a panning gesture, - released without momentum * manipulating the scrollbar “thumb” explicitly * programmatically scrolling via APIs such as {{Window/scrollTo()}} * tabbing through the document’s focusable elements @@ -1020,6 +1018,8 @@ Types of Scrolling Methods {#scroll-types} Common examples of [=relative scrolls=] with both an intended direction and end position include: * a “fling” gesture, interpreted with momentum + * a panning gesture, + released with or without momentum * programmatically scrolling via APIs such as {{Window/scrollBy()}} * paging operations such as the PgUp/PgDn keys (or equivalent operations on the scrollbar) From d6bcca1bcad97640082ebbfcf0cd843ff970cae5 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Tue, 21 Oct 2025 00:42:18 +0200 Subject: [PATCH 063/124] [selectors-4][editorial] Added WPTs --- selectors-4/Overview.bs | 1021 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 1014 insertions(+), 7 deletions(-) diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index 627662996c0..02d714508d3 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -29,6 +29,8 @@ At Risk: the '':blank'' pseudo-class Ignored Terms: function token, Document, DocumentFragment, math, h1, shadow tree, querySelector(), quirks mode, button, a, span, object, p, div, q, area, link, label, input, html, em, li, ol, pre, CSS Value Definition Syntax Ignored Vars: identifier, i Ignore MDN Failure: #the-target-within-pseudo +WPT Path Prefix: css/selectors/ +WPT Display: closed
    +

    The Matches-Any Pseudo-class: '':is()''

    + + invalidation/is.html + is-default-ns-001.html + is-default-ns-002.html + is-default-ns-003.html + is-default-ns-002.html + is-default-ns-003.html + is-nested.html + is-specificity-shadow.html + is-specificity.html + is-where-basic.html + is-where-error-recovery.html + is-where-not.html + is-where-pseudo-classes.html + is-where-pseudo-elements.html + is-where-shadow.html + is-where-visited.html + parsing/parse-is-where.html + parsing/parse-is.html + query/query-is.html + + The matches-any pseudo-class, :is(), is a functional pseudo-class taking a <> as its sole argument. @@ -1207,9 +1570,23 @@ The Matches-Any Pseudo-class: '':is()'' as a [=legacy selector alias=] for '':is()'' if needed for backwards-compatibility. +

    The Negation (Matches-None) Pseudo-class: '':not()''

    + + invalidation/not-001.html + invalidation/not-002.html + not-complex.html + not-default-ns-001.html + not-default-ns-002.html + not-default-ns-003.html + not-links.html + not-specificity.html + parsing/parse-not.html + query/query-where.html + + The negation pseudo-class, :not(), is a functional pseudo-class taking a <> as an argument. It represents an element that is not represented by its argument. @@ -1257,6 +1634,12 @@ The Negation (Matches-None) Pseudo-class: '':not()''

    The Specificity-adjustment Pseudo-class: '':where()''

    + + invalidation/where.html + parsing/parse-where.html + pseudo-where-crash.html + + The Specificity-adjustment pseudo-class, :where(), is a functional pseudo-class with the same syntax and functionality as '':is()''. @@ -1303,6 +1686,94 @@ The Specificity-adjustment Pseudo-class: '':where()''

    The Relational Pseudo-class: '':has()''

    + + has-argument-with-explicit-scope.html + has-basic.html + has-display-none-checked.html + has-focus-display-change.html + has-matches-to-uninserted-elements.html + has-nth-of-crash.html + has-relative-argument.html + has-sibling-chrome-crash.html + has-specificity.html + has-style-sharing-001.html + has-style-sharing-002.html + has-style-sharing-003.html + has-style-sharing-004.html + has-style-sharing-005.html + has-style-sharing-006.html + has-style-sharing-007.html + has-style-sharing-pseudo-001.html + has-style-sharing-pseudo-002.html + has-style-sharing-pseudo-003.html + has-style-sharing-pseudo-004.html + has-style-sharing-pseudo-005.html + has-style-sharing-pseudo-006.html + has-style-sharing-pseudo-007.html + has-style-sharing-pseudo-008.html + has-visited.html + invalidation/attribute-or-elemental-selectors-in-has.html + invalidation/child-indexed-pseudo-classes-in-has.html + invalidation/crashtests/has-pseudoclass-only-crash.html + invalidation/defined-in-has.html + invalidation/dir-pseudo-class-in-has.html + invalidation/empty-pseudo-in-has.html + invalidation/fullscreen-pseudo-class-in-has.html + invalidation/has-append-first-node.html + invalidation/has-complexity.html + invalidation/has-css-nesting-shared.html + invalidation/has-in-adjacent-position.html + invalidation/has-in-ancestor-position.html + invalidation/has-in-parent-position.html + invalidation/has-in-sibling-position.html + invalidation/has-invalidation-after-removing-non-first-element.html + invalidation/has-invalidation-first-in-sibling-chain.html + invalidation/has-invalidation-for-wiping-an-element.html + invalidation/has-nested-pseudo-001-crash.html + invalidation/has-nested-pseudo-002-crash.html + invalidation/has-nested-pseudo-003-crash.html + invalidation/has-pseudo-element.html + invalidation/has-pseudoclass-only.html + invalidation/has-sibling-insertion-removal.html + invalidation/has-sibling.html + invalidation/has-side-effect.html + invalidation/has-unstyled.html + invalidation/has-with-nesting-parent-containing-complex.html + invalidation/has-with-nesting-parent-containing-hover.html + invalidation/has-with-not.html + invalidation/has-with-nth-child-sibling-remove.html + invalidation/has-with-nth-child.html + invalidation/has-with-pseudo-class.html + invalidation/host-context-pseudo-class-in-has.html + invalidation/host-has-shadow-tree-element-at-nonsubject-position.html + invalidation/host-has-shadow-tree-element-at-subject-position.html + invalidation/host-pseudo-class-in-has.html + invalidation/input-pseudo-classes-in-has.html + invalidation/is-pseudo-containing-complex-in-has.html + invalidation/is-pseudo-containing-sibling-relationship-in-has.html + invalidation/lang-pseudo-class-in-has-document-element.html + invalidation/lang-pseudo-class-in-has-multiple-document-elements.html + invalidation/lang-pseudo-class-in-has-xhtml.xhtml + invalidation/lang-pseudo-class-in-has.html + invalidation/link-pseudo-class-in-has.html + invalidation/link-pseudo-in-has.html + invalidation/location-pseudo-classes-in-has.html + invalidation/media-loading-pseudo-classes-in-has.html + invalidation/media-pseudo-classes-in-has.html + invalidation/modal-pseudo-class-in-has.html + invalidation/negated-has-in-nonsubject-position.html + invalidation/not-pseudo-containing-complex-in-has.html + invalidation/not-pseudo-containing-sibling-relationship-in-has.html + invalidation/state-in-has.html + invalidation/subject-has-invalidation-with-display-none-anchor-element.html + invalidation/target-pseudo-in-has.html + invalidation/typed-child-indexed-pseudo-classes-in-has.html + invalidation/user-action-pseudo-classes-in-has.html + parsing/parse-has-disallow-nesting-has-inside-has.html + parsing/parse-has-forgiving-selector.html + parsing/parse-has.html + + The relational pseudo-class, :has(), is a functional pseudo-class taking a <> as an argument. It represents an element if any of the relative selectors @@ -1371,9 +1842,14 @@ Type (tag name) selector [[!CSS3NAMESPACE]] (See [[#type-nmsp]].) +

    Universal selector

    + + parsing/parse-universal.html + + The universal selector is a special type selector, that represents an element of any element type. @@ -1407,6 +1883,7 @@ Universal selector For example, ''div :first-child'' and ''div:first-child'' are somewhat difficult to tell apart at a quick glance, but writing the former as ''div *:first-child'' makes the difference obvious. +

    Namespaces in Elemental Selectors

    @@ -1489,9 +1966,14 @@ Namespaces in Elemental Selectors that has not been previously declared is an invalid selector. +

    The Defined Pseudo-class: '':defined''

    + + invalidation/defined.html + + In some host languages, elements can have a distinction between being “defined”/“constructed” or not. The :defined pseudo-class matches elements @@ -1518,9 +2000,19 @@ The Defined Pseudo-class: '':defined''
    custom-element:defined { visibility: visible }
    +

    Attribute selectors

    + + attribute-selectors/style-attribute-selector.html + invalidation/attribute.html + invalidation/class-id-attr.html + missing-right-token.html + parsing/parse-attribute.html + selectors-attr-many.html + + Selectors allow the representation of an element's attributes. When a selector is used as an expression to match against an element, an attribute selector must be considered to match an element if that @@ -1531,6 +2023,7 @@ Attribute selectors multiple-value matching? e.g. [rel ~= next, prev, up, first, last] +

    Attribute presence and value selectors

    @@ -1630,6 +2123,7 @@ Attribute presence and value selectors +

    Substring matching attribute selectors

    @@ -1679,9 +2173,16 @@ Substring matching attribute selectors
    p[title*="hello"] 
    +

    Case-sensitivity

    + + attribute-selectors/attribute-case/cssom.html + attribute-selectors/attribute-case/semantics.html + attribute-selectors/attribute-case/syntax.html + + By default case-sensitivity of attribute names and values in selectors depends on the document language. @@ -1738,6 +2239,10 @@ Case-sensitivity

    Attribute selectors and namespaces

    + + selectors-namespace-001.xml + + The attribute name in an attribute selector is given as a [=CSS qualified name=]: a namespace prefix that has been previously [=declared=] may be prepended to the attribute name separated by the namespace @@ -1777,6 +2282,7 @@ Attribute selectors and namespaces in a namespace. +

    Default attribute values in DTDs

    @@ -1836,9 +2342,15 @@ Default attribute values in DTDs are overridden in the non-default cases' style rules. +

    Class selectors

    + + parsing/parse-class.html + xml-class-selector.xml + + The class selector is given as a full stop (. U+002E) immediately followed by an identifier. It represents an element belonging to the class identified by the identifier, as defined by the document language. @@ -1907,9 +2419,15 @@ Class selectors class selectors are otherwise case-sensitive, only matching class names they are [=identical to=]. [[INFRA]] +

    ID selectors

    + + historical-xmlid.xht + parsing/parse-id.html + + Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, @@ -1965,12 +2483,40 @@ ID selectors ID selectors are otherwise case-sensitive, only matching IDs they are [=identical to=]. [[INFRA]] +

    Linguistic Pseudo-classes

    The Directionality Pseudo-class: '':dir()''

    + + dir-pseudo-in-has.html + dir-pseudo-on-bdi-element.html + dir-pseudo-on-input-element.html + dir-pseudo-update-document-element.html + dir-selector-auto-direction-change-001.html + dir-selector-auto.html + dir-selector-change-001.html + dir-selector-change-002.html + dir-selector-change-003.html + dir-selector-change-004.html + dir-selector-ltr-001.html + dir-selector-ltr-002.html + dir-selector-ltr-003.html + dir-selector-querySelector.html + dir-selector-rtl-001.html + dir-selector-white-space-001.html + dir-style-01a.html + dir-style-01b.html + dir-style-02a.html + dir-style-02b.html + dir-style-03a.html + dir-style-03b.html + dir-style-04.html + invalidation/part-dir.html + + The :dir() pseudo-class allows the author to write selectors that represent an element based on its directionality as determined by the document language. @@ -2007,9 +2553,85 @@ The Directionality Pseudo-class: '':dir()'' '':dir(ltr)'' or '':dir(rtl)'' depending on the resolved directionality of the elements as determined by its contents. [[HTML5]] +

    The Language Pseudo-class: '':lang()''

    + + i18n/css3-selectors-lang-001.html + i18n/css3-selectors-lang-002.html + i18n/css3-selectors-lang-004.html + i18n/css3-selectors-lang-005.html + i18n/css3-selectors-lang-006.html + i18n/css3-selectors-lang-007.html + i18n/css3-selectors-lang-008.html + i18n/css3-selectors-lang-009.html + i18n/css3-selectors-lang-010.html + i18n/css3-selectors-lang-011.html + i18n/css3-selectors-lang-012.html + i18n/css3-selectors-lang-014.html + i18n/css3-selectors-lang-015.html + i18n/css3-selectors-lang-016.html + i18n/css3-selectors-lang-021.html + i18n/css3-selectors-lang-022.html + i18n/css3-selectors-lang-024.html + i18n/css3-selectors-lang-025.html + i18n/css3-selectors-lang-026.html + i18n/css3-selectors-lang-027.html + i18n/css3-selectors-lang-028.html + i18n/css3-selectors-lang-029.html + i18n/css3-selectors-lang-030.html + i18n/css3-selectors-lang-031.html + i18n/css3-selectors-lang-032.html + i18n/css3-selectors-lang-034.html + i18n/css3-selectors-lang-035.html + i18n/css3-selectors-lang-036.html + i18n/css3-selectors-lang-041.html + i18n/css3-selectors-lang-042.html + i18n/css3-selectors-lang-044.html + i18n/css3-selectors-lang-045.html + i18n/css3-selectors-lang-046.html + i18n/css3-selectors-lang-047.html + i18n/css3-selectors-lang-048.html + i18n/css3-selectors-lang-049.html + i18n/css3-selectors-lang-050.html + i18n/css3-selectors-lang-051.html + i18n/css3-selectors-lang-052.html + i18n/css3-selectors-lang-054.html + i18n/css3-selectors-lang-055.html + i18n/css3-selectors-lang-056.html + i18n/lang-pseudo-class-across-shadow-boundaries.html + i18n/lang-pseudo-class-disconnected.html + i18n/lang-pseudo-class-empty-attribute.xhtml + invalidation/part-lang.html + selectors-4/lang-000.html + selectors-4/lang-001.html + selectors-4/lang-002.html + selectors-4/lang-003.html + selectors-4/lang-004.html + selectors-4/lang-005.html + selectors-4/lang-006.html + selectors-4/lang-007.html + selectors-4/lang-008.html + selectors-4/lang-009.html + selectors-4/lang-010.html + selectors-4/lang-011.html + selectors-4/lang-012.html + selectors-4/lang-013.html + selectors-4/lang-014.html + selectors-4/lang-015.html + selectors-4/lang-016.html + selectors-4/lang-017.html + selectors-4/lang-018.html + selectors-4/lang-019.html + selectors-4/lang-020.html + selectors-4/lang-021.html + selectors-4/lang-022.html + selectors-4/lang-023.html + selectors-4/lang-024.html + selectors-4/lang-025.html + + If the document language specifies how the (human) content language of an element is determined, it is possible to write selectors that @@ -2121,6 +2743,11 @@ Location Pseudo-classes + + invalidation/any-link-attribute-removal.html + invalidation/any-link-pseudo.html + + The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [[HTML5]], @@ -2133,6 +2760,17 @@ The Hyperlink Pseudo-class: '':any-link'' + + caret-color-visited-inheritance.html + text-emphasis-visited-inheritance.html + text-fill-color-visited-inheritance.html + text-stroke-color-visited-inheritance.html + visited-in-visited-compound.html + visited-inheritance.html + visited-nested.html + visited-part-crash.html + + User agents commonly display unvisited [[#the-any-link-pseudo|hyperlinks]] differently from previously visited ones. Selectors provides the pseudo-classes @@ -2276,6 +2914,11 @@ The Target Pseudo-class: '':target''

    The Reference Element Pseudo-class: '':scope''

    + + scope-selector.html + scope-without-scoping.html + + In some contexts, selectors are matched with respect to one or more [=scoping roots=], such as when calling the {{Element/querySelector()}} method in [[DOM]]. @@ -2309,6 +2952,7 @@ The Reference Element Pseudo-class: '':scope'' as the document fragment itself can't be the [=subject of the selector=]. +

    User Action Pseudo-classes

    @@ -2350,6 +2994,12 @@ User Action Pseudo-classes

    The Pointer Hover Pseudo-class: '':hover''

    + + hover-001-manual.html + hover-002.html + remove-hovered-element.html + + The :hover pseudo-class applies while the user designates an element (or pseudo-element) with a pointing device, @@ -2375,6 +3025,7 @@ The Pointer Hover Pseudo-class: '':hover'' it is possible for '':hover'' to apply to an element that is not underneath the pointing device. +

    The Activation Pseudo-class: '':active''

    @@ -2403,6 +3054,12 @@ The Activation Pseudo-class: '':active''

    The Input Focus Pseudo-class: '':focus''

    + + focus-display-none-001.html + focus-in-focus-event-001.html + focus-in-focusin-event-001.html + + The :focus pseudo-class applies while an element (or pseudo-element) has the focus (accepts keyboard or other forms of input). @@ -2424,9 +3081,58 @@ The Input Focus Pseudo-class: '':focus'' See CSSWG issue (CSS) and WHATWG issue (HTML). +

    The Focus-Indicated Pseudo-class: '':focus-visible''

    + + focus-visible-001.html + focus-visible-002.html + focus-visible-003.html + focus-visible-004.html + focus-visible-005.html + focus-visible-006.html + focus-visible-007.html + focus-visible-008.html + focus-visible-009.html + focus-visible-010.html + focus-visible-011.html + focus-visible-012.html + focus-visible-013.html + focus-visible-014.html + focus-visible-015.html + focus-visible-016.html + focus-visible-017-2.html + focus-visible-017.html + focus-visible-018-2.html + focus-visible-018.html + focus-visible-019.html + focus-visible-020.html + focus-visible-021.html + focus-visible-023.html + focus-visible-024.html + focus-visible-025.html + focus-visible-026.html + focus-visible-027.html + focus-visible-028.html + focus-visible-script-focus-001.html + focus-visible-script-focus-004.html + focus-visible-script-focus-005.html + focus-visible-script-focus-008-b.html + focus-visible-script-focus-008.html + focus-visible-script-focus-009.html + focus-visible-script-focus-010.html + focus-visible-script-focus-011.html + focus-visible-script-focus-012.html + focus-visible-script-focus-013.html + focus-visible-script-focus-014.html + focus-visible-script-focus-015.html + focus-visible-script-focus-018.html + focus-visible-script-focus-019.html + focus-visible-script-focus-020.html + parsing/parse-focus-visible.html + + While the '':focus'' [=pseudo-class=] always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), @@ -2502,9 +3208,33 @@ The Focus-Indicated Pseudo-class: '':focus-visible'' so that authors using '':focus-visible'' will not also need to disable the default '':focus'' style. +

    The Focus Container Pseudo-class: '':focus-within''

    + + focus-within-001.html + focus-within-002.html + focus-within-003.html + focus-within-004.html + focus-within-005.html + focus-within-006.html + focus-within-007.html + focus-within-008.html + focus-within-009.html + focus-within-010.html + focus-within-011.html + focus-within-012.html + focus-within-013.html + focus-within-display-none-001.html + focus-within-shadow-001.html + focus-within-shadow-002.html + focus-within-shadow-003.html + focus-within-shadow-004.html + focus-within-shadow-005.html + focus-within-shadow-006.html + + The :focus-within pseudo-class applies to any element (or pseudo-element) for which the '':focus'' pseudo-class applies, @@ -2513,6 +3243,7 @@ The Focus Container Pseudo-class: '':focus-within'' (including non-element nodes, such as text nodes) matches the conditions for matching '':focus''. +

    The Interest Pseudo-classes: '':interest-source'' and '':interest-target''

    @@ -2631,6 +3362,10 @@ Resource State Pseudo-classes

    Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-classes

    + + media/media-playback-state.html + + The :playing pseudo-class represents an element that is capable of being “played” or “paused”, when that element is “playing”. @@ -2653,6 +3388,10 @@ Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-cla

    Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes

    + + media/media-loading-state.html + + The :buffering pseudo-class represents an element that is capable of being “played” or “paused”, when that element cannot continue playing @@ -2673,9 +3412,14 @@ Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes Whenever '':stalled'' matches an element, '':playing'' also matches the element.) +

    Sound State: the '':muted'' and '':volume-locked'' pseudo-classes

    + + media/sound-state.html + + The :muted pseudo-class represents an element that is capable of making sound, but is currently “muted“ (forced silent). @@ -2689,12 +3433,20 @@ Sound State: the '':muted'' and '':volume-locked'' pseudo-classes (For the <{audio}> and <{video}> elements of HTML, see the algorithm for setting the element's [=HTMLMediaElement/effective media volume=]. [[HTML]]) +

    Element Display State Pseudo-classes

    Collapse State: the '':open'' pseudo-class

    + + open-pseudo.html + selectors-4/details-open-pseudo-001.html + selectors-4/details-open-pseudo-002.html + selectors-4/details-open-pseudo-003.html + + The :open pseudo-class represents an element that has both “open” and “closed” states, and which is currently in the “open” state. @@ -2714,9 +3466,14 @@ Collapse State: the '':open'' pseudo-class Note: A ":closed" pseudo-class might be added in the future once the full set of things that support '':open'' is known. +

    Popover State: the '':popover-open'' pseudo-class

    + + popover-open-with-has-sibling-selector.html + + The :popover-open pseudo-class represents an element that has both “popover-showing” and “popover-hidden” states and which is currently in the “popover-showing” state. @@ -2731,9 +3488,14 @@ Popover State: the '':popover-open'' pseudo-class but is exemplified by the presence of the HTML <{html-global/popover}> attribute and the associated popover visibility state. + + + modal-pseudo-class.html + + The :modal pseudo-class represents an element which is in a state that excludes all interaction with elements outside it until it has been dismissed. @@ -2748,6 +3510,7 @@ Modal (Exclusive Interaction) State: the '':modal'' pseudo-class since this prevents interaction with the rest of the page. +

    Fullscreen Presentation State: the '':fullscreen'' pseudo-class

    @@ -2756,6 +3519,7 @@ Fullscreen Presentation State: the '':fullscreen'' pseudo-class takes up most (usually all) of the screen, such as that defined by the Fullscreen API. [[FULLSCREEN]] +

    Picture-in-Picture Presentation State: the '':picture-in-picture'' pseudo-class

    @@ -2766,18 +3530,25 @@ Picture-in-Picture Presentation State: the '':picture-in-picture'' pseudo-class< while being displayed over other content, for example when using the Picture-in-Picture API. [[picture-in-picture]] +

    The Input Pseudo-classes

    The pseudo-classes in this section mostly apply to elements that take user input, such as HTML's input element. +

    Input Control States

    The '':enabled'' and '':disabled'' Pseudo-classes

    + + invalidation/enabled-disabled.html + pseudo-enabled-disabled.html + + The :enabled pseudo-class represents user interface elements that are in an enabled state; such elements must have a corresponding disabled state. @@ -2801,6 +3572,11 @@ The '':enabled'' and '':disabled'' Pseudo-classes

    The Mutability Pseudo-classes: '':read-only'' and '':read-write''

    + + selector-read-write-type-change-001.html + selector-read-write-type-change-002.html + + An element matches :read-write if it is user-alterable, as defined by the document language. Otherwise, it is :read-only. @@ -2811,6 +3587,15 @@ The Mutability Pseudo-classes: '':read-only'' and '':read-write''

    The Placeholder-shown Pseudo-class: '':placeholder-shown''

    + + invalidation/placeholder-shown.html + placeholder-shown.html + selector-placeholder-shown-emptify-placeholder.html + selector-placeholder-shown-type-change-001.html + selector-placeholder-shown-type-change-002.html + selector-placeholder-shown-type-change-003.html + + Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in [[HTML5]]. @@ -2849,6 +3634,7 @@ The Default-option Pseudo-class: '':default'' the initially-selected <option>(s) in a <select>, and a few other elements. +

    Input Value States

    @@ -2981,6 +3767,12 @@ The Range Pseudo-classes: '':in-range'' and '':out-of-range''

    The Optionality Pseudo-classes: '':required'' and '':optional''

    + + selector-required-type-change-001.html + selector-required-type-change-002.html + selector-required.html + + A form element is :required or :optional if a value for it is, respectively, required or optional before the @@ -2990,6 +3782,14 @@ The Optionality Pseudo-classes: '':required'' and '':optional''

    The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''

    + + invalidation/user-valid-user-invalid.html + user-invalid-form-submission-invalidation.html + user-invalid.html + user-valid.html + valid-invalid-form-fieldset.html + + The :user-invalid and the :user-valid pseudo-classes represent an element with incorrect or correct input, respectively, @@ -3037,9 +3837,14 @@ The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid'' +

    Tree-Structural pseudo-classes

    + + selector-structural-pseudo-root.html + + Selectors introduces the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or @@ -3057,6 +3862,10 @@ Tree-Structural pseudo-classes

    '':root'' pseudo-class

    + + root-siblings.html + + The :root pseudo-class represents an element that is the root of the document. @@ -3065,9 +3874,14 @@ Tree-Structural pseudo-classes In HTML, this will be the <{html}> element (unless scripting has been used to modify the document). +

    '':empty'' pseudo-class

    + + selectors-empty-001.xml + + The :empty pseudo-class represents an element that has no children except, optionally, document white space characters. @@ -3112,9 +3926,87 @@ Tree-Structural pseudo-classes elements which authors perceive of as empty can be selected by this selector, as they expect. +

    Child-indexed Pseudo-classes

    + + child-indexed-no-parent.html + child-indexed-pseudo-class.html + invalidation/negated-nth-child-when-ancestor-changes.html + invalidation/negated-nth-last-child-when-ancestor-changes.html + invalidation/nth-child-containing-ancestor.html + invalidation/nth-child-in-shadow-root.html + invalidation/nth-child-of-attr-largedom.html + invalidation/nth-child-of-attr.html + invalidation/nth-child-of-class-prefix.html + invalidation/nth-child-of-class.html + invalidation/nth-child-of-has.html + invalidation/nth-child-of-id-prefix.html + invalidation/nth-child-of-ids.html + invalidation/nth-child-of-in-ancestor.html + invalidation/nth-child-of-in-is.html + invalidation/nth-child-of-in-shadow-root.html + invalidation/nth-child-of-is.html + invalidation/nth-child-of-pseudo-class.html + invalidation/nth-child-of-sibling.html + invalidation/nth-child-when-ancestor-changes.html + invalidation/nth-child-when-sibling-changes.html + invalidation/nth-child-whole-subtree.html + invalidation/nth-last-child-containing-ancestor.html + invalidation/nth-last-child-in-shadow-root.html + invalidation/nth-last-child-of-attr.html + invalidation/nth-last-child-of-class-prefix.html + invalidation/nth-last-child-of-class.html + invalidation/nth-last-child-of-has.html + invalidation/nth-last-child-of-id-prefix.html + invalidation/nth-last-child-of-ids.html + invalidation/nth-last-child-of-in-ancestor.html + invalidation/nth-last-child-of-in-is.html + invalidation/nth-last-child-of-in-shadow-root.html + invalidation/nth-last-child-of-is.html + invalidation/nth-last-child-of-pseudo-class.html + invalidation/nth-last-child-of-sibling.html + invalidation/nth-last-child-when-ancestor-changes.html + invalidation/nth-last-child-when-sibling-changes.html + nth-child-and-nth-last-child.html + nth-child-of-attribute.html + nth-child-of-classname-002.html + nth-child-of-classname.html + nth-child-of-complex-selector-many-children-2.html + nth-child-of-complex-selector-many-children.html + nth-child-of-complex-selector.html + nth-child-of-compound-selector.html + nth-child-of-has.html + nth-child-of-nesting.html + nth-child-of-no-space-after-of.html + nth-child-of-not.html + nth-child-of-nth-child.html + nth-child-of-pseudo.html + nth-child-of-tagname.html + nth-child-of-universal-selector.html + nth-child-specificity-1.html + nth-child-specificity-2.html + nth-child-specificity-3.html + nth-child-specificity-4.html + nth-child-spurious-brace-crash.html + nth-last-child-invalid.html + nth-last-child-of-classname.html + nth-last-child-of-complex-selector.html + nth-last-child-of-compound-selector.html + nth-last-child-of-nesting.html + nth-last-child-of-no-space-after-of.html + nth-last-child-of-style-sharing-1.html + nth-last-child-of-style-sharing-2.html + nth-last-child-of-tagname.html + nth-last-child-specificity-1.html + nth-last-child-specificity-2.html + nth-last-child-specificity-3.html + nth-last-child-specificity-4.html + sharing-in-svg-use.html + parsing/parse-anplusb.html + + The pseudo-classes defined in this section select elements based on their index amongst their inclusive siblings. @@ -3127,6 +4019,12 @@ Child-indexed Pseudo-classes

    '':nth-child()'' pseudo-class

    + + nth-of-invalid.html + invalidation/crashtests/nth-child-of-attribute-crash.html + invalidation/nth-of-namespace-class-invalidation-crash.html + + The :nth-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements @@ -3255,6 +4153,11 @@ Child-indexed Pseudo-classes

    '':first-child'' pseudo-class

    + + first-child.html + invalidation/first-child-last-child.html + + The :first-child pseudo-class represents an element that is first among its inclusive siblings. Same as '':nth-child(1)''. @@ -3297,6 +4200,10 @@ Child-indexed Pseudo-classes

    '':last-child'' pseudo-class

    + + last-child.html + + The :last-child pseudo-class represents an element that is last among its inclusive siblings. Same as '':nth-last-child(1)''. @@ -3312,6 +4219,10 @@ Child-indexed Pseudo-classes

    '':only-child'' pseudo-class

    + + only-child.html + + The :only-child pseudo-class represents an element that has no siblings. Same as '':first-child:last-child'' @@ -3322,6 +4233,10 @@ Child-indexed Pseudo-classes

    Typed Child-indexed Pseudo-classes

    + + nth-of-type-namespace.html + + The pseudo-classes in this section are similar to the Child Index Pseudo-classes, but they resolve based on an element's index among elements of the same type (tag name) in their sibling list. @@ -3351,10 +4266,13 @@ Typed Child-indexed Pseudo-classes That is, ''img:nth-of-type(2)'' is equivalent to ''*:nth-child(2 of img)''. -

    '':nth-last-of-type()'' pseudo-class

    + + last-of-type.html + + The :nth-last-of-type(An+B) pseudo-class notation represents the same elements that would be matched by '':nth-last-child(|An+B| of |S|)'', where |S| is a [=type selector=] and namespace prefix matching the element in question. @@ -3380,6 +4298,17 @@ Typed Child-indexed Pseudo-classes

    '':first-of-type'' pseudo-class

    + + first-of-type.html + invalidation/negated-always-matches-negated-first-of-type-when-ancestor-changes.html + invalidation/negated-first-of-type-in-nonsubject-position.html + invalidation/negated-is-always-matches-negated-first-of-type-when-ancestor-changes.html + invalidation/negated-is-never-matches-negated-first-of-type-when-ancestor-changes.html + invalidation/negated-negated-first-of-type-when-ancestor-changes.html + invalidation/negated-never-matches-negated-first-of-type-when-ancestor-changes.html + of-type-selectors.xhtml + + The :first-of-type pseudo-class represents the same element as '':nth-of-type(1)''. @@ -3413,6 +4342,15 @@ Typed Child-indexed Pseudo-classes

    '':last-of-type'' pseudo-class

    + + invalidation/negated-always-matches-negated-last-of-type-when-ancestor-changes.html + invalidation/negated-is-always-matches-negated-last-of-type-when-ancestor-changes.html + invalidation/negated-is-never-matches-negated-last-of-type-when-ancestor-changes.html + invalidation/negated-last-of-type-invalidation.html + invalidation/negated-negated-last-of-type-when-ancestor-changes.html + invalidation/negated-never-matches-negated-last-of-type-when-ancestor-changes.html + + The :last-of-type pseudo-class represents the same element as '':nth-last-of-type(1)''. @@ -3427,6 +4365,10 @@ Typed Child-indexed Pseudo-classes

    '':only-of-type'' pseudo-class

    + + only-of-type.html + + The :only-of-type pseudo-class represents the same element as '':first-of-type:last-of-type''. @@ -3437,6 +4379,10 @@ Combinators

    Descendant combinator ( )

    + + parsing/parse-descendant.html + + At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an em element that is contained within an H1 element"). @@ -3480,9 +4426,14 @@ Descendant combinator ( )
    div p *[href]
    +

    Child combinator (>)

    + + parsing/parse-child.html + + A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) code point and @@ -3511,9 +4462,19 @@ Child combinator (>) For information on selecting the first child of an element, please see the section on the '':first-child'' pseudo-class above. +

    Next-sibling combinator (+)

    + + invalidation/insert-sibling-001.html + invalidation/insert-sibling-002.html + invalidation/insert-sibling-003.html + invalidation/insert-sibling-004.html + invalidation/sibling.html + parsing/parse-sibling.html + + The next-sibling combinator is made of the “plus sign” (U+002B, +) code point that separates two compound selectors. @@ -3580,6 +4541,7 @@ Grid-Structural Selectors are defined. In a column-primary format, these pseudo-classes match against row associations instead. +

    Column combinator (||)

    @@ -3613,6 +4575,7 @@ Column combinator (||) +

    '':nth-col()'' pseudo-class

    @@ -3629,7 +4592,6 @@ Column combinator (||) The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation. -

    '':nth-last-col()'' pseudo-class

    @@ -3645,6 +4607,7 @@ Column combinator (||) The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation. +

    Calculating a selector's specificity

    @@ -3747,9 +4710,14 @@ Calculating a selector's specificity specified in an HTML style attribute is described in CSS Style Attributes. [[CSSSTYLEATTR]] +

    Grammar

    + + selectors-attr-white-space-001.html + + Selectors are [=CSS/parsed=] according to the following grammar:
    @@ -3863,6 +4831,7 @@ Grammar
     		be written with only a single ":" character at their front,
     		making them resemble a <>.
     
    +
     

    <> and <>

    @@ -3929,6 +4898,7 @@ API Hooks and details like the exact order of elements returned from querySelector seem to make more sense being defined in the DOM specification than in Selectors. +

    Parse A Selector

    @@ -3953,6 +4923,7 @@ Parse A Selector return selector. +

    Parse A Relative Selector

    @@ -3977,6 +4948,7 @@ Parse A Relative Selector return selector. +

    Match a Selector Against an Element

    @@ -4021,6 +4993,7 @@ Match a Selector Against an Element Otherwise, return failure. +

    Match a Selector Against a Pseudo-element

    @@ -4052,6 +5025,7 @@ Match a Selector Against a Pseudo-element (that is, if this doesn't happen for any of the complex selectors in selector), return failure. +

    Match a Selector Against a Tree

    @@ -4123,6 +5097,7 @@ Match a Selector Against a Tree +

    Appendix A: Guidance on Mapping Source Documents & Data to an Element Tree

    @@ -4230,6 +5205,10 @@ Appendix A: Guidance on Mapping Source Documents & Data to an Element Tree Appendix B: Obsolete but Required -webkit- Parsing Quirks for Web Compat + + webkit-pseudo-element.html + + This appendix is normative. Due to legacy Web-compat constraints, @@ -4303,6 +5282,7 @@ Appendix B: Obsolete but Required -webkit- Parsing Quirks for Web C and all right-thinking web developers. +

    Appendix C: Example Privacy-Preserving '':visited'' Restrictions

    @@ -4404,7 +5384,6 @@ while still preserving as much of the usefulness of '':visited'' as pos -

    Changes

    @@ -4447,6 +5426,7 @@ Changes since the 7 May 2022 Working Draft * Defined '':-webkit-autofill'' [=legacy selector alias=]. (Issue 7474) +

    Changes since the 21 November 2018 Working Draft

    @@ -4483,6 +5463,7 @@ Changes since the 21 November 2018 Working Draft when a <> token is missing. +

    Changes since the 2 February 2018 Working Draft

    @@ -4511,6 +5492,7 @@ Changes since the 2 February 2018 Working Draft (See [[#grammar]].) +

    Changes since the 2 May 2013 Working Draft

    @@ -4562,6 +5544,7 @@ Changes since the 2 May 2013 Working Draft Note: The 1 February 2018 draft included an inadvertent commit of unfinished work; 2 February 2018 has reverted this commit (and fixed some links because why not). +

    Changes since the 23 August 2012 Working Draft

    @@ -4578,6 +5561,7 @@ Changes since the 23 August 2012 Working Draft
  • The '':local-link()'' pseudo-class now ignores trailing slashes. +

    Changes since the 29 September 2011 Working Draft

    @@ -4591,6 +5575,7 @@ Changes since the 29 September 2011 Working Draft
  • Changed column combinator from double slash to double pipe. +

    Changes Since Level 3

    @@ -4612,6 +5597,7 @@ Changes Since Level 3
  • Added case-insensitive / case-sensitive attribute-value matching flags. +

    Acknowledgements

    @@ -4631,7 +5617,7 @@ Acknowledgements Lea Verou -

    Privacy Considerations

    +

    Privacy Considerations

    • @@ -4648,5 +5634,26 @@ Acknowledgements The Privacy Considerations could also be considered to affect Security. - - + + + \ No newline at end of file From 1a7ca79d62ae0cd10ad0a4f63a6acdf4a29ed65f Mon Sep 17 00:00:00 2001 From: andruud Date: Tue, 28 Oct 2025 16:58:56 +0100 Subject: [PATCH 064/124] [css-cascade-5] Add the revert-rule keyword (#12992) A link-defaults entry is needed for 'if()' to avoid links to css-conditional-values-1. --- css-cascade-5/Overview.bs | 41 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/css-cascade-5/Overview.bs b/css-cascade-5/Overview.bs index daa5995e33c..303972752f2 100644 --- a/css-cascade-5/Overview.bs +++ b/css-cascade-5/Overview.bs @@ -31,6 +31,7 @@ Informative Classes: ex spec:dom; type:dfn; text:shadow tree spec:css-color-4; type:property; text:color spec:css-values-3; type: value; text:ex +spec:css-values-5; type: function; text:if() spec:css-conditional-3; type:at-rule; text:@media spec:mediaqueries-4; type:type; for:@media; text:all spec:mediaqueries-4; type:type; text: @@ -1817,7 +1818,7 @@ Explicit Defaulting As specified in CSS Values and Units [[!css-values-3]], all CSS properties can accept these values. - The keywords ''revert'' and ''revert-layer'' + The keywords ''revert'', ''revert-layer'', and ''revert-rule'' are cascade-dependent keywords; some contexts may restrict their use while allowing the other [=CSS-wide keywords=]. @@ -1954,6 +1955,42 @@ Rolling Back Cascade Layers: the ''revert-layer'' keyword as it is for ''revert'', and thus effectively forms its own [=cascade layer=]. +

      +Rolling Back Rules: the ''revert-rule'' keyword

      + + The revert-rule [=CSS-wide keyword=] + rolls back the cascade similar to ''revert'' and ''revert-layer'', + except it works by [=style rule=] + rather than [=cascade origin=] or [=cascade layer=]. + + If the cascaded value of a property is the ''revert-rule'' keyword, + the cascaded value is rolled back + such that the specified value is calculated + as if the current [=style rule=] had not been present at all. + +
      + The ''revert-rule'' keyword can be combined with ''if()'' + to conditionally ignore a declaration: + +
      +		div {
      +		  border-radius: 5px;
      +		}
      +		.apply-sharp {
      +		  border-radius: if(style(--mode:sharp): 0px; else: revert-rule);
      +		}
      +		
      + + Given an element <div class=apply-sharp>, + the above style sets ''border-radius'' to 0px + only when the [=computed value=] of --mode + is sharp. +
  • + + + The ''revert-rule'' keyword behaves like ''revert-layer'' + in the [=author origin=]. +

    Layer APIs

    @@ -2025,6 +2062,8 @@ Changes since the 13 Jan 2022 Candidate Recommendation Snapshot

    Non-trivial changes since the 13 January 2022 Candidate Recommendation Snapshot: + * Added the ''revert-rule'' keyword. + (Issue 10443) * Clarify that all “aliases” of a property are reverted by ''revert''/''revert-layer''. * Clarify that style sheets are ordered in [[final CSS style sheets]] order. * Clarify that only ''@layer'' statement rules are ignored when checking validity of ''@import'', not empty ''@layer'' block rules. From 3232f5c3230106d437e0f10e56e72bd08088b62c Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Tue, 28 Oct 2025 17:24:17 +0000 Subject: [PATCH 065/124] [css-animations-2] Nope, the trigger state actually does live on the trigger, duh. --- css-animations-2/Overview.bs | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index 539f607312e..bc6fb0839ac 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -889,7 +889,7 @@ or leaves the trigger's exit range. It is defined on an element with the 'timeline-trigger' shorthand property, or its longhands. -A [=timeline trigger=] [=trigger instance=] has a binary trigger state associated with it; +A [=timeline trigger=] has a binary trigger state associated with it; it is initially "untriggered". While it's "untriggered", the associated [=timeline=] entering (or starting in) the trigger's [=enter range=] @@ -1113,10 +1113,9 @@ An [=event trigger=] can be defined as either stateless or stateful: [=Event triggers=] are activated when one of its associated {{Event}}s are fired on the page with the trigger-defining element as its {{Event/target}}. If it's stateful, -then its [=trigger instance=] has a binary trigger state -associated with it, +it has a binary trigger state associated with it, initially "untriggered": -while "untriggered", it only activates when the [=event trigger=] receives one of its [=enter events=], +while "untriggered", it only activates when the defining element receives one of its [=enter events=], performing an associated enter action and switching its [=event trigger/trigger state=] to "triggered"; while "triggered", it only activates when it receives one of its [=exit events=], From 26e41ee7cb5d437123504d01d9f93027cd6b34fd Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 28 Oct 2025 13:19:59 -0700 Subject: [PATCH 066/124] [css-ruby-1][editorial] Gloss in-flow jargon (#13031) --- css-ruby-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-ruby-1/Overview.bs b/css-ruby-1/Overview.bs index 896ec807a13..5ab2301389a 100644 --- a/css-ruby-1/Overview.bs +++ b/css-ruby-1/Overview.bs @@ -318,7 +318,7 @@ Anonymous Ruby Box Generation
    1. [=Inlinify=] block-level boxes: - Any in-flow boxes directly contained by a + Any [=in-flow=] boxes directly contained by a [=ruby container=], [=ruby base container=], [=ruby annotation container=], From 284a63304b68489ec75179820d90908bab7ba7cc Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Tue, 28 Oct 2025 21:43:35 +0100 Subject: [PATCH 067/124] [selectors-5][editorial] Added initial WPTs --- selectors-5/Overview.bs | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/selectors-5/Overview.bs b/selectors-5/Overview.bs index dcf734d8746..46f7e9cbbe9 100644 --- a/selectors-5/Overview.bs +++ b/selectors-5/Overview.bs @@ -11,6 +11,8 @@ Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contac Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199 Abstract: Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. They are a core component of CSS (Cascading Style Sheets), which uses Selectors to bind style properties to elements in the document. Abstract: Selectors Level 5 describes the selectors that already exist in [[!selectors-4]], and further introduces new selectors for CSS and other languages that may need them. +WPT Path Prefix: css/selectors/ +WPT Display: closed

      @@ -153,7 +154,10 @@ Line Decoration: Underline, Overline, and Strike-Through

      which the underline is propagated. The final line of text is fuchsia, but the underline underneath it is still the blue underline from the anonymous inline element. - Sample rendering of the above underline example + Sample rendering of the above underline example This diagram shows the boxes involved in the example above. The rounded aqua line represents the anonymous inline element wrapping the inline contents of the paragraph element, the rounded blue line @@ -167,7 +171,7 @@ Line Decoration: Underline, Overline, and Strike-Through span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; }
      -                  <div>Help, help! <span>I am under a hat!</span></div>
      +			<div>Help, help! <span>I am under a hat!</span></div>
       		
      ...the <div> is the [=decorating box=] for its underline (in black), which is rendered uninterrupted through both the <div> and the <span>. @@ -177,7 +181,10 @@ Line Decoration: Underline, Overline, and Strike-Through overrides the blue text shadow on the <div>. As a result, when the shadows are painted, the shadow of the <div>’s underline is disjoint across the two elements. - Sample rendering of the above underline example + Sample rendering of the above underline example Note: Line decorations are propagated through the box tree, @@ -202,7 +209,7 @@ Text Decoration Lines: the 'text-decoration-line' property This property, which is a sub-property of the 'text-decoration' shorthand, specifies what line decorations, if any, are added by the element. - Values other than ''text-decoration-line'' + Values other than ''text-decoration-line/none'' cause the element to originate the indicated text decorations, and to apply and propagate it as described [[#line-decoration|above]]. @@ -396,8 +403,8 @@ Determining the Position and Thickness of Line Decorations The line decoration positions are then calculated per line as follows - (treating over-positioned underlines as over lines - and under-positioned overlines as under lines): + (treating over-positioned underlines as over lines + and under-positioned overlines as under lines):
      over lines @@ -465,7 +472,10 @@ Determining the Position and Thickness of Line Decorations Using the same example, a line-through would in the second fragment, instead of averaging the two font sizes, split the line-through into two segments: -

      +

      In both cases, however, the superscript, due to the vertical-alignment shift, has no effect on the position of the line. @@ -559,11 +569,13 @@ Text Underline Position: the 'text-underline-position' property

      In a typical Latin font, the underline is positioned slightly
-				         below the alphabetic baseline, leaving a gap between the line
-				         and the bottom of most Latin letters, but crossing through
-				         descenders such as the stem of a 'p'. + alt="In a typical Latin font, the underline is positioned slightly + below the alphabetic baseline, leaving a gap between the line + and the bottom of most Latin letters, but crossing through + descenders such as the stem of a 'p'." + src="images/underline-position-alphabetic.png" + width="231" + height="61">

      A typical “alphabetic” underline is positioned just below the alphabetic baseline

      @@ -585,7 +597,9 @@ Text Underline Position: the 'text-underline-position' property In a typical Latin font, the underline is far enough
 			           below the text that it does not cross the bottom of a 'g'. + src="images/underline-position-under.png" + width="405" + height="68">

      ''text-underline-position: under''

      @@ -628,13 +642,17 @@ Text Underline Position: the 'text-underline-position' property In mixed Japanese-Latin vertical text, 'text-underline-position: left'
 					          places the underline on the left side of the text. + src="images/underline-position-left.png" + width="40" + height="168"> In mixed Japanese-Latin vertical text, 'text-underline-position: right'
 					          places the underline on the right side of the text. + src="images/underline-position-right.png" + width="40" + height="168"> ''text-underline-position/left'' @@ -774,10 +792,14 @@ Text Decoration Line Uniformity
      A single underline drawn under varying font sizes and vertical positions must be a single line. + alt="A single underline drawn under varying font sizes and vertical positions must be a single line." + width="125" + height="81"> vs. Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect. + alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect." + width="120" + height="80">

      Correct and incorrect rendering of <u>A<sup>B</sup><big>C</big>D</u>

      @@ -794,8 +816,8 @@ Text Decoration Line Uniformity UA consideration of descendant content will therefore result in better typography.
      - - + +

      Due to the central baseline alignment of vertical text, a left-side underline on small vertical text will cut through the text @@ -821,8 +843,10 @@ Text Decoration Line Uniformity

      An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
-		             whereas an underline for the entire text is drawn at the appropriate position for full-size text. + alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript, + whereas an underline for the entire text is drawn at the appropriate position for full-size text." + width="80" + height="38">

      Example of underline applied to superscripted text vs. underline applied to text containing a superscript +

    2. Altered the border-radius outset adjustment, + so the radius reduction factor in the + minimum radius percentage of the corner, makes it less pronounced + the closer the corner's border-radius gets to 50%. + (Issue 7103) +
    3. +
    4. Fixed syntax of 'box-shadow' to avoid allowing negative blur radii, + aligning it with the prose. +
    5. Cross linked to 'ink overflow' terminology
    6. + +

      Changes since the 14 February 2023 Candidate Recommendation Snapshot

      @@ -3687,8 +3703,6 @@ Changes since the 14 February 2023 Candidate Recommendation Snapshot [=CSS/value definition syntax=].
    7. Fixed the definition for where box shadows apply. (Issue 9286) -
    8. Fixed syntax of 'box-shadow' to avoid allowing negative blur radii, - aligning it with the prose. From 24679bb9f4df1c58f2ae8ec474c02f4fade7743b Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Wed, 5 Nov 2025 14:25:35 -0500 Subject: [PATCH 095/124] [css-backgrounds-3][editorial] link defaults --- css-backgrounds-3/Overview.bs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css-backgrounds-3/Overview.bs b/css-backgrounds-3/Overview.bs index e0a0739ca2a..2c451d0b7f5 100644 --- a/css-backgrounds-3/Overview.bs +++ b/css-backgrounds-3/Overview.bs @@ -36,6 +36,10 @@ spec:css-color-4; type:value; text:transparent spec:selectors-3; type:selector; text: ::first-letter spec:selectors-3; type:selector; text: ::first-line spec:css-values-3; type:type; text: +spec:html; type:element; text:body +spec:css-sizing-3; type:dfn; text:size +spec:css-sizing-3; type:dfn; text:width +spec:css-sizing-3; type:dfn; text:height

      Introduction

      From 761f47189f0bcccb6c2cdcbeff7d6fb9365c3db4 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Wed, 5 Nov 2025 14:38:04 -0500 Subject: [PATCH 096/124] [css-backgrounds-4][editorial] update wpt --- css-backgrounds-3/Overview.bs | 39 +++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/css-backgrounds-3/Overview.bs b/css-backgrounds-3/Overview.bs index 2c451d0b7f5..ec1bb2221e8 100644 --- a/css-backgrounds-3/Overview.bs +++ b/css-backgrounds-3/Overview.bs @@ -951,8 +951,28 @@ Painting Area: the 'background-clip' property background-clip-color.html background-clip-content-box-001.html background-clip-content-box-002.html + background-clip-content-box-with-border-radius-002.html + background-clip-content-box-with-border-radius-003.html + background-clip-padding-box-with-border-radius-002.html + background-clip-padding-box-with-border-radius-003.html background-clip-padding-box-001.html background-clip-padding-box-with-border-radius.html + background-clip/clip-border-area-background-geometry.html + background-clip/clip-border-area-border-image.html + background-clip/clip-border-area-border-on-top.html + background-clip/clip-border-area-box-decoration-break.html + background-clip/clip-border-area-multiple-backgrounds.html + background-clip/clip-border-area-on-body-not-propagated-to-root.html + background-clip/clip-border-area-on-body-propagated-to-root.html + background-clip/clip-border-area-on-root.html + background-clip/clip-border-area.html + background-clip/clip-text-ellipsis.html + background-clip/clip-text-on-body-not-propagated-to-root.html + background-clip/clip-text-on-body-propagated-to-root.html + background-clip/clip-text-on-root.html + background-clip/clip-text-out-of-flow-child.html + background-clip/clip-text-text-decorations.html + background-clip/clip-text-text-emphasis.html background-clip/clip-rounded-corner.html background-clip/clip-text-animated-text.html background-clip/clip-text-dynamic-2.html @@ -2459,6 +2479,13 @@ Corner Shaping calculates its radius by adding the corresponding margin thickness to each border radius, with the corresponding [=outset-adjusted border radius=] applied. + + background-clip-content-box-with-border-radius-002.html + background-clip-content-box-with-border-radius-003.html + background-clip-padding-box-with-border-radius-002.html + background-clip-padding-box-with-border-radius-003.html + +
      When expanding an [=edge=] that has a [=border radius=], e.g. for computing the [=margin edge=], 'box-shadow' spread, or 'overflow-clip-margin', @@ -2762,6 +2789,11 @@ Border Images
      + + border-image-021.html + border-image-outset-004.html + +

      Image Source: the 'border-image-source' property

      @@ -3570,6 +3602,10 @@ Shadow Shape, Spread, and Knockout The 'border-image' does not affect the shape of the box-shadow. + + box-shadow-radius-generated.html + +

      Blurring Shadow Edges

      @@ -4158,4 +4194,7 @@ Changes Since the 17 December 2009 Candidate Recommendation color-mix-currentcolor-outline-repaint-parent.html color-mix-currentcolor-outline-repaint.html first-letter-space-not-selected.html + animations/background-color-animation-custom-property.html + animations/background-color-animation-custom-timing-function-reverse.html + animations/background-color-animation-custom-timing-function.html From e5af44169bc576a6885faec0b8dffe8c9e05b603 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Wed, 5 Nov 2025 14:52:56 -0500 Subject: [PATCH 097/124] [css-backgrounds-4][editorial] Bert Bos no longer in CSSWG, moved to former editor --- css-backgrounds-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs index db33780f628..5b69bb85dd9 100644 --- a/css-backgrounds-4/Overview.bs +++ b/css-backgrounds-4/Overview.bs @@ -6,10 +6,10 @@ Status: ED Work Status: Exploring Group: csswg ED: https://drafts.csswg.org/css-backgrounds-4/ -Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400 Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/, w3cid 52258 Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 64937 +Former Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343 Abstract: This module contains the features of CSS relating to the backgrounds of boxes on the page. Ignored Vars: width of background positioning area, width of background image, height of background positioning area, height of background image, X' Ignored Terms: total width From 458ecc15bad8a70c1819c338ff8750aeab8c8c3b Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 5 Nov 2025 14:28:23 +0100 Subject: [PATCH 098/124] [css-backgrounds-4][editorial] Removed the "Not Ready For Implementation" status --- css-backgrounds-4/Overview.bs | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs index 5b69bb85dd9..839fff93c8b 100644 --- a/css-backgrounds-4/Overview.bs +++ b/css-backgrounds-4/Overview.bs @@ -15,7 +15,6 @@ Ignored Vars: width of background positioning area, width of background image, h Ignored Terms: total width WPT Path Prefix: css/css-backgrounds/ WPT Display: closed -Warning: Not Ready
    9. The physical dimensions are width and height, - which correspond to measurements along the x-axis - (horizontal dimension) and y-axis (vertical dimension), + which correspond to measurements along the x-axis + (horizontal dimension) and y-axis (vertical dimension), respectively. Abstract dimensions are identical in both flow-relative and line-relative terms, so there is only one set of these terms. diff --git a/css-writing-modes-4/Overview.bs b/css-writing-modes-4/Overview.bs index 2b7e36c94c0..ec5514f7086 100644 --- a/css-writing-modes-4/Overview.bs +++ b/css-writing-modes-4/Overview.bs @@ -1595,8 +1595,8 @@ Abstract Box Terminology

      The physical dimensions are width and height, - which correspond to measurements along the x-axis - (horizontal dimension) and y-axis (vertical dimension), + which correspond to measurements along the x-axis + (horizontal dimension) and y-axis (vertical dimension), respectively. Abstract dimensions are identical in both flow-relative and line-relative terms, so there is only one set of these terms. From 5b257aa33d7c57ace0b8a0baed5bf4fc9ed33724 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 17:53:20 -0500 Subject: [PATCH 109/124] [css-anchor-position-1] Add flip-x and flip-y to position-try-fallbacks #12869 --- css-anchor-position-1/Overview.bs | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index 83af2db07ac..f650737c10c 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -1546,7 +1546,7 @@ Values have the following meanings: and adds it to the [=position options list=].

      -		<> = flip-block || flip-inline || flip-start
      +		<> = flip-block || flip-inline || flip-start || flip-x || flip-y
       		
      : flip-block @@ -1560,6 +1560,17 @@ Values have the following meanings: swaps the values in the [=inline axis=], essentially mirroring across a [=block-axis=] line. + : flip-x + :: + swaps the values in the [=horizontal axis=] + (between, for example, 'margin-left' and 'margin-right'), + essentially mirroring across a [=vertical-axis=] line. + + : flip-y + :: + swaps the values in the [=vertical axis=], + essentially mirroring across a [=horizontal-axis=] line. + : flip-start :: swaps the values of the [=start=] properties with each other, @@ -2612,6 +2623,8 @@ Changes {#changes} Significant changes since the 7 October 2025 Working Draft: +* Add ''flip-x'' and ''flip-y'' to 'position-try-fallbacks'. + (Issue 12869) * Define ''anchor-center'' to also use the [=scrollable containing block=] so that it doesn't trigger overflow alignment when positioned outside the [=local containing block=]. (Issue 12952) From e7dcecf27b6e1b1f14bf48a95631e5785eed6d27 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Wed, 5 Nov 2025 23:06:50 +0000 Subject: [PATCH 110/124] [css-anchor-position-1] Put the element's base styles in as the first item of the 'position options list'. #12890 --- css-anchor-position-1/Overview.bs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index f650737c10c..004f034c922 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -1511,7 +1511,8 @@ This property provides a list of alternate positioning styles to try when the [=absolutely positioned box=] overflows its [=inset-modified containing block=]. This position options list -is initially empty. +initially contains a single [=position option=] +generated from the element's base styles. Each comma-separated entry in the list is a separate option: either the name of a ''@position-try'' block, @@ -1989,7 +1990,7 @@ Applying Position Fallback {#fallback-apply} When a positioned box (shifted by its [=default scroll shift=]) overflows its [=inset-modified containing block=], -and has a non-empty [=position options list=], +and has more than one [=position option=] in its [=position options list=], it [=determines position fallback styles=] to attempt to find an option that avoids overflow. From 7f97e06f853514afdbdf2a926fd3f358b5d81586 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 18:13:53 -0500 Subject: [PATCH 111/124] [css-anchor-position-1] Add clip-path to anchors-visible check and tie to IntersectionObserver #12732 --- css-anchor-position-1/Overview.bs | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index 004f034c922..34773e3369c 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -2220,8 +2220,10 @@ depending on some commonly needed layout conditions. is fully clipped by a box which is an ancestor of |anchor| but a descendant of |abspos|'s containing block. - Clipping in this case refers only to clipping due to 'overflow', - or other effects (such as [=paint containment=]) + Clipping in this case refers only to the same clipping effects + that are (by default) checked by {{IntersectionObserver}}, + i.e. clipping due to 'clip-path', + 'overflow', or other effects (such as [=paint containment=]) that clip to the [=overflow clip edge=]. ISSUE(12732): Define timing of visibility checks. @@ -2631,5 +2633,7 @@ Significant changes since the Issue 12952) * Clarify that ''flip-block'', ''flip-inline'', and ''flip-start'' use the [=writing mode=] of the [=containing block=]. (Issue 12869) +* Add 'clip-path' to the list of clipping effects considered for ''anchors-visible''. + (Issue 12732) See also Previous Changes. From ad62d111b222f93c1355429b3c452a31508ad0f5 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 18:15:26 -0500 Subject: [PATCH 112/124] [css-anchor-position-1] Update changes list --- css-anchor-position-1/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index 34773e3369c..c4fc82d015b 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -2635,5 +2635,7 @@ Significant changes since the Issue 12869) * Add 'clip-path' to the list of clipping effects considered for ''anchors-visible''. (Issue 12732) +* Fix error where base styles were accidentally left out of the [=position options list=]. + (Issue 12890) See also Previous Changes. From 85c0252debe911fb09d87beda43ed8a5a72d1eb3 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 18:25:23 -0500 Subject: [PATCH 113/124] [css-anchor-position-1] Clarify timing of anchors-visible checks. #12732 --- css-anchor-position-1/Overview.bs | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index c4fc82d015b..f1357234154 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -2226,11 +2226,11 @@ depending on some commonly needed layout conditions. 'overflow', or other effects (such as [=paint containment=]) that clip to the [=overflow clip edge=]. - ISSUE(12732): Define timing of visibility checks. - + must be checked after [=updating content relevancy for a document=] + (see 'content-visibility' in [[css-contain-2]]) + and before running any {{IntersectionObserver}}, + and may also be checked at other times to improve responsiveness. Note: This means that if an abspos is next to its anchor in the DOM, for example, @@ -2633,7 +2633,8 @@ Significant changes since the Issue 12952) * Clarify that ''flip-block'', ''flip-inline'', and ''flip-start'' use the [=writing mode=] of the [=containing block=]. (Issue 12869) -* Add 'clip-path' to the list of clipping effects considered for ''anchors-visible''. +* Add 'clip-path' to the list of clipping effects considered for ''anchors-visible'' + and clarify the timing of its checks. (Issue 12732) * Fix error where base styles were accidentally left out of the [=position options list=]. (Issue 12890) From 72f413b657443f0b547fa7e94252cb8d073b3329 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 18:50:17 -0500 Subject: [PATCH 114/124] [css-anchor-position-1] Clarify anchors-visible is after ResizeObservers also #12732 --- css-anchor-position-1/Overview.bs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index f1357234154..27bfbe01d89 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -2229,8 +2229,10 @@ depending on some commonly needed layout conditions. Whether or not |anchor| is [=clipped by intervening boxes=] must be checked after [=updating content relevancy for a document=] (see 'content-visibility' in [[css-contain-2]]) - and before running any {{IntersectionObserver}}, - and may also be checked at other times to improve responsiveness. + and running any {{ResizeObserver}}, + but before running any {{IntersectionObserver}}. + It may also be checked at other times to improve responsiveness. + Note: This means that if an abspos is next to its anchor in the DOM, for example, From 93aeb5c76139cfe5bb5cbf5ddb017eb4b1b94a0e Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 18:57:26 -0500 Subject: [PATCH 115/124] [css-align-3][css-anchor-position-1] Clarify that position-area normal alignment magic triggers overflow safety magic --- css-align-3/Overview.bs | 173 +----------------------------- css-anchor-position-1/Overview.bs | 2 +- 2 files changed, 5 insertions(+), 170 deletions(-) diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs index 3e73b0e7fa3..5d7947239b8 100644 --- a/css-align-3/Overview.bs +++ b/css-align-3/Overview.bs @@ -898,7 +898,7 @@ Content Distribution for Scroll Containers Self-Alignment for Absolutely Positioned Boxes For [=absolutely positioned=] [=alignment subjects=] - whose relevant [=self-alignment property=] is not ''justify-self/normal'', + whose relevant [=used value|used=] [=self-alignment property=] is not ''justify-self/normal'', the default [=overflow alignment=] behavior is as follows:
      @@ -2514,175 +2514,10 @@ Appendix A: Static Position Terminology

      Changes

      - Changes since the 17 February 2023 Working Draft include: -
        -
      • Made [=block containers=] default to ''safe'' alignment. - See [[#auto-safety-default]]. - (Issue 8992) -
      • Made [=absolutely positioned boxes=] default to using a “smart” safe alignment - that allows unsafe overflow of the [=inset-modified containing block=] - while maintaining safety within the [=original containing block=]. - See [[#auto-safety-position]]. - (Issue 10316, - Issue 9960) -
      • Make all the ''space-*'' keywords fallback to ''safe'' overflow. - (Issue 10154) -
      • Clearly define the interaction of overflowing [=content distribution=] and [=scroll containers=] - to not impact layout, but to only affect the extent of the [=scrollable overflow area=]. - (Issue 4957) -
      • Only apply the special margin-edge baseline rule for [=scroll container=] [=block containers=] - when 'baseline-source' is its [=initial value=]. - (Issue 8214) -
      • When synthesizing the baseline of an orthogonal-flow box, - make the assumed parallel [=writing mode=] sensitive to 'direction'. - (Issue 7775) -
        -

        Otherwise, - assume either ''horizontal-tb'' or ''vertical-lr'' 'writing-mode', - whichever is orthogonal to the box’s own 'writing-mode'.

        -

        Otherwise:

        -
          -
        • If the box’s own [=writing mode=] is vertical, - assume ''horizontal-tb''. -
        • If the box’s own [=writing mode=] is horizontal, - assume ''vertical-lr'' if 'direction' is ''ltr'' - and ''vertical-rl'' if 'direction' is ''rtl''. -
        -
        -
        -
      • Clarify that spanning cells only participate in the first/last row they span - when participating in first/last baseline alignment. - (Issue 7655) -
      • Define the 'grid-gap' properties as [=legacy name aliases=] of the 'gap' properties. - (Issue 8014) -
      • Defer definition of ''align-self/normal'' alignment for [=absolutely positioned boxes=] to [[css-position-3]]. - (Issue 11215, - Issue 11285) -
      • Changed sentence about applicability of 'row-gap' to [=multi-column containers=] - to indicate that it applies in [[CSS-MULTICOL-2]]. - (Issue 11539) -
      • Defined that [=gutters=] dissappear at [=fragmentation breaks=]. - (Issue 11520) -
      - - Changes since the 24 December 2021 Working Draft include: -
        -
      • Define the baselines of a [=multi-column container=]. - (Issue 7856, - Issue 7639) -
      • Use the [=writing mode=] of the [=static-position containing block=] - when determining the [=static position=]. - (Issue 7599, - Issue 7612; - Changes) -
      • Remove definition of special behavior for including padding in [=scrollable overflow=] - for non-''align-content/normal'' alignments - since this is now defined unconditionally in [[!CSS-OVERFLOW-3]]. - (Issue 129) -
      • Minor clarifications: - * Define [=fallback alignment=] of a [=baseline-sharing group=] - as the shared [=fallback alignment=] of its individual items. - * Annotate <> value definitions using [=CSS bracketed range notation=]. -
      - - Changes since the 21 April 2020 Working Draft include: -
        -
      • Allowed reordering of ''[ first | last ]'' and ''align-self/baseline'' components of <>. - (Issue 5235) -
      • Make [=fallback alignment=] of ''space-around'' and ''space-evenly'' include ''safe''. - (Issue 5088) -
      • Various corrections to normal alignment and percentage gaps - to match respective layout specs. -
      • Corrections to special legacy handling of the [=last baseline set=] of [=scroll containers=]. - (Issue 3611) -
      • Clarify that a box with no [=baseline set=] synthesizes its [=alignment baseline=] as needed. - (Issue 3611) -
      • Clarified that only non-replaced boxes are affected by [=content distribution=]. - (Issue 4545) -
      • Clarified when a box has a [=coordinated self-alignment preference=] - that enables [=baseline content-alignment=], - particularly with respect to ''margin/auto'' [=margins=]. - (Issue 5923) -
      • Better define how baseline self-alignment and content-alignment interact. - (Issue 6389) -
      • Clarify how baseline-sharing groups determine their fallback alignment. - (Issue 7645) -
      - - Changes since the 6 December 2018 Working Draft include: -
        -
      • Improved the center self-alignment of absolutely-positioned elements. - Issue 4659 -
      • Fixed inconsistent fallback of baseline alignment in mixed writing modes. - Issue 3454 -
      • Minor editorial fixes and clarifications. -
      - - Changes since the 30 August 2018 Working Draft consist of some minor clarifications. - - Changes since the 23 April 2018 Working Draft include: -
        -
      • Better definition of how the alignment properties interact with absolutely-positioned boxes with ''left/auto'' offsets. - See [[#justify-abspos]], [[#align-abspos]], [[#abspos-sizing]], and [[#staticpos-rect]]. -
      • More detailed definition of how the content-distribution properties work on scroll containers. - See [[#overflow-scroll-position]]. -
      • Noted CSS2’s special rules about the baselines of inline-block scroll containers. -
      • Defined that percentage gaps compute against zero when calculating intrinsic sizes, and resolve during layout. (Issue 509) -
      • Miscellaneous minor clarifications. -
      + Changes since the 11 March 2025 Working Draft include: + * Clarify that [[#auto-safety-position]] applies when 'position-area' alters the [=used value=] of ''align-self/normal''. - Changes since the 6 September 2017 Working Draft include: -
        -
      • Added more illustrations! Many thanks to Melanie Richards for working through a difficult diagramming problem. -
      • Fixed errors in property definition table of 'gap' shorthand. -
      • Defining percentage gaps to resolve to zero when the containing block’s size depends on the gaps. - (Issue 509, - Issue 2297) -
      • Fixed errors in handling left and right in the grammars. -
      • Fixed discrepancy in ''align-content/space-align'' fallback alignment. - (Issue 2316) -
      • Tightened up handling of baseline alignment in cases where the box edges don't align. - (Issue 1556, - Issue 1611) -
      • Miscellaneous clarifications. -
      - - Changes since the 20 July 2017 Working Draft include: -
        -
      • Added the 'row-gap' and 'column-gap' properties and 'gap' shorthand, - applying them to both grid layout and flex layout - to replace the grid-specific 'grid-row-gap'/'grid-column-gap'/'grid-gap' properties. -
      - - Changes since the 15 May 2017 Working Draft include: -
        -
      • Dropped the ''left'' and ''right'' keywords from 'align-self' and 'align-content'. - They may be re-introduced in a later level if there is demand. - (Issue 1403) -
      • Assigned ''end'' fallback alignment to ''align-self/stretch'' cases when combined with ''last baseline'' content-alignment. -
      • Disabled baseline alignment across cells in a table column, - due to implementation complexity. -
      • A large number of minor corrections and clarifications reported by David Baron. -
      - - Changes since the 7 April 2017 Working Draft include: -
        -
      • Adding a section to clarify handling of partial implementations. - (Issue 1167) -
      • Dropped <> value of 'justify-content' since it can't do anything anyway. - (Issue 1184) -
      • Deferred ability to specify fallback alignments to Level 4. - (Issue 1002) -
      • Fixed position of <> wrt <>. - (Issue 1001) -
      • Fixed rules for handling baseline-aligned boxes being aligned along their block axis. - (Issue 1038) -
      • Renamed ''justify-items: auto'' to ''justify-items: legacy''. - (Issue 1318) -
      • Clamped baselines of scrollable boxes to the border edge, rather than margin edge. - (Issue 766) -
      • Updated the flex container gap definition to use [=gutter=]. (Issue 12084) -
      + See also previous changes.

      Privacy Considerations

      diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index 27bfbe01d89..60bec5ad42e 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -1222,7 +1222,7 @@ Anchor-Based Alignment {#alignment} Area-specific Default Alignment When 'position-area' is not ''position-area/none'', -the behavior of the ''align-self/normal'' [=self-alignment=] value +the [=used value=] of ''align-self/normal'' [=self-alignment=] changes depending on the <> value, to align the box towards the anchor: From e2454662b0d40b5b7fd557c6f1561f9d55c9a991 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 19:16:17 -0500 Subject: [PATCH 116/124] [css-align-3] Allow endward overflow of abspos into scrollable region #12106 --- css-align-3/Overview.bs | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs index 5d7947239b8..dba51256020 100644 --- a/css-align-3/Overview.bs +++ b/css-align-3/Overview.bs @@ -918,6 +918,12 @@ Self-Alignment for Absolutely Positioned Boxes For this purpose, the |overflow limit rect| is the bounding rectangle of the [=alignment subject's=] [=inset-modified containing block=] and its [=original containing block=]. + However, because the [=scrollable overflow area=] of a [=scroll container=] + can be extended to ensure the visibility of overflowing [=absolutely positioned=] boxes, + if the [=original containing block=] is generated by a [=scroll container=] + (and is not its [=fixed containing block=]), + the |overflow limit rect| is extended to infinity + in any direction that does not extend into the [=unreachable scrollable overflow region=].
      (For [=absolutely-positioned=] [=alignment subjects=] that fail the above condition, @@ -2516,6 +2522,9 @@ Changes Changes since the 11 March 2025 Working Draft include: * Clarify that [[#auto-safety-position]] applies when 'position-area' alters the [=used value=] of ''align-self/normal''. + * Allow absolutely positioned boxes to honor alignment even when overflowing into + the scrollable overflow area of a scroll container containing block. + (Issue 12106) See also previous changes. From 36207d113464bbacc3feb6b62fff4e8c0e2fceb8 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 5 Nov 2025 19:26:42 -0500 Subject: [PATCH 117/124] [css-anchor-position-1] Compensate for stupid UA default rules by resolving margins to auto #10258 Also drop the 'dialog' alignment value, which is no longer needed. --- css-anchor-position-1/Overview.bs | 44 +++++++------------------------ 1 file changed, 10 insertions(+), 34 deletions(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index 60bec5ad42e..62ce0a21145 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -651,7 +651,9 @@ Values other than ''position-area/none'' have the following additional effects: when the [=absolute-position containing block=] is generated by a [=scroll container=], so that the entire [=scrollable overflow area=] (typically) is available for positioning. -* Any ''top/auto'' [=inset properties=] resolve to ''0''. +* The [=used value=] of any ''top/auto'' [=inset properties=] + and ''margin/auto'' [=margin properties=] + resolves to ''0''. * The ''align-self/normal'' value for the [=self-alignment properties=] resolves to a corresponding value, see [[#position-area-alignment]]. @@ -1317,7 +1319,9 @@ Additionally: where applicable, so that the entire [=scrollable overflow area=] (typically) is available for positioning. -* Any ''top/auto'' [=inset properties=] resolve to ''0''. +* The [=used value=] of any ''top/auto'' [=inset properties=] + and ''margin/auto'' [=margin properties=] + resolves to ''0''. If the box is not [=absolutely positioned=], or does not have a [=default anchor box=], @@ -1331,38 +1335,6 @@ it will “shift” from being purely centered, in order to remain within the [=original containing block=]. See [[css-align-3#overflow-values]] for more details. - - -Conditional Centering: the ''dialog'' alignment value {#conditional-centering} ------------------------------------------------------ - -
      -Name: justify-self, align-self, justify-items, align-items
      -New Values: dialog
      -
      - -Dialog boxes are often displayed centered on the screen, -unless they are anchored to some other element. - -The new dialog value -allows this behavior to be specified: -if the box is [=absolutely positioned=] -and its 'position-area' value is not ''position-area/none'', -it is aligned as per ''align-self/normal'' -(see [[#position-area-alignment]]); -otherwise, -it is aligned as per ''align-self/center''. - -