I had completely slept on the ‘of <selector>’ syntax for the :nth-child() CSS selector. Recently discovered it and was able to solve an annoying table row issue.
www.darins.page/articles/eas...
Has anybody here documented their process of creating a design system? Creating one for my dev team at work is on my plate for this year and I’d love to read about how folks got started, worked around issues, etc.
Looks cool! How are you doing the animated progress border? An SVG shape with a stroke that you manipulate with stroke-dasharray/offset?
Ran a quick demo and it looks like the image does not load until the dialog/popover is first opened, according to the Network tab in Firefox and Chrome devtools.
codepen.io/dsenneff/pen...
Presumably the hidden parent means no image footprint for the browser to check against the viewport.
Anybody know how HTML lazy loading handles images inside of a dialog or popover?
Say you have this:
<dialog><img src=‘…’ loading=‘lazy’></dialog>
Does the image load during the page load or only after the dialog/popover opens?
100% this. And as the fallback, I recommend
html { height: 100%; }
body { min-height: 100%; }
It avoids many of the issues with viewport units, and acts more like stretch.
You know those modal dialogs that have a close button hanging off the top-right corner? There’s a few steps needed to do it right, but it might be easier now with CSS Anchor Positioning.
I wrote a post exploring it:
www.darins.page/articles/clo...
Is there a cool way that people are pronouncing OKLCH? Kind of how SQL is pronounced “sequel”? Wondering if I’m over here just saying the five letters like a dork.
Looks awesome! Does it still work if you’re using custom fallback options?
Looks like the Edge team prototyped the ‘ARIA Notify API’ for an origin trial, available now in Edge 136.
Seems like this could be a cleaner solution for those times where you implement a visually-hidden live region solely to pass updates to screen readers.
blogs.windows.com/msedgedev/20...
Issue #106 of the UI Dev Newsletter is out!
In this issue: guide for alt texts, using progressive enhancement, light and dark mode, and more.
Featuring @stevefaulkner.bsky.social @bram.us @chriscoyier.net @dsenneff.bsky.social @keithamus.social @cssence.com
www.silvestar.codes/side-project...
Do you work with <table>s and wish there was a CSS feature or improvement that doesn’t exist?
I wrote about the 3 CSS table features I’d like to see:
www.darins.page/articles/my-...
#webdev #html #css #webdevelopment #accessibility
