People are not static, we are dynamic. In order to meet our needs at any point in our lives or day, the UIs we create must be able to adapt to us — not the other way around. https://www.linkedin.com/posts/derekfeatherstone_accessibility-disability-activity-7434648295420870656-mH3o

People got upset when GitHub (rightfully) called out usability/accessibility issues with toasts.

And now, I have to deal with some thought leaders’ anti take on it to my teams because they wanted to get attention for playing devils advocate.

Tech “thought leaders” tend to make my job harder 🙃

🚩✊️️ TGIF, because Friday is Dependency Deletion Day! It has come to my attention that some folks STILL use lodash because of… cloneDeep?! I see about 150,000,000 weekly downloads for this ancient function on NPM, but come on—we've had structuredClone for some time, and it's better in every way.

👉️ https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

Can you guess which one is a valid syntax for style queries?

Think about it, then read my last post to find the correct answer (and understand why you got it wrong)

https://css-tip.com/if-trick/

#CSS #HTML

When you don't put `aria-hidden="true"` on decorative SVGs, they'll be announced by some screen readers.

#WebAccessibilityFails

https://matuzo.at/blog/2026/put-aria-hidden-on-presentational-svgs

@sarajw I do carry a water bottle around. The dehydration is real, so are ever-increasing toilet breaks. 😅

You can throw away innerHTML and replace it with the new setHTML(), which has a built-in sanitizer. Here's how it works:

💡 CSS Tip!

For years, we've had the "z-index, stacking context" nightmare, but we will soon have a worse nightmare related to Anchor Positioning 😱

When it doesn't work, it's frustrating, so it's time to learn how it really works.

https://css-tip.com/anchor-issues/

It's not as simple as you might think!

#CSS #HTML

Somebody on LinkedIn asked for my approach to global CSS in #Webcomponents with Shadow DOM:

1. Import CSS as Strings (via Vite)
2. Shove CSS into the CSSStyleSheet Constructor
3. Add the results to the ShadowRoot's adopted stylesheets
4. Delete all of the above once Safari supports CSS module scripts

This is how you future-proof your projects: be aware of what's coming to the platform and prepare your workarounds to be easily removable when the new features arrive ✨

#webdev #javascript

@jensimmons I’m using LLMs for some things more regularly. It helps with incrementally documenting my work. I'm sometimes surprised how well it does. But it still requires a lot of checking and redaction. So, not a win for productivity.
Also, they are still awful at working on existing CSS code bases. Not sure what's going on there.

@tbroyer I'm now only using manual slot assignment. So no more attribute toggling. The approach also no longer needs any event listeners due to the way the 'manual' slot assignment needs to work. The menu-bar now uses a `requestAnimationFrame` to make sure it can calculate the menu positions before moving stuff around. There is a risk of flashing or missing menu items.

@tbroyer I've removed the 'slot' selectors and am now using CSS State. So styling is now entirely in the Shadow DOM.
Looking into manual slot assignment, but may keep the custom event, as that seems a better/faster fit. Thanks for the insight into alternatives.

@tbroyer I’ve avoided `slotchange` events in the past because I’ve found them a bit flaky and verbose. The custom event is fired when I know I can get the rendered position.
However, it is worth considering whether I can avoid adding slot attributes. I can use css states as a replacement for the host slot selectors.

The combination of Custom Element Slots, the Popover API, and CSS Anchor Positioning enables complex navigation menus, with the browser doing most of the lifting.

#css #webcomponents

https://codepen.io/dutchcelt/project/editor/AMGWnp

@stuffbreaker The first point isn't a deal breaker. Could even speed things up. But it can't be a default in a library, for example.
The last point is a bit trickier but more impactful. I'll take another look at the approach.

@stuffbreaker I gave your snippet a little spin using `content-visibility` in this little menu demo using slots
https://codepen.io/dutchcelt/project/editor/AMGWnp

I've been trying to think of a way to reduce the flash of unstyled content (FOUC) when using #WebComponents, with something I could add to my #CSS reset that doesn't require #JavaScript.

Here's what I came up with:

I wrote a new article: “Solving Shrinkwrap: New Experimental Technique”

https://kizu.dev/shrinkwrap-solution/

In this article, I present my new technique for solving a #CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content.

By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents, demonstrating that for many cases this can already work and might unlock a future native feature.

People are debating the masonry layout, and I'm creating strange layouts.

A Pyramidal Grid of Hexagon Shapes! 👀

https://css-tip.com/pyramidal-grid/

A fully responsive implementation powered by modern CSS (corner-shape, sibling-index(), math functions, etc.) and no media queries.

#CSS #HTML

@sl007 @jensimmons @jaffathecake I get your concern. But it’s usually a difference in opinion or approach. That seems more resolved than I’ve seen it in a long time. Hence my excitement.
For what’s its worth, Firefox is on a roll. Let’s ff’ing go!