digitalcourage.social

Suei'd love a css selector for individual characters, someone surely must have already thought of this, turns out many have <a href="https://adactio.medium.com/an-nth-letter-selector-in-css-6f957e5b18b0" rel="nofollow noopener" translate="no" target="_blank">https://adactio.medium.com/an-nth-letter-selector-in-css-6f957e5b18b0</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/cssWg" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssWg</a> let's get this added!

Julie Blanc📘 Just published: “Designing with Abstractions: CSS and the Case of Masonry Layouts”This (academic) article explores CSS as both a technical system and a design object. It examines how this is shaped through negotiation between conceptual models, implementation constraints, and interface considerations, focusing on the Masonry layout debates.Appreciation to those participating in CSS WG debates and making this work visible.→ <a href="https://journal.dampress.org/issues/design-et-abstractions/designing-with-abstractions-css-and-the-case-of-masonry-layouts" rel="nofollow noopener" translate="no" target="_blank">https://journal.dampress.org/issues/design-et-abstractions/designing-with-abstractions-css-and-the-case-of-masonry-layouts</a> <a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.design/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.design/tags/w3c" class="mention hashtag" rel="nofollow noopener" target="_blank">#w3c</a> <a href="https://mastodon.design/tags/WebStandards" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebStandards</a>

westbrookWhere is my <a href="https://mastodon.social/tags/webKit" class="mention hashtag" rel="nofollow noopener" target="_blank">#webKit</a> <a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener" target="_blank">@webkit</a> support at!?!<a href="https://caniuse.com/?search=%3Ahas-slotted" rel="nofollow noopener" translate="no" target="_blank">https://caniuse.com/?search=%3Ahas-slotted</a><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/cssWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssWG</a> <a href="https://mastodon.social/tags/hasSlotted" class="mention hashtag" rel="nofollow noopener" target="_blank">#hasSlotted</a> <a href="https://mastodon.social/tags/betterTheWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#betterTheWeb</a> <a href="https://mastodon.social/tags/realUseCaseIWantedToUseToday" class="mention hashtag" rel="nofollow noopener" target="_blank">#realUseCaseIWantedToUseToday</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Proposals" class="mention hashtag" rel="nofollow noopener" target="_blank">#Proposals</a> How do we evolve CSS logical shorthands? · There are options, but one major roadblock <a href="https://ilo.im/1630tm" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1630tm</a>_____ <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Shorthand" class="mention hashtag" rel="nofollow noopener" target="_blank">#Shorthand</a> <a href="https://mastodon.social/tags/LogicalProperties" class="mention hashtag" rel="nofollow noopener" target="_blank">#LogicalProperties</a> <a href="https://mastodon.social/tags/Specification" class="mention hashtag" rel="nofollow noopener" target="_blank">#Specification</a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/W3C" class="mention hashtag" rel="nofollow noopener" target="_blank">#W3C</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a>

Amelia Bellamy-RoydsOK, <a href="https://front-end.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> folks, whose brilliant idea was it to make auto-generated heading IDs for anchor links in the CSS spec end with ① or ② or ⑤ characters (for the 1st, 2nd, or 5th heading in a section without an otherwise specified ID).Looks very cute in a URL bar, but gets copy & pasted as URL encoded character barf. And then there's the likely screen-reader mangling of special characters.This had better be for Editor's drafts only & prompt a warning to add custom IDs before publication.🤨

Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿Downside: missed plane BOS->SFO because wheelchair arrived too late. Upside: <a href="https://www.chase.com/travel/guide/experiences/boston-sapphire-lounge" rel="nofollow noopener" translate="no" target="_blank">https://www.chase.com/travel/guide/experiences/boston-sapphire-lounge</a>(will still make first day of <a href="https://mastodon.scot/tags/csswg" class="mention hashtag" rel="nofollow noopener" target="_blank">#csswg</a> meeting tomorrow)

Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿The <a href="https://mastodon.scot/tags/csswg" class="mention hashtag" rel="nofollow noopener" target="_blank">#csswg</a> has published CSS Color HDR 1. This gives a way to control the presentation of HDR content such as video, images etc and also adds several HDR colorspaces to CSS (in addition to the WCG but SDR colorspaces that already exist). <a href="https://mastodon.scot/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a><a href="https://www.w3.org/TR/css-color-hdr-1/" rel="nofollow noopener" translate="no" target="_blank">https://www.w3.org/TR/css-color-hdr-1/</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Debates" class="mention hashtag" rel="nofollow noopener" target="_blank">#Debates</a> Should masonry be part of CSS grid? · Exploring two CSS syntaxes for waterfall layouts <a href="https://ilo.im/160my8" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/160my8</a>______ <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/Masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#Masonry</a> <a href="https://mastodon.social/tags/UseCase" class="mention hashtag" rel="nofollow noopener" target="_blank">#UseCase</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/Specification" class="mention hashtag" rel="nofollow noopener" target="_blank">#Specification</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a>

westbrookDoes anyone know if there's active spec work going into a `matchMedia()` (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" rel="nofollow noopener" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia</a>) equivalent object for Container Style Queries (<a href="https://caniuse.com/css-container-queries-style" rel="nofollow noopener" translate="no" target="_blank">https://caniuse.com/css-container-queries-style</a>)?I'm thinking about when Content-Aware Components will be able to pass their knowledge about state down to child elements with CSS Custom Properties and have the JS be reactive to that data in cases where the actual DOM should change based on that state.<a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/DOMWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#DOMWG</a>

Sara Joy :happy_pepper:Hey <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> people, or <a href="https://front-end.social/tags/CssWg" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssWg</a> people --I know there's discussion about light-dark() eventually being able to do more than just colours. And that in another part of CSS, maybe container queries could include state (like is sticky thing stuck) - mostly I'm like Oooh, could it also get color-scheme state?Where would I best look up discussions or articles about such things?Thank yoouuu

Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿<a href="https://mastodon.social/@csilverman" class="u-url mention" rel="nofollow noopener" target="_blank">@csilverman</a> Open <a href="https://mastodon.scot/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> issue on Criteria for generic font families. Alan Stearns wrote:"I do think there is consensus that the criteria should be strict enough to exclude at least fantasy if we were able to re-evaluate current generic font families."<a href="https://github.com/w3c/csswg-drafts/issues/4910#issuecomment-607931058" rel="nofollow noopener" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/4910#issuecomment-607931058</a>

Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿<a href="https://front-end.social/@AmeliaBR" class="u-url mention" rel="nofollow noopener" target="_blank">@AmeliaBR</a> <a href="https://mastodon.social/@pepelsbey" class="u-url mention" rel="nofollow noopener" target="_blank">@pepelsbey</a> <a href="https://front-end.social/@matuzo" class="u-url mention" rel="nofollow noopener" target="_blank">@matuzo</a> The <a href="https://mastodon.scot/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> (not me, personally) did intend that, yes. Interpolation in gamma-encoded rgb spaces is not perceptually uniform, and the over-dark midpoint is rarely desirable. Often, extra stops are inserted to partly compensate.We have done this before (substituting an overall better behavior), for example, underlining that doesn't obliterate descenders.

westbrookCould/would/should an element with `scroll-snap-align: center;` but a number of `display: contents;` between it and the scrolling element participate in scroll snapping and ScrollSnap events?<a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/scrollSnap" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrollSnap</a> <a href="https://mastodon.social/tags/howDoesItWork" class="mention hashtag" rel="nofollow noopener" target="_blank">#howDoesItWork</a>

westbrookNow it's happening in Firefox Nightly, too, behind the `layout.css.has-slotted-selector.enabled` flag. <a href="https://indieweb.social/@keithamus" class="u-url mention" rel="nofollow noopener" target="_blank">@keithamus</a> is a beast!! 🤘 It's this is fully shipped x-browser before Interop 2025 starts, they'll definitely pick it...if nothing else than to pad their stats!! 🤣 <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponentsCG</a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a>

westbrookIt's happening-meme!!! 💣<a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/hasSlotted" class="mention hashtag" rel="nofollow noopener" target="_blank">#hasSlotted</a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponentsCG</a> <a href="https://mastodon.social/tags/theFuture" class="mention hashtag" rel="nofollow noopener" target="_blank">#theFuture</a>

westbrookHoly cow. Container style queries are AMAZING!Great work <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> and <a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@mia</a>, et al for making this possible for web devs the world over.Also, thanks to <a href="https://mastodon.social/tags/webkit" class="mention hashtag" rel="nofollow noopener" target="_blank">#webkit</a> for bringing the API to Safari 18. Where's my <a href="https://mastodon.social/tags/firefox" class="mention hashtag" rel="nofollow noopener" target="_blank">#firefox</a> at? You gotta get on this hotness <a href="https://mastodon.social/tags/mozilla" class="mention hashtag" rel="nofollow noopener" target="_blank">#mozilla</a>. <a href="https://mastodon.social/tags/containerStyleQueries" class="mention hashtag" rel="nofollow noopener" target="_blank">#containerStyleQueries</a> <a href="https://mastodon.social/tags/futureCSSToday" class="mention hashtag" rel="nofollow noopener" target="_blank">#futureCSSToday</a>

westbrookRe: <a href="https://front-end.social/@css/112802157138745287" rel="nofollow noopener" translate="no" target="_blank">https://front-end.social/@css/112802157138745287</a>I've love to set default values for theme/component colors via a pallet of colors (say for instance <a href="https://open-props.style/" rel="nofollow noopener" translate="no" target="_blank">https://open-props.style/</a>), e.g.:@property --surface { syntax: "<color>"; inherits: true; initial-value: light-dark(var(--gray-1), var(--gray-11)); }Assuming those two gray values are also @property, should that work? I'm not seeing it work, which makes me sad that `initial-value` would have less use when stacking vars.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/csswg" class="mention hashtag" rel="nofollow noopener" target="_blank">#csswg</a> <a href="https://mastodon.social/tags/themeYourWorld" class="mention hashtag" rel="nofollow noopener" target="_blank">#themeYourWorld</a> <a href="https://mastodon.social/tags/openProps" class="mention hashtag" rel="nofollow noopener" target="_blank">#openProps</a>

westbrookNow that CSS Anchor Positioning allows us to "name a reference" in CSS, do we need being able to consume the value of `:nth-child` or similar when naming things?Something like:a { anchor-name: --link-${indexOf}; }So we could anchor to ANY `<a>` on a page without needing to explicitly give each one of those an `anchor-name`?I don't much know the View Transitions API, but maybe it could benefit from similar?<a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSAnchorPositioning</a> <a href="https://mastodon.social/tags/CSSNaming" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSNaming</a> <a href="https://mastodon.social/tags/CSSNext" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSNext</a>

Amelia Bellamy-RoydsI'm not saying I'm *never* going to read all the long-form articles I have in open tabs, but I just noticed they include a summary of the CSS working group's February face-to-face meeting.And here I was feeling a little left out by all the <a href="https://front-end.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> posts about their June meeting on right now. I'm still far away from keeping up with all the new work those folks are doing!!!PS, if you want the previously-on recap, it's audio / transcript of a <a href="https://toot.cafe/@bkardell" class="u-url mention" rel="nofollow noopener" target="_blank">@bkardell</a> & <a href="https://mastodon.social/@Meyerweb" class="u-url mention" rel="nofollow noopener" target="_blank">@Meyerweb</a> chat: <a href="https://www.igalia.com/chats/2024-csswg-f2f-1" rel="nofollow noopener" translate="no" target="_blank">https://www.igalia.com/chats/2024-csswg-f2f-1</a>

Lea Verou, PhDZoe prepares for the <a href="https://front-end.social/tags/csswg" class="mention hashtag" rel="nofollow noopener" target="_blank">#csswg</a> meeting tomorrow 😅

Recent searches

Search options

Administered by:

Server stats:

#CssWg