A blog about web development, HTML, CSS, JavaScript, and web accessibility.

Day 102: selecting the scoping root

There are different ways of selecting the scoping root inside a @scope rule.

Pros and cons of using Shadow DOM and style encapsulation

When I started to work with web components, I compared different options and decided to go with lit. I knew the extra performance cost would pay off quickly, and it fit into my performance budget. I’m still happy with my decision.

aria-haspopup and screen readers

I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute. I wanted to know how that manifests used on a button.

Visually hidden links with 0 dimensions

If you have used a visually-hidden class in the past, you might have noticed that the width and height is set to 1px and not 0. I’ve always wondered why.

O dialog focus, where art thou?

Here’s a job interview question for you: When you click a button and call the showModal() method to open a modal <dialog>, where does the focus go by default, and how can you move it elsewhere?

the article element and screen readers

I wanted to know how and if common screen readers expose the <article> element.
Here are my results:

the details element and in-page search

An important factor in terms of UX and accessibility for deciding whether the <details> element is the right solution for a problem is the find-in-page behaviour.

form and search landmarks

I wanted to know how well common screen readers and browsers support search and form landmarks. Here are my results:

Cascade Layers are useless*

*if you don‘t understand the problems they solve and use them in combination with other solutions that tackle the same challenges albeit less elegantly and with the downside of limiting you in taking full advantage of selectors, one of the coolest features in CSS, and if you ignore the fact that they can help you organise and manage your own and third-party code.

Day 101: scoping

Similar to container queries or cascade layers, we have another new impactful feature in CSS: scoping.