From 9c0898b0b5078b8a7d1fd54b2e7e863cc4cd8aee Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Mon, 15 Jul 2024 11:53:54 -0600 Subject: [PATCH 1/6] Drafting CSSWG update --- content/blog/2024/csswg-july.md | 149 ++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 content/blog/2024/csswg-july.md diff --git a/content/blog/2024/csswg-july.md b/content/blog/2024/csswg-july.md new file mode 100644 index 000000000..5bf4d3d57 --- /dev/null +++ b/content/blog/2024/csswg-july.md @@ -0,0 +1,149 @@ +--- +title: CSS Working Group, June/July updates +sub: What I've been working on as an Invited Expert +date: 2024-07-11 +summary: > + The CSS Working Group has regular face-to-face meetings + (hybrid online/in-person) throughout the year, + and they always result in a flurry of activity! + Here's a rundown of some highlights + from the last few months, + with a focus on the features I maintain. +--- + +## Container Queries & Units + +spec: +~~[Containment, Level 3](https://www.w3.org/TR/css-contain-3/)~~ +[Conditional Rules, Level 5](https://drafts.csswg.org/css-conditional-5/) + +### Moving to a new specification + +While Container Queries rely heavily +on the idea of 'containment', +the two features are not tightly intertwined -- +and we're working to +[loosen the containment restrictions](https://github.com/w3c/csswg-drafts/issues/10544) +even more. + +To help clarify the dependency relationship, +and simplify maintenance of these specifications, +Container Queries are moving +from the [Containment module (level 3)](https://www.w3.org/TR/css-contain-3/) +into the [Conditional Rules module (level 5)](https://drafts.csswg.org/css-conditional-5/). Hopefully this change will get published to the +[Working Draft](https://www.w3.org/TR/css-conditional-5/) soon. + +### Querying the shadow DOM + +After many issues were raised (thanks for making noise!), +we were able to revert the limitation on +[querying containers across shadow-DOM boundaries](https://github.com/w3c/csswg-drafts/issues/5984#issuecomment-2112977366). +Moving forward, slotted elements should be able to query +containers that are defined by a parent shadow-DOM. +Container units will also +get their sizing from +[relevant shadow-DOM containers](https://github.com/w3c/csswg-drafts/issues/7947). + +### Viewport units and scrollbars + +For years, the viewport units (`vi`/`vw` etc) +have been based on the full dimensions of the viewport, +ignoring any possible scrollbars. +That can lead to accidental overflow +if you size something to `100vw`, +and there's a vertical scrollbar present. + +While sometimes frustrating, +that behavior is designed to avoid loop conditions. +Elements sized with viewport units _can cause scrollbars_, +which would change the size of the unit, +potentially removing the need for scrollbars. +But we don't have that issue when scrollbar spacing is stable -- +using `overflow: scroll` or +[`scrollbar-gutter: stable`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) -- +so the working group resolved to loosen the restriction. + +Moving forward, [*stable* scrollbars](https://github.com/w3c/csswg-drafts/issues/6026) +will be removed from the viewport measurements. +I [requested we do the same](https://github.com/orgs/oddbird/projects/16/views/1?filterQuery=is%3Aissue+last-updated%3A7days&pane=issue&itemId=55733548) +for container-relative `cq*` units, +so that will also be fixed. + +### Variables in container (size) queries + +A bit farther back, but still exciting: +we agreed that +[variables should be allowed in container size queries](https://github.com/w3c/csswg-drafts/issues/8088#issuecomment-1371590352). +In the future, +you'll be able to write `@container (width > var(--small-screen))`. + +The variable will resolve +with the value that custom property has _on the container_. +So you won't be able to make the variable different +for each querying element, +but it can be different for each container +being queried. + +### Zoom and container queries + +We clarified the +[impact of `zoom` on resolving container queries](https://github.com/w3c/csswg-drafts/issues/10268). +Zoom +[increases the size of a CSS pixel](/2024/07/09/zoomies/) +in relation to the surrounding layout -- +so things _appear larger_, +but maintain their internal dimensions. +A `50px` box is still `50px`, +we've just changed the size of our `px` unit. + +To keep things simple and consistent, +we determined that containers +should report their own size _as they see it_. +So a `50px` container at `200%` zoom +will continue to report `50px` +in a container query. +This is similar to how relative units +and custom properties resolve +in a container query. + +https://codepen.io/miriamsuzanne/pen/xxobvgd?editors=1100 + +If you want to learn more about +all the variations of +[browser and CSS magnification](/2024/07/09/zoomies/), +I've got you covered. + +### Is container query adoption 'too low'? + +I've seen a wide range of people worried that +"people aren't using container queries" -- +but we don't actually have a way of tracking that! +I was curious where this concern comes from, +what we're comparing to, +and what expectations we _should_ have +about new features showing up in production. + +I wrote up my thoughts, +summarized by the title of the article: +[Learn Grid Now, Container Queries Can Wait](/2024/06/13/css-layout/). +Later this month, +we'll be doing a live stream with +Stephanie Eckles +() + +Cascade Layers (Cascading & Inheritance, Level 5) +- I want to move the conversation forward on [a `layer` attribute for the html `` element](https://github.com/whatwg/html/issues/7540). This issue has been stalled in the WHATWG for a while, as we try to sort out feature-testing new attributes in HTML. While I'd love to have feature queries in html links as well, I think [separating these two features](https://github.com/w3ctag/design-reviews/issues/970) might unblock the essential progress on Cascade Layers. +- There's been a very active discussion around [handling unlayered styles in the cascade](https://github.com/w3c/csswg-drafts/issues/6323#issuecomment-2207341923). By default, unlayered styles have priority over layered styles. [This is an essential default](https://github.com/w3c/csswg-drafts/issues/6284#issuecomment-2207379170) in my mind, but there are many use-cases where we should be override it. The mega-thread discussion keeps eating it's own tail, but it seems like we have three basic approaches to choose from (and then any number of small variations on each). I have a clear favorite there, but feel free to leave your thoughts as well. If possible, try not to get lost in the naming details - and focus first on the overall behavior of the feature! + +Scope (Cascading & Inheritance, Level 6) +- We resolved [a series of issues](https://github.com/w3c/csswg-drafts/issues/10431#issuecomment-2189648413) related to scope specificity and nesting. In the future, you'll be able to put style declarations directly into an `@scope` rule, and they will apply to the scope root with no added specificity. Note that you can also use the `:scope` selector (with a specificity of one attribute), or the `&` selector (which uses the specificity of the scope-root selector). You can imagine bare declarations being wrapped in `:where(:scope)`. +- 😕 'Forgiving selector lists' are very handy, [but limited to `:is()` and `:where()`](https://github.com/w3c/csswg-drafts/issues/7676#issuecomment-1341347244). We had to update the scope start/end selectors [to be unforgiving](https://github.com/w3c/csswg-drafts/issues/10042). +- I've opened a new issue to discuss [implicit scopes when nesting](https://github.com/w3c/csswg-drafts/issues/10497). Not a big change in behavior, but potentially a nice shortcut in some situations? + +Mixins & Functions (Mixins & Functions, Level 1) +- The [Editor's Draft](https://drafts.csswg.org/css-mixins/) is underway! This isn't complete (mixins are missing), but it lays out our current plan for custom CSS functions. +- I wrote an article about [how mixins should interact with the cascade](/2024/06/11/removing-mixins/). I'd be happy for your thoughts! +- I've heard some browsers expressing doubt about the impact of mixins. I plan to start documenting use-cases where there are not good alternatives. If you have some, reach out! + +Other… +- I'm not an editor on the Color spec, but [I have some opinions anyway](https://github.com/w3c/csswg-drafts/issues/9449). Browsers currently use 'channel clipping' to render out-of-gamut colors, and [the results can be wild](https://codepen.io/miriamsuzanne/pen/BavZLNG). I made a [comparison pen, to see the difference](https://codepen.io/miriamsuzanne/pen/rNRoBXO) between browser rendering and what the spec calls for. Good news! We have [a tentative compromise solution](https://github.com/w3c/csswg-drafts/issues/9449#issuecomment-2162711081) that all browsers agree on. It's not perfect, but it's a big improvement over the current state of things. You can test how it changes the linked pen in Chrome, by turning on the `css gamut mapping` feature flag (`chrome://flags`). From 36bd345f9859d8c421cca216733c1b602daf9b41 Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Fri, 19 Jul 2024 15:53:18 -0600 Subject: [PATCH 2/6] Complete draft CSSWG updates for june/july --- content/blog/2024/anchor-position-polyfill.md | 2 +- content/blog/2024/csswg-july.md | 354 ++++++++++++++++-- content/blog/2024/removing-mixins.md | 2 +- 3 files changed, 325 insertions(+), 33 deletions(-) diff --git a/content/blog/2024/anchor-position-polyfill.md b/content/blog/2024/anchor-position-polyfill.md index d46aedb04..383449292 100644 --- a/content/blog/2024/anchor-position-polyfill.md +++ b/content/blog/2024/anchor-position-polyfill.md @@ -10,7 +10,7 @@ author: james sponsors: true tags: - Article - - OSS + - Open Source - Anchor Position - CSS - Polyfill diff --git a/content/blog/2024/csswg-july.md b/content/blog/2024/csswg-july.md index 5bf4d3d57..50f024c43 100644 --- a/content/blog/2024/csswg-july.md +++ b/content/blog/2024/csswg-july.md @@ -1,7 +1,17 @@ --- -title: CSS Working Group, June/July updates +title: Working Group updates for June/July sub: What I've been working on as an Invited Expert -date: 2024-07-11 +date: 2024-07-23 +tags: + - CSS + - CSSWG + - Cascade Layers + - CSS Scope + - CSS Nesting + - CSS Mixins & Functions + - Color + - Container Queries + - Open Source summary: > The CSS Working Group has regular face-to-face meetings (hybrid online/in-person) throughout the year, @@ -11,6 +21,21 @@ summary: > with a focus on the features I maintain. --- +{% import 'embed.macros.njk' as embed %} + +{% callout %} +This is hopefully the first post in a series, +providing updates around my work +on the CSS Working Group. + +These contributions take a lot of time and effort. +If you're interested in supporting +our open-source work around CSS, +consider becoming a [GitHub sponsor](https://github.com/sponsors/oddbird), +or contributing to our +[Open Collective](https://opencollective.com/oddbird-open-source). +{% endcallout %} + ## Container Queries & Units spec: @@ -19,22 +44,36 @@ spec: ### Moving to a new specification +Issue: +[Reorganizing the Containment specs (#10433)](https://github.com/w3c/csswg-drafts/issues/10433) + While Container Queries rely heavily on the idea of 'containment', -the two features are not tightly intertwined -- -and we're working to +the two features are not tightly intertwined. +We're working to [loosen the containment restrictions](https://github.com/w3c/csswg-drafts/issues/10544) -even more. +even more if we can. -To help clarify the dependency relationship, -and simplify maintenance of these specifications, +To help clarify that relationship, +and simplify maintenance of these distinct features, Container Queries are moving from the [Containment module (level 3)](https://www.w3.org/TR/css-contain-3/) -into the [Conditional Rules module (level 5)](https://drafts.csswg.org/css-conditional-5/). Hopefully this change will get published to the -[Working Draft](https://www.w3.org/TR/css-conditional-5/) soon. +into the [Conditional Rules module (level 5)](https://drafts.csswg.org/css-conditional-5/). + +During this transition, +Container Queries disappeared from any public spec -- +basically moving back into Editor's Draft status, +after already shipping across browsers. +Maybe it was all a dream! +But [a new Working Draft](https://www.w3.org/TR/2024/WD-css-conditional-5-20240723/#container-queries) +was published this week. +Container Queries are back! ### Querying the shadow DOM +- [CQ vs shadow boundaries (#5984)](https://github.com/w3c/csswg-drafts/issues/5984) +- [Should not cq units be interpreted in the flatDom context? (#7947)](https://github.com/w3c/csswg-drafts/issues/7947) + After many issues were raised (thanks for making noise!), we were able to revert the limitation on [querying containers across shadow-DOM boundaries](https://github.com/w3c/csswg-drafts/issues/5984#issuecomment-2112977366). @@ -46,6 +85,9 @@ get their sizing from ### Viewport units and scrollbars +- [Use of 100vw is causing pointless horizontal scrollbars on some websites (#6026)](https://github.com/w3c/csswg-drafts/issues/6026) +- [Can we account for scrollbars on containers when sizing 100cq*? (#10043)](https://github.com/w3c/csswg-drafts/issues/10043) + For years, the viewport units (`vi`/`vw` etc) have been based on the full dimensions of the viewport, ignoring any possible scrollbars. @@ -65,27 +107,58 @@ so the working group resolved to loosen the restriction. Moving forward, [*stable* scrollbars](https://github.com/w3c/csswg-drafts/issues/6026) will be removed from the viewport measurements. -I [requested we do the same](https://github.com/orgs/oddbird/projects/16/views/1?filterQuery=is%3Aissue+last-updated%3A7days&pane=issue&itemId=55733548) +I [requested we do the same](https://github.com/w3c/csswg-drafts/issues/10043) for container-relative `cq*` units, so that will also be fixed. +{{ embed.codepen( + id='wvLMoNa', + title='Stable scroll bars & CQ units', + user='miriamsuzanne' +) }} + +Note that container units +(and container queries generally) +are relative to the +`content-box` +of a container. +So adding/removing padding +from the container +_also/already_ +changes the size of our `cq*` units. + ### Variables in container (size) queries +Issue: [Can we allow custom properties in dimensional container queries? +(#8088)](https://github.com/w3c/csswg-drafts/issues/8088) + A bit farther back, but still exciting: we agreed that [variables should be allowed in container size queries](https://github.com/w3c/csswg-drafts/issues/8088#issuecomment-1371590352). In the future, -you'll be able to write `@container (width > var(--small-screen))`. +you'll be able to write: + +```css +@container (width > var(--small)) { + /* styles inside larger containers */ +} +``` -The variable will resolve -with the value that custom property has _on the container_. +The variable will resolve _on the container_. So you won't be able to make the variable different -for each querying element, +for each element inside the query, but it can be different for each container -being queried. +being queried: + +```css +.container-1 { --small: 20em; } +.container-2 { --small: 600px; } +``` ### Zoom and container queries +Issue: [Zoom and container queries (#10268)](https://github.com/w3c/csswg-drafts/issues/10268) + We clarified the [impact of `zoom` on resolving container queries](https://github.com/w3c/csswg-drafts/issues/10268). Zoom @@ -106,7 +179,11 @@ This is similar to how relative units and custom properties resolve in a container query. -https://codepen.io/miriamsuzanne/pen/xxobvgd?editors=1100 +{{ embed.codepen( + id='xxobvgd', + title='Container Queries and Zoom', + user='miriamsuzanne' +) }} If you want to learn more about all the variations of @@ -128,22 +205,237 @@ summarized by the title of the article: [Learn Grid Now, Container Queries Can Wait](/2024/06/13/css-layout/). Later this month, we'll be doing a live stream with -Stephanie Eckles -() +[Stephanie Eckles](https://thinkdobecreate.com) +([ModernCSS.dev](https://moderncss.dev/) and [SmolCSS](https://smolcss.dev/)) +about the reasons to use grid, +and some of the quick ways to get started. + +## Cascade Layers + +Spec: [Cascading and Inheritance, Level 5](https://www.w3.org/TR/css-cascade-5/) + +### Imposing layers on linked styles in HTML + +- WHATWG: [Allow authors to apply new css features (like cascade layers) while linking stylesheets (#7540)](https://github.com/whatwg/html/issues/7540) +- TAG: [A layer attribute for layering of linked CSS style sheets in HTML (#970)](https://github.com/w3ctag/design-reviews/issues/970) +- Explainer: [Cascade Layering of HTML Linked Style Sheets](https://css.oddbird.net/layers/link-layer/) + +We need +[a `layer` attribute for the html `` element](https://github.com/whatwg/html/issues/7540). +We've known this for years, +but the issue has been stalled in the WHATWG, +as we try to sort out feature-testing new attributes +(also important!). +While I'd love to have feature queries +in html links as well, +I hope that +[separating these two features](https://github.com/w3ctag/design-reviews/issues/970) +might unblock the essential progress on Cascade Layers. +I wrote [an explainer](https://css.oddbird.net/layers/link-layer/), +and asked the w3c +Technical Architecture Group +for review, +as a step towards getting more formal +implementor feedback. + +When I have time, +I will follow-up with a similar explainer +on the need for HTML feature queries. + +### Explicit placement of unlayered styles in the cascade + +- [Allow authors to explicitly place unlayered styles in the cascade layer order (#6323)](https://github.com/w3c/csswg-drafts/issues/6323) +- [Reconsider placement of unlayered styles, for better progressive enhancement? (#6284)](https://github.com/w3c/csswg-drafts/issues/6284) + +There's been a very active discussion +around [handling unlayered styles in the cascade](https://github.com/w3c/csswg-drafts/issues/6323#issuecomment-2207341923). +By default, +unlayered styles have priority over layered styles. +[This is an essential default](https://github.com/w3c/csswg-drafts/issues/6284#issuecomment-2207379170) in my mind, +but there are many use-cases +where we would want override the default. + +The mega-thread discussion +is now eating it's own tail, +but it seems like we have three basic approaches +to choose from +(and then small variations on each). +I have a clear favorite there, +but feel free to leave your thoughts as well. + +If possible, +try not to get lost in alternative naming details -- +and focus first on the overall behavior of the feature! + +## Scope + +Spec: [Cascading and Inheritance, Level 6](https://www.w3.org/TR/css-cascade-6/) + +### Scope specificity when nesting + +- [Allow declarations directly in @scope? (#10389)](https://github.com/w3c/csswg-drafts/issues/10389) +- [@scope as a nested grouping rule and CSSNestedDeclarations (#10431)](https://github.com/w3c/csswg-drafts/issues/10431) +- [Always serialize the implicit :scope ? (#9621)](https://github.com/w3c/csswg-drafts/issues/9621) + +We recently resolved +[a series of issues](https://github.com/w3c/csswg-drafts/issues/10431#issuecomment-2189648413) +related to scope specificity and nesting. +In the future, +you'll be able to put style declarations +directly into an `@scope` rule, +and they will apply to the scope root with no added specificity: + +```css +@scope (main) { + /* these styles apply to the :scope (main) */ + /* but have no specificity */ + color: teal; + border: thick solid; +} +``` + +This is equivalent to using `:where(:scope)`: + +```css +@scope (main) { + /* these styles apply to the :scope (main) */ + /* but have no specificity */ + :where(:scope) { + color: teal; + border: thick solid; + } +} +``` + +The number of option here -- +and the interactions between features -- +can be a bit confusing, +since each has different implications. +While the options and interactions are complex, +this resolution keeps the rules consistent for each feature: + +- The `@scope` rule itself + does not add specificity to nested styles. + We can think of `@scope ()` + as similar to `:where()`, + which also hides the specificity selectors inside. +- The `@scope` rule can have directly-nested styles, + and they apply to the scoping root. + That doesn't change anything about the selector specificity. +- Like `:root`, the `:scope` selector is a pseudo-class, + and always has the same specificity as any other class + (`0,1,0`). +- We can always think of the `&` selector + as being replaced by `:is()`. + In this case, the parent selector is the scope root selector (`main`), + with a specificity of `[0,0,1]`. + +### Scope roots are no longer forgiving + +'[Forgiving selector lists](https://developer.mozilla.org/en-US/docs/Web/CSS/:is#forgiving_selector_parsing)' +are handy in many situations, +[but are now limited to `:is()` and `:where()`](https://github.com/w3c/csswg-drafts/issues/7676#issuecomment-1341347244). +I don't love that limitation, +but it seems like we're stuck with it. +For that reason, +scope-start and scope-end selectors +[also need to be un-forgiving](https://github.com/w3c/csswg-drafts/issues/10042). + +Of course, +we can use `:is()` and `:where()` +_inside_ the scope start/end selectors -- +so this is an inconvenience, +but not a change in functionality. + +### Implicit scopes in a nested context + +Issue: [Can we support implicit scopes in nested settings? (#10497)](https://github.com/w3c/csswg-drafts/issues/10497) + +Scope and nesting +obviously need to work together, +since they overlap in some major ways. +The basic rules for that interaction are: + +1. When a selector is directly inside a scope rule + (that's the whole point!), + those selectors are 'nested' relative + to the scope root element, + as defined by the scope-start selector. +1. When a scope rule is directly inside another selector, + the scope-start and scope-end selectors + act as 'nested' selectors relative to the parent. + +```css +header { + @scope (main > &) { + /* the '&' above refers to 'header' */ + + & h2 { /* this '&' refers to 'main > header' */ } + } +} +``` + +I've opened a new issue to discuss +[implicit scopes when nesting](https://github.com/w3c/csswg-drafts/issues/10497). +If we leave off the scope-start, +can we treat it like `(&)`? + +```css +header { + @scope { /* should we get an implied 'header' scope? */ } +} +``` + +That's potentially a nice shortcut to have? + +## Mixins & Functions + +Spec: [Mixins & Functions, Level 1 (Editor's Draft)](https://drafts.csswg.org/css-mixins/) + +### A draft spec for functions + +The [Editor's Draft](https://drafts.csswg.org/css-mixins/) is underway! +It isn't complete (mixins are missing), +but it lays out our current plan for custom CSS functions. + +### Thinking about mixins + +I wrote an article about +[how mixins should interact with the cascade](/2024/06/11/removing-mixins/). +I'd be happy for your thoughts! + +I've heard some browsers +expressing doubt about the need for mixins. +I plan to start documenting use-cases +where CSS mixins would have a large impact. +If you have examples, +please [reach out](/contact/)! + +## Wide-gamut colors + +Issue: [Channel clipping breaks author expectations, especially when using 'perceptually uniform' spaces (#9449)](https://github.com/w3c/csswg-drafts/issues/9449) -Cascade Layers (Cascading & Inheritance, Level 5) -- I want to move the conversation forward on [a `layer` attribute for the html `` element](https://github.com/whatwg/html/issues/7540). This issue has been stalled in the WHATWG for a while, as we try to sort out feature-testing new attributes in HTML. While I'd love to have feature queries in html links as well, I think [separating these two features](https://github.com/w3ctag/design-reviews/issues/970) might unblock the essential progress on Cascade Layers. -- There's been a very active discussion around [handling unlayered styles in the cascade](https://github.com/w3c/csswg-drafts/issues/6323#issuecomment-2207341923). By default, unlayered styles have priority over layered styles. [This is an essential default](https://github.com/w3c/csswg-drafts/issues/6284#issuecomment-2207379170) in my mind, but there are many use-cases where we should be override it. The mega-thread discussion keeps eating it's own tail, but it seems like we have three basic approaches to choose from (and then any number of small variations on each). I have a clear favorite there, but feel free to leave your thoughts as well. If possible, try not to get lost in the naming details - and focus first on the overall behavior of the feature! +I'm not an editor on the Color spec, +but [I have some opinions anyway](https://github.com/w3c/csswg-drafts/issues/9449). +Browsers currently use 'channel clipping' +to render out-of-gamut colors, +and [the results can be wild](https://codepen.io/miriamsuzanne/pen/BavZLNG). +I made a [comparison pen, to see the difference](https://codepen.io/miriamsuzanne/pen/rNRoBXO) between browser rendering and what the spec calls for: -Scope (Cascading & Inheritance, Level 6) -- We resolved [a series of issues](https://github.com/w3c/csswg-drafts/issues/10431#issuecomment-2189648413) related to scope specificity and nesting. In the future, you'll be able to put style declarations directly into an `@scope` rule, and they will apply to the scope root with no added specificity. Note that you can also use the `:scope` selector (with a specificity of one attribute), or the `&` selector (which uses the specificity of the scope-root selector). You can imagine bare declarations being wrapped in `:where(:scope)`. -- 😕 'Forgiving selector lists' are very handy, [but limited to `:is()` and `:where()`](https://github.com/w3c/csswg-drafts/issues/7676#issuecomment-1341347244). We had to update the scope start/end selectors [to be unforgiving](https://github.com/w3c/csswg-drafts/issues/10042). -- I've opened a new issue to discuss [implicit scopes when nesting](https://github.com/w3c/csswg-drafts/issues/10497). Not a big change in behavior, but potentially a nice shortcut in some situations? +{{ embed.codepen( + id='rNRoBXO', + title='Color Clipping v Mapping', + user='miriamsuzanne' +) }} -Mixins & Functions (Mixins & Functions, Level 1) -- The [Editor's Draft](https://drafts.csswg.org/css-mixins/) is underway! This isn't complete (mixins are missing), but it lays out our current plan for custom CSS functions. -- I wrote an article about [how mixins should interact with the cascade](/2024/06/11/removing-mixins/). I'd be happy for your thoughts! -- I've heard some browsers expressing doubt about the impact of mixins. I plan to start documenting use-cases where there are not good alternatives. If you have some, reach out! +Good news! +We now have +[a tentative compromise solution](https://github.com/w3c/csswg-drafts/issues/9449#issuecomment-2162711081) +that all browsers agree on. +It's not perfect, +but it's a big improvement +over the current state of things. -Other… -- I'm not an editor on the Color spec, but [I have some opinions anyway](https://github.com/w3c/csswg-drafts/issues/9449). Browsers currently use 'channel clipping' to render out-of-gamut colors, and [the results can be wild](https://codepen.io/miriamsuzanne/pen/BavZLNG). I made a [comparison pen, to see the difference](https://codepen.io/miriamsuzanne/pen/rNRoBXO) between browser rendering and what the spec calls for. Good news! We have [a tentative compromise solution](https://github.com/w3c/csswg-drafts/issues/9449#issuecomment-2162711081) that all browsers agree on. It's not perfect, but it's a big improvement over the current state of things. You can test how it changes the linked pen in Chrome, by turning on the `css gamut mapping` feature flag (`chrome://flags`). +You can test how it impacts the linked pen +by turning on the `css gamut mapping` feature flag +in some Chromium browser versions (go to `chrome://flags`). diff --git a/content/blog/2024/removing-mixins.md b/content/blog/2024/removing-mixins.md index 61837ea07..9f137fde8 100644 --- a/content/blog/2024/removing-mixins.md +++ b/content/blog/2024/removing-mixins.md @@ -11,7 +11,7 @@ tags: - Sass - CSS - CSSWG - - Mixins & Functions + - CSS Mixins & Functions summary: | The CSS Working Group has agreed to move forward From 4272ac8c05f0bf34d0d00259e0f5987032be0a36 Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Mon, 22 Jul 2024 10:16:35 -0600 Subject: [PATCH 3/6] Update content/blog/2024/csswg-july.md Co-authored-by: Jonny Gerig Meyer --- content/blog/2024/csswg-july.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2024/csswg-july.md b/content/blog/2024/csswg-july.md index 50f024c43..e8866e13d 100644 --- a/content/blog/2024/csswg-july.md +++ b/content/blog/2024/csswg-july.md @@ -1,5 +1,5 @@ --- -title: Working Group updates for June/July +title: CSS Working Group updates for June & July sub: What I've been working on as an Invited Expert date: 2024-07-23 tags: From 0b22b767cf672bcd630c0ddc4d78b0b8fdc15b3a Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Mon, 22 Jul 2024 10:50:52 -0600 Subject: [PATCH 4/6] Add csswg-july image --- content/blog/2024/csswg-july.md | 11 +++++++++-- src/images/blog/2024/csswg-june.jpg | Bin 0 -> 54542 bytes 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 src/images/blog/2024/csswg-june.jpg diff --git a/content/blog/2024/csswg-july.md b/content/blog/2024/csswg-july.md index e8866e13d..d4340e4f1 100644 --- a/content/blog/2024/csswg-july.md +++ b/content/blog/2024/csswg-july.md @@ -2,6 +2,13 @@ title: CSS Working Group updates for June & July sub: What I've been working on as an Invited Expert date: 2024-07-23 +image: + src: blog/2024/csswg-june.jpg + alt: > + A stepped gradient of a pink hue + in 2% lightness increments + from 100% to 58%, + labeled 'spec' tags: - CSS - CSSWG @@ -40,7 +47,7 @@ or contributing to our spec: ~~[Containment, Level 3](https://www.w3.org/TR/css-contain-3/)~~ -[Conditional Rules, Level 5](https://drafts.csswg.org/css-conditional-5/) +[Conditional Rules, Level 5](https://www.w3.org/TR/css-conditional-5/) ### Moving to a new specification @@ -58,7 +65,7 @@ To help clarify that relationship, and simplify maintenance of these distinct features, Container Queries are moving from the [Containment module (level 3)](https://www.w3.org/TR/css-contain-3/) -into the [Conditional Rules module (level 5)](https://drafts.csswg.org/css-conditional-5/). +into the [Conditional Rules module (level 5)](https://www.w3.org/TR/css-conditional-5/). During this transition, Container Queries disappeared from any public spec -- diff --git a/src/images/blog/2024/csswg-june.jpg b/src/images/blog/2024/csswg-june.jpg new file mode 100644 index 0000000000000000000000000000000000000000..63375364c12eadc7ed339e974a00517712f02877 GIT binary patch literal 54542 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 Date: Mon, 22 Jul 2024 11:30:55 -0600 Subject: [PATCH 5/6] Address Sondra review --- content/blog/2024/csswg-july.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/content/blog/2024/csswg-july.md b/content/blog/2024/csswg-july.md index d4340e4f1..ba1c1b9aa 100644 --- a/content/blog/2024/csswg-july.md +++ b/content/blog/2024/csswg-july.md @@ -1,6 +1,7 @@ --- -title: CSS Working Group updates for June & July +title: CSS Working Group Updates for June & July sub: What I've been working on as an Invited Expert +author: miriam date: 2024-07-23 image: src: blog/2024/csswg-june.jpg @@ -210,9 +211,8 @@ about new features showing up in production. I wrote up my thoughts, summarized by the title of the article: [Learn Grid Now, Container Queries Can Wait](/2024/06/13/css-layout/). -Later this month, -we'll be doing a live stream with -[Stephanie Eckles](https://thinkdobecreate.com) +We'll be doing a [live stream](https://www.youtube.com/watch?v=aDMWD_CYpEI) +with [Stephanie Eckles](https://thinkdobecreate.com) ([ModernCSS.dev](https://moderncss.dev/) and [SmolCSS](https://smolcss.dev/)) about the reasons to use grid, and some of the quick ways to get started. @@ -446,3 +446,11 @@ over the current state of things. You can test how it impacts the linked pen by turning on the `css gamut mapping` feature flag in some Chromium browser versions (go to `chrome://flags`). + +We talked about this issue +(and the potential solution) +on our [Winging It Live stream](https://www.youtube.com/watch?v=Lq4saw4Rqe0) +last month -- +along with details of our +[OddContrast](https://contrast.oddbird.net) +tool for wide-gamut contrast checking. From e8171b7528fd16d7fbfbe7bd01ab70db96bf9f39 Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Mon, 22 Jul 2024 12:01:10 -0600 Subject: [PATCH 6/6] Change date for july update post --- content/blog/2024/csswg-july.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2024/csswg-july.md b/content/blog/2024/csswg-july.md index ba1c1b9aa..e1dc9da3a 100644 --- a/content/blog/2024/csswg-july.md +++ b/content/blog/2024/csswg-july.md @@ -2,7 +2,7 @@ title: CSS Working Group Updates for June & July sub: What I've been working on as an Invited Expert author: miriam -date: 2024-07-23 +date: 2024-07-22 image: src: blog/2024/csswg-june.jpg alt: >