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

Day 107: the light-dark() color function

The light-dark() color function allows you to define two values for a color property. The property uses the first value when the color scheme is light or unknown and the second when it's dark.

beyond tellerrand: One of my favourite web development and design conferences

People often ask me for recommendations for front-end development conferences. Picking my Top 3 would be challenging, but I know that beyond tellerrand in Germany is one of them.

My CSS wish list 2024

Following last year, I created a CSS wishlist for 2024.

Workshop: Deep Dive on Accessibility Testing

Once again, I’ve teamed up with my friends at Smashing Magazine 😻 to share with you everything I know about web accessibility testing! In this smashing workshop we’ll talk about automatic and manual testing, screen reader basics, Single Page Applications, Dev Tools, and more.

Not all automated testing tools support Shadow DOM in web components

There isn't much more to say; it's all in the title.

Many automated testing tools are a collection of JavaScript functions you run on a page. Most of those rely on querying the DOM. If a tool doesn't consider shadow trees, it only catches accessibility errors in the Light DOM, which may give you a wrong sense of safety and potentially affect your users.

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">

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.