Let’s get the CSS if() function into Interop 2027

https://github.com/web-platform-tests/interop/issues/1343

How are folks detecting CSS support for the customizable <select> element?

Ignoring multi-select and listboxes, does this cover everything needed for a customizable single-select:
@supports (appearance: base-select) {}

Wondering if this will give any false-positives.

#css #html #webdev

Seeing activity this morning on WebKit bugzilla about the longtime CSS bug of ‘position: relative’ not working on <tr> elements in Safari. Hoping this works and lands soon.

It will be super helpful when doing things like making clickable or selectable table rows.

https://bugs.webkit.org/show_bug.cgi?id=240961

Take a Joy-Con and connect it with WebHID, draw a picture in the air and capture it with the sensors. Create an SVG path and insert in the DOM. Apply CSS styling. Sample the DOM and use WebUSB to convert to ILDA and send it to a laser projector.

I created the worlds most complicated laserpointer…

Updated my ‘Dynamic Accessible Descriptions Reference’ blog post (last updated 10/2024) with a fresh round of tests on the latest screen readers and browsers. A few brief notes:

-Some overall improvement, especially on MacOS VoiceOver.
-‘aria-description’ has better support than ‘aria-describedby’
-iOS VoiceOver continues to struggle

https://www.darins.page/articles/dynamic-accessible-descriptions-reference

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.

https://www.darins.page/articles/easier-striped-tables

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.

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.

https://codepen.io/dsenneff/pen/wBWgMWJ/f77040fb2952af44a3f496669c5d0ed1

Kind of what I should’ve assumed, since the hidden parent means the image doesn’t have a 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?

Anchor Positioning shipping in Firefox! Now supported in all major browsers. I’ve been using progressive enhancement alongside Anchor Positioning, but excited to have support in Firefox now too. https://mastodon.social/@firefoxwebdevs/115888165064929058

Crazy that we’re going into 2026 and you still can’t Tab to a scrollable region in Safari. https://toot.cafe/@aardrian/115701174662226331

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:
https://www.darins.page/articles/close-button-hang-dialog

For those that’ve implemented an overlapping close button in the corner of a modal dialog (1st image attached):

How are you avoiding the <button> forcing scrolling due to the <dialog>’s default ‘overflow: auto’ (2nd image attached)?

I’ve been setting ‘overflow: visible’ on the <dialog> and then using a wrapper around the modal’s content that can overflow and scroll as needed.

Wondering if there’s a more elegant way?

#CSS #WebDev

I like Oklachroma https://front-end.social/@eeeps/109955851076325361

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.

Submitted Scroll Snap Events (“scrollSnapChange” and “scrollSnapChanging”) to Interop 2026. Feel free to thumbs up if you’d like this interoperable between browsers as well.

https://github.com/web-platform-tests/interop/issues/1107

👀 https://fed.brid.gy/r/https://bsky.app/profile/did:plc:cs3zn3kikj5kwzljlvyr55sg/post/3lulltsffe423

Seeing rumors that Apple is renaming all of their OS’s to use years moving forward. So instead of the upcoming ‘iOS19’ it will be ‘iOS26’.

I assume Safari will do the same, which would mean we’ll be jumping from Safari 18 to Safari 26 later this year.

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. Interested in testing it out.

https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/

It’s amazing what a new battery did to my 4 year old iPhone. I used to be down to 20% charge by 2pm, now it lasts the full day.

I expect many others to hold onto their devices for longer. Make sure your sites are optimized for older devices!