@rniwa Hey, any chance you could get some more eyes on this issue? https://bugs.webkit.org/show_bug.cgi?id=223814 Has been open since 2021. It's basically about `::slotted(input)::placeholder` working everywhere except WebKit.
Whatever part of the web you think you work on (UX, visual design, integration, perf, marketing) you're actually always working on accessibility.
Anchor positioning is awesome, so we made Awesome Anchor Positioning to curate documentation, how-tos and awesome demos. What are we missing? Open a PR and let us know!
Blink: Intent to Ship: CSS Scroll State Container Queries https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeTD96%2BtbBdt3OFkOL5Z0NmjevKsjCBH2PB7JH7BkYbNvA%40mail.gmail.com
Do you, also, develop with the #popoverAPI?
Do you do so in conjunction with IFRAMEs?
Possibly without thinking about it via #storybook?
Have you, also, run into this #Chromium bug with DevTools? https://issues.chromium.org/issues/378330033
+1s and CC adds are a great way to speed implementors on the path towards a fix. 🙇
A wild #webkit PR enters that chat… https://github.com/WebKit/WebKit/pull/36072 Could this beat #chromium to stable?!? 🤭
Where’s my #mozilla peeps at?
So, it looks like `:host:has()` will be landing in Chrome 131 stable! 🥳
https://codepen.io/Westbrook/pen/WNVJjJP
See "This is styled text!" in green.
When can we get `:has-slotted` landed? It's behind a flag in Canary, and it works great! 🙏
See "This is extra special styled text!" in green and bold!
This article by @shadeed9 is fantastic. It explores the choice of adding masonry-layout capabilities to CSS Grid vs creating a whole new display type. He created several examples, going through the code needed to create layout variations at breakpoints while still supporting older browsers. What would it be like to use each in the real world?
A highly recommended read!
proposed a #CSS `scroll-state` query for easily knowing which direction the user is scrolling
want it?
have additional use cases?
**give it a vote or comment!**
"Progress of Blink for iOS" - slides from a lightning talk at BlinkOn by Gyuyoung Kim of @igalia https://docs.google.com/presentation/d/1soVV176Hw8WTFKpcMbAQS5OUQ7oqIpDcbEug5d9C-ec/edit#slide=id.p
This seems reasonable, right #CSSWG ?
```css
custom-element::part(interactive-part) {
&:hover {
/* Please sir, can I have some styles? */
}
}
```
Feels like this was maybe an accidental side effect of specifically preventing things like:
```css
div:after {
&:hover {
/* Nothing to style here... */
}
}
```
Glad to see Tab looking for a second pass on this conversation before fully closing! 🔥
Love the new scroll snap events. Makes building a calendar where you can swipe *much* easier. https://developer.chrome.com/blog/scroll-snap-events cc @argyleink
Wow, look at this AMAZING Scroll-Driven Animations demo by Paul Noble!
https://codepen.io/paulnoble/pen/gOVPedz
Go check it out (and hit the ❤️ icon).
Who likes themselves some #webComponents related #interop2024 proposals?
+1 them while they are hot!
Reference Target: https://github.com/web-platform-tests/interop/issues/792
:host(:has(...)) and :host:has(...): https://github.com/web-platform-tests/interop/issues/791
:has-slotted: https://github.com/web-platform-tests/interop/issues/790
Import Attributes: https://github.com/web-platform-tests/interop/issues/733
CSS Module Scripts: https://github.com/web-platform-tests/interop/issues/703
It's gonna be a good year!
@nicolaschevobbe Just noticed that with devtools inspector open & inspecting an element in the table, scrolling is slow (you can see it repainting) compared to the same scenario in Chrome. https://storybook.sanomalearning.design/?path=/story/grid-basics--simple
This uses a virtualized list: it only renders the table rows that are visible in the viewport. So a *lot* of mutation in the DOM is happening when you're scrolling.
Shall i create an issue for this?
@nicolaschevobbe Hey, specific FF devtools question: on https://sanomalearning.design/categories/components/dialog/usage/, with devtools Inspector tab open, if i click the “Open dialog" button, the entire browser *freezes* briefly. This only seems to happen with the Inspector tab open. Do you have any idea what might be causing this? (something on our end?)
Totally loving the “scroll” badges
in #ChromeDevTools’s Elements panel.
Available in Chrome 130 which goes stable mid October.
https://developer.chrome.com/blog/new-in-devtools-130#scroll-badge
I've had this image forever, and I refer to it all the time.
For some reason, even with all the CSSing I do, I continuously forget which parts are called what. Thank you, kind JPG, for reminding me!
💯 Knowing how the web works is a thousand times more valuable than knowing how to do things in the latest and greatest framework.
https://frontendmasters.com/blog/you-might-not-need-that-framework/