shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.

Administered by:

Server stats:

268
active users

#CssWg

0 posts0 participants0 posts today
westbrook<p>Where is my <a href="https://mastodon.social/tags/webKit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webKit</span></a> <span class="h-card" translate="no"><a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>webkit</span></a></span> support at!?!</p><p><a href="https://caniuse.com/?search=%3Ahas-slotted" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">caniuse.com/?search=%3Ahas-slo</span><span class="invisible">tted</span></a></p><p><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/cssWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssWG</span></a> <a href="https://mastodon.social/tags/hasSlotted" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hasSlotted</span></a> <a href="https://mastodon.social/tags/betterTheWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>betterTheWeb</span></a> <a href="https://mastodon.social/tags/realUseCaseIWantedToUseToday" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>realUseCaseIWantedToUseToday</span></a></p>
Roma Komarov<p>New blog post: “Fit-to-Width Discussions &amp; Feedback”</p><p><a href="https://blog.kizu.dev/fit-to-width-discussions-and-feedback/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">blog.kizu.dev/fit-to-width-dis</span><span class="invisible">cussions-and-feedback/</span></a></p><p>A&nbsp;bit less than a&nbsp;year ago, I&nbsp;published my&nbsp;“Fit-to-Width Text: A&nbsp;New Technique” article. Since then, CSSWG resolved to&nbsp;start working on&nbsp;it, and, following this, two things happened: a&nbsp;discussion of&nbsp;its potential accessibility issues, and an&nbsp;intent to&nbsp;prototype it&nbsp;from Google.</p><p>I&nbsp;have some thoughts, feedback, and ideas about both of&nbsp;these, so&nbsp;here is&nbsp;a&nbsp;post!</p><p><a href="https://front-end.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> <a href="https://front-end.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> <a href="https://front-end.social/tags/Typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Typography</span></a> <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
westbrook<p>I love it when a plan comes together!!</p><p>`:host:has(...) {}` is now shipping in Chromium! 🪄 💫 ✨ </p><p><a href="https://issues.chromium.org/issues/359758910" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">issues.chromium.org/issues/359</span><span class="invisible">758910</span></a></p><p><a href="https://mastodon.social/tags/webComponentCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponentCG</span></a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> <a href="https://mastodon.social/tags/testTheWebForward" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>testTheWebForward</span></a></p>
westbrook<p>Could/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?</p><p><a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> <a href="https://mastodon.social/tags/scrollSnap" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scrollSnap</span></a> <a href="https://mastodon.social/tags/howDoesItWork" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>howDoesItWork</span></a></p>
westbrook<p>Holy cow. Container style queries are AMAZING!</p><p>Great work <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> and <span class="h-card" translate="no"><a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>mia</span></a></span>, et al for making this possible for web devs the world over.</p><p>Also, thanks to <a href="https://mastodon.social/tags/webkit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webkit</span></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">#<span>firefox</span></a> at? You gotta get on this hotness <a href="https://mastodon.social/tags/mozilla" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mozilla</span></a>. </p><p><a href="https://mastodon.social/tags/containerStyleQueries" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>containerStyleQueries</span></a> <a href="https://mastodon.social/tags/futureCSSToday" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>futureCSSToday</span></a></p>
westbrook<p>Hrm. <a href="https://mastodon.social/tags/viewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>viewTransitions</span></a> and <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>shadowDOM</span></a> …discuss. </p><p><a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponentsCG</span></a></p>
westbrook<p>Now 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?</p><p>Something like:</p><p>a {<br> anchor-name: --link-${indexOf};<br>}</p><p>So we could anchor to ANY `&lt;a&gt;` on a page without needing to explicitly give each one of those an `anchor-name`?</p><p>I don't much know the View Transitions API, but maybe it could benefit from similar?</p><p><a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSAnchorPositioning</span></a> <a href="https://mastodon.social/tags/CSSNaming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSNaming</span></a> <a href="https://mastodon.social/tags/CSSNext" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSNext</span></a></p>
Bramus<p>Although … we're having a <a href="https://front-end.social/tags/csswg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>csswg</span></a> F2F this week (which I'm attending remotely) so it won't be that "regular" of a week 😅</p>
westbrook<p>I just shared my thoughts on <span class="h-card" translate="no"><a href="https://toot.cafe/@bkardell" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>bkardell</span></a></span>'s Half Light library. Have you!?</p><p><a href="https://github.com/bkardell/half-light/issues/1#issuecomment-1935083260" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/bkardell/half-light</span><span class="invisible">/issues/1#issuecomment-1935083260</span></a></p><p>Join the conversation around opening the style API for Shadow DOM-bearing elements.</p><p><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> <a href="https://mastodon.social/tags/APIs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>APIs</span></a> <a href="https://mastodon.social/tags/w3c" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>w3c</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevSolutions" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevSolutions</span></a></p>
westbrook<p><span class="h-card" translate="no"><a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>mia</span></a></span> The Action Item on this after this week’s <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a> face-to-face session was:</p><p>- Community Group should investigate and clarify smaller “user stories” around external styling</p><p>We’d be excited to have you and the <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> join in the conversation!</p><p>The <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponentsCG</span></a> is planning out our February session that could (should?) include this, here: <a href="https://github.com/w3c/webcomponents-cg/issues/77" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/w3c/webcomponents-c</span><span class="invisible">g/issues/77</span></a></p>
westbrook<p><span class="h-card" translate="no"><a href="https://toot.cafe/@slightlyoff" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>slightlyoff</span></a></span> <span class="h-card" translate="no"><a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>zachleat</span></a></span> <span class="h-card" translate="no"><a href="https://mastodon.social/@passle" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>passle</span></a></span> Not that any of these have much availability (in their current form) in any browser...</p><p>CSS Module Scripts is available in Chrome (where you see a 5%+ perf bump for using them over JS strings), but only with the `assert` keywork, not `with`, yet.</p><p>@​sheet was agreed to by the <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> (<a href="https://github.com/w3c/csswg-drafts/issues/5629#issuecomment-1498299448" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/w3c/csswg-drafts/is</span><span class="invisible">sues/5629#issuecomment-1498299448</span></a>) (I know you're a big fan 😉) Not sure if resources for shipping or fully spec'ing that is the current blocker.</p><p>DOM Parts was originally proposed by Apple, so 🤞</p>
Jen Simmons<p>Did you know the <a href="https://front-end.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> extended the :nth-of-type/:nth-child selectors to be much more powerful?</p><p>Safari shipped support for these new superpowers in 2015! <a href="https://caniuse.com/css-nth-child-of" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">caniuse.com/css-nth-child-of</span><span class="invisible"></span></a></p><p>But none of the other browsers did… so you probably haven’t heard about it.</p><p>Then Apple proposed :nth-* pseudo-classes interoperability for Interop 2023: <a href="https://github.com/web-platform-tests/interop/issues/225" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/web-platform-tests/</span><span class="invisible">interop/issues/225</span></a></p><p>And now Chrome is working on implementing support! ☺️</p><p><span class="h-card"><a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>bramus</span></a></span> wrote about what you can do with these CSS selectors:<br><a href="https://www.bram.us/2020/03/16/css-nth-of-class-selector/" rel="nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">bram.us/2020/03/16/css-nth-of-</span><span class="invisible">class-selector/</span></a></p>
Mia (web luddite)<p>The <a href="https://front-end.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> just resolved to allow `var()` references in <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> container queries:</p><p>```css<br>@container (inline-size &gt; var(--small)) {<br> .card { padding: 2em; }<br>}<br>```</p><p>The custom property is resolved on the container – so we're querying if the computed value of `--small` on our container:</p><p>1. is valid in context (a `&lt;length&gt;` value), and<br>2. is less-than the container `inline-size`</p><p>It's not "custom media queries" feature, but it is Damn Close™️ – and maybe more powerful. I'm excited to play with it! 🥳</p>
Mia (web luddite)<p>The <a href="https://front-end.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSWG</span></a> just resolved to make the `display` property animatable, with non-`none` values given priority during the transition. It's still discrete - there's no intermediate values between `block` &amp; `none` - but this allows toggling it as part of a transition or animation.</p><p>For example (from <span class="h-card"><a href="https://front-end.social/@flackr" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>flackr</span></a></span>) this would become `display:none` when the transition completes:</p><p>```css<br>.hide {<br> transition: opacity 200ms, display 200ms;<br> display: none;<br> opacity: 0;<br>}<br>```</p><p><a href="https://github.com/w3c/csswg-drafts/issues/6429#issuecomment-1318933547" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/w3c/csswg-drafts/is</span><span class="invisible">sues/6429#issuecomment-1318933547</span></a></p>