How @supports Works

CSS has a neat feature that allows us to test if the browser supports a particular property or property:value combination before applying a block of styles — like how a @media query matches when, say, the width of the browser window is narrower than some specified size and then the CSS within it takes effect. In the same spirit, the CSS inside this feature will take effect when the property:value pair being tested is supported in the current browser.

Using CSS Grid the right way

This means that CSS Grid has a pretty high skill floor — a developer needs to learn and internalize lots of new information in order to be effective with it. Once you’re above that skill floor, Grid is an amazing ally in layout creation. Below that skill floor, Grid is an encumbrance. You wonder why you’re bothering to use it at all, since it seems to require lots of additional work for little reward. In this post, I want to help you overcome that skill floor by showing you the most effective ways to leverage the Grid spec.

GitHub's progressively enhanced menu buttons with details/summary

The concept of a "menu" of any kind is often found in profile dropdows. Some websites decide to not use a semantic menu at all, "just" showing a div or list on click and releasing its content into the tab order. And there is GitHub's approach that uses the details and summary element for a menu, making the whole construct work even without JavaScript (in nearly every browser).

Accessible validation of checkbox and radiobutton groups

While we were building our own accessible components library, we found that it is surprisingly difficult to accessibly link validation and additional informative or hint texts to checkbox and radiobutton groups. In this article we will discuss our findings and propose a reliable solution, but first we will start by looking at the standard recommended ARIA method.

Accessibility for Teams

A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow