Darin Senneff

Seeing activity this morning on WebKit bugzilla about the longtime CSS bug of ‘position: relative’ not working on 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

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 ’ 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:

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. @firefoxwebdevs@mastodon.social

@monochromer@mastodon.social I was able to create a workaround by making the close button a popover ('popover=manual') – something recommended to me by @mayank@front-end.social in a previous post on here. Then when the dialog opens I use some JS to also open the close button popover (since there's no way to currently auto-open a popover). That allows the transition to now work, see the demo here: https://codepen.io/dsenneff/pen/wBGbavB/6cac7606d6de0eb1c84e37cf1e181ffb Now, is all of this worth the hassle? Probably not. I might just continue to use the "old way" now.

@monochromer@mastodon.social I dug into this more, and apparently it is not a bug but rather intended behavior. The dialog and close button have a parent-child relationship, which still allows anchor positioning to function. But if the parent gets a property that creates a new containing block inside it (like 'transform' or 'position: relative'), the containing block will sever the anchor connection between the parent and child. If the two elements were siblings it wouldn't be an issue.

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

@monochromer@mastodon.social I believe that's due to an issue with anchor positioning not working correctly when the 'transform' property is set on the anchor element. But looks like Chrome is shipping a fix for that soon, from what I can tell here: https://chromestatus.com/feature/5201048700583936

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

@kizu@front-end.social Roger that, going to mess with it and see. I didn’t know if there was something specific to s I wasn’t aware of that didn’t currently allow it.

@kizu@front-end.social Yup, I was wondering if anchor positioning could work around that but haven’t tested it out. What aspect of anchor positioning is currently not implemented (for browsers that have shipped it) that’s needed for this?

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

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

I’ve been setting ‘overflow: visible’ on the 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