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

Day 106: the scripting media feature

The scripting media feature is an excellent addition to CSS for those who believe in progressive enhancement: It enables you to detect whether scripting languages, such as JavaScript, are supported.

Day 105: defining multiple syntax components

As already explained on day 84, using the syntax descriptor, you can define the type of a custom property in an @property at-rule.

Removing list styles without affecting semantics.

Some people, I guess primarily developers and not actual users, don’t like the fact that Safari removes list semantics of lists that don’t look like lists (list-style: none). Scott O’Hara provided a fix in “Fixing” Lists, where he suggests setting role="list" explicitly on the list to re-add list semantics.

<ul style="list-style: none" role="list">
  <li>…</li>
</ul>

That works, but I found a way of removing list styles without affecting semantics.

Totally remdom, or How browsers zoom text

Last week, I lied to my students. After I explained how the rem unit worked, I told them that they could compare px and rem by increasing the font size in their mobile browsers and see how it affects text zoom.

Day 104: animation with registered custom properties

All major browsers except Firefox (coming soon!) support the @property at-rule. It enables you to do things you previously couldn't, like animating custom properties.

Day 103: the prefers-reduced-transparency media feature

Design trends like Glassmorphism use translucent backgrounds to create a specific visual effect, resulting in underlying background colors or elements shimmering through the background of the overlaying element. That may be visually appealing, but it can distract some people and impair legibility.

Skip links on ikea.com

I am always pleasantly surprised when I find useful skip links. That's why I decided to collect examples here on my blog.

Mark all as read

I was on the train home from Hamburg when I decided to finally migrate my website from Netlify and 11ty to Kirby on my friend's server. I got most of the work done on the train and made some final changes on Monday.

Web Components Accessibility FAQ

I specialize in HTML and CSS, but I also write JS. Especially in the last year or so, I wrote quite a lot of JavaScript because we decided to port the front end of one of my clients to web components.

When I first learned about web components, I had a lot of questions, especially regarding accessibility. While I found answers to many of them, I didn’t know everything I would’ve wanted to know. I wish I had a catalog of all the essential questions and answers when I started. That’s why I decided to design this post in a Q&A format. I’ll ask a question regarding the accessibility of web components, and then I’ll answer it.

New workshop: Advanced Modern CSS Masterclass

In my newest workshop I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.