First Public Working Draft of CSS Grid Level 3 / Masonry Layout
The CSS Working Group has published a First Public Working Draft of CSS Grid Layout Module Level 3 aka CSS Masonry Layout. This draft represents masonry layout as a built-in capability of CSS in two possible syntactic forms: a grid-integrated syntax, and a grid-independent syntax, both of which are outlined as alternatives. We hope publication of this draft facilitates discussion about their relative merits.
The CSSWG has resolved to adopt fully mixed track sizing for this layout model, allowing all the possible track listings expressible in CSS Grid Layout for masonry layout as well. This unifies the two incoming proposals’ underlying layout models; and therefore both syntactic forms represent essentially equal capabilities for masonry layout (though there are some open issues about possible differences in their initial values). To address performance concerns with mixed track sizing, the draft outlines specific performance optimizations in the layout model and adopts some simplifying heuristics for e.g. subgrids.
We are grateful to the designers and developers who commented in the issues with their use cases, diagrams, and demos, which informed the development of this module—and welcome additional input, suggestions, and use cases to help guide its further refinement. We expect development of this module to proceed rapidly from this point forward, since it builds on the existing foundation of the grid layout algorithms.
Please send feedback by filing an issue in GitHub or commenting on an existing one (such as this one or this one). Alternatively you can send mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-grid-3]) and your comment topic in the subject line; or email one of the editors and ask them to forward your comment.
Minutes OpenUI-WHATWG/HTML-CSSWG Joint Meeting 2024-09-19
OpenUI-WHATWG/HTML-CSSWG meeting
CSS UI
- Resolved: Add the principles and examples of use to css-forms-1 (Issue #10866: Define design principles for `appearance: base` stylesheet)
- Resolved: Add fantasai and ntim as editors of css-forms-1 (Issue #10866)
- Resolved: Do not add a pseudo-element for the user-agent fallback select button (Issue #10717: Pseudo-element for select’s UA button)
- Resolved: Font properties won’t be set in the UA style sheet (Issue #10857: UA stylesheet for appearance:base `select`)
Content Model
- There was interest in expanding the PR for WHATWG issue #10317 (Content model and ‘what’ to render for stylable `select` elements) to capture many more types of elements.
Full Meeting Minutes
Minutes Telecon 2024-09-18
- Resolved: Whenever you are comparing names, and at least one is tree scoped, then both are tree scoped, and the scoping has to be exact (not subtree) (Issue #10526: When does anchor-scope “match” a name?)
- Resolved: The ‘all’ keyword is tree-scoped (Issue #10525: anchor-scope and part descendant styling)
- Resolved: When scroll-start-target targets multiple elements, scroll to each in reverse DOM order with text to specify priority is the first item (Issue #10774: How should competing scroll-start-targets be resolved?)
- Resolved: Add auto value for text-emphasis-position, and change the meaning of text-underline-position: auto to care about left vs right in vertical text (Issue #1198: text-underline-position auto in vertical text)
Full Meeting Minutes
Introducing CSS Values and Units Level 5!
The CSS Working Group has published a First Public Working Draft of CSS Values and Units Level 5. This module defines a variety of value types for CSS. This module is currently drafted as a diff spec over CSS Values and Units Level 4, and defines several new generic value functions that can be used nearly anywhere in CSS. Additions since Level 4 are listed in the Changes section and include:
- “Comma upgrading” for functional notations
- To accommodate the increasing numbers of value-substitution functions that might take multiple arguments containing commas, all CSS functions can now “upgrade” their own syntactic commas to semicolons, allowing their arguments to unambiguously contain commas.
- The
*-progress() family of functions
- These calculate a value’s “progress” through a given range. The value can be a normal numeric value, a Media Query value, or a Container Query value.
- The
*-mix() family of functions
- These represent an interpolation between two values for which the intermediate values are either inconvenient or impossible to represent in CSS syntax. By accepting a
*-progress() function, they allow interpolation along a given range.
- The first-valid() function
- Resolves to the first argument that’s valid for the property this is used in. (Normally, CSS’s generic fallback mechanisms for invalid syntax achieve this, but when a value is stored in a variable or similar, we can’t rely on that.
first-valid() brings the ability back for these cases.)
- The toggle() function
- Allows a value to alternate between multiple possibilities as it’s inherited through the tree. For example,
<em> inside of a context that’s already italics can automatically switch to being unitalicized; or nested lists can automatically cycle between several list-style-type values regardless of nesting depth.
- The attr() function
- Allows values to be pulled from attributes on the element. Previously this function was only defined to work for the
content property, and only pulled the attribute value as a string; this spec allows it to parse to multiple types of values, and be used anywhere.
- The
random() and random-item() functions
- Allow returning a random numeric value or random choice among multiple values, in a well-defined way.
- The
sibling-count() and sibling-index() functions
- Allow values to respond to how many siblings the element has and where in the sibling list it is.
- The
calc-size() function
- Allows intrinsic sizes (such as
auto or max-content) to be adjusted similar to calc(). Most importantly, this allows such keywords to be interpolated with lengths, allowing things like interpolating height: auto to height: 0. The new interpolate-size property allows authors to opt into this interpolation behavior by default (as back-compat prevents us from doing it automatically).
- URL modifiers
- Several new
url() modifiers allow control over cross-origin requests etc.
Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-values-5]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)
CSS Cascading & Inheritance Draft Updated
The CSS Working Group has published an updated Working Draft of CSS Cascading & Inheritance Module Level 6. This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. New in this level is the @scope rule.
This update doesn’t capture all the resolutions since the previous version, but does clarify a few things. The biggest changes included:
- Deferring the scoped descendant combinator
- Settling on ‘weak’ scope proximity, and removing the ‘strong’ variant
- Allowing shadow hosts to act as implicit scope roots, and be selected with the
:scope selector
Changes since the last Working Draft are listed in the Changes section.
Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-cascade-6]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)
Minutes Telecon 2024-08-28
- flackr went over the current explainer for scroll markers (issue #10720) looking for support of the general direction. The group discussed some feedback and history of the issue and was broadly supportive of the direction. Any issues with the explainer can be opened separately in github for further discussion.
- There was no clear winner between the options to address scroll snap on content such as auto paginated fragments(Issue #10715: Snapping and generating scroll-marker pseudo-elements from fragments). flackr will write up a third option that was raised on the call and fantasai will add comments to the issue.
- Issue #10722 (Scroll button pseudo-elements) is a problem space the group is interested in solving. The current proposal would benefit from more documentation of in and out of scope use cases as well as additional details in the proposal.
- Resolved: Blockification of -webkit-box happens at computed value time (Issue #10435: When does the blockification of -webkit-box occur?)
Full Meeting Minutes
OpenUI-WHATWG/HTML-CSSWG Meeting Minutes 2024-08-22
OpenUI-WHATWG/HTML-CSSWG meeting
CSS UI
- Resolved: ::picker(select) is a part-like pseudo-element which applies to select elements which are in base appearance mode. It maps to the popover element inside the select’s UA shadowroot (Issue #10758: Pseudo-element for select’s UA popover)
- A new issue will be opened to discuss having ::picker(select) match :popover-open.
Form Controls
- The group discussed the different proposals to resolve issue #10440 (Styling form control pickers).
- There was some momentum toward fantasai’s proposed text, however there were still concerns about the second point in the proposal and having one vs. two opt-ins.
- Discussion will return to github to further debate the second point. Additionally, there was a request of Google to provide more details on their vision for the redesign.
Full Meeting Minutes
Minutes Telecon 2024-08-21
- On the call there was no clear sense of if the best way to handle issue #10249 (Effect of `meta name=color-scheme` on the (prefers-color-scheme) MQ) was to allow a meta to set prefers-color-scheme or if it’s better to have a style query. Discussion will return to the issue.
- Resolved: We publish current draft of CSS Cascade 6, and we open an issue for the multiple nested scopes (Issue #10370: Publish an updated WD)
- It wasn’t clear that setting inert was the right solution for issue #10711 (Support setting offscreen content inert), though the problem space was clear. Discussion will return to the issue to further determine if inert is the right path forward given concerns about accessibility.
Full Meeting Minutes
Minutes View Transitions Breakout Telecon 2024-08-21
View Transitions Breakout Meeting
- Resolved: Navigation is a CSSOMString, it returns an empty string when navigation descriptor is missing or invalid (Issue #10654: CSSOM for CSSViewTransitionRule.navigation does not match implementation)
- Resolved: idents take precedence over contain in view-transition-group (Issue #10639: Should view-transition-group contain or `ident` take precedence)
- Resolved: Change the capture mode for all view-transitions and specify how each property is affected by this capture mode change (Issue #10585: Optionally capture some properties (e.g. opacity/border) as style instead of snapshot)
- Resolved: Describe categorization of properties in the Module Interactions sections of each spec (Issue #10585)
- Resolved: Blink will experiment and come back with changes needed if there are compat concerns (Issue #10585)
Full Meeting Minutes
Minutes Telecon 2024-08-14
- Resolved: Add 1 more calc-size edit in, then issue first working draft of css-values-5
- Resolved: Add ChrisL and TabAtkins for easing level 2 and publish FWD (Issue #10688: Time for FPWD)
- There was a lot of discussion and thought about if tooltips are worth solving in issue #9236. There wasn’t a clear yes or no decided on the call, however a lot of good points were raised that needed further discussion. Some of the questions/comments were:
- Specific delays might be better than named values
- Different delays based on modality, hover vs touch
- If focus delay should be zero or if tabbing should have a different behavior
- Should there be a pseudo class for first tooltip open
- Resolved: Edit in what’s described in Tab’s last comment (Issue #10179: Should :not(foo) match the host of the shadow tree?)
- Resolved: :host:has() can match, :has() can’t (Issue #10693: Should `:host:has()` match?)
Full Meeting Minutes
![[Photo: group photo of the CSS working group in San Francisco]](/Style/CSS/csswg-2016.jpg)
Contact: