New and Upcoming CSS: @custom-media
Of all the new features the one I've been researching is @custom-media. Custom media queries allow you to create, in essence, create variables in CSS where we associate a name with a media query and...
Testing color contrast in CSS: the color-contrast() function
The color-contrast() CSS function checks the contrast between two colors, usually a background color and black or white text. At its simplest, color-contrast() works like this: We first set up a...
New color features in CSS
There are a lot of interesting color features in CSS that are either under development, have recently been implemented in browsers, or are in development in one or more browsers. New color spaces...
Interview database using xQuery and web technologies
I'm starting to work with interviews. I would like to be able to get the audio transcribed to text and then store the text and the metadata about the interview in a no-SQL/non-relational database that...
Automating accessibility testing
In a previous post, we looked at the top accessibility issues reported in the WebAIM Million 2022 report, how to create accessible content, and how to test and repair accessibility errors. In this...
Accessibility: the problem and how to fix it
The WebAIM Million report presents a sad state of where the top one million websites on the web from an accessibility perspective. Even if you're not working on a top one million website, the lessons...
Learning subgrid
Before subgrid became available, a grid inside of another grid couldn't align itself to its parent cells or grid lines. Each grid layout was unique and independent from its parents. This means that...
Checking out a tag from a git repo
There are times when I need to check out a specific tag from a repository. I do this often enough that I chose to document the process. A concrete example: I need to get the latest revision of the...
Alternate Stylesheets: still a thing?
Alternate stylesheets provide a mechanism for defining additional stylesheets that the user can select to apply to the site they are visiting, usually via the View menu. In this post, we'll talk about...
Using CSS math functions
CSS provides four mathematical expression functions: calc(), min(), max(), and clamp(). We'll take look at each one in some detail and we'll also talk about how we can use them in CSS...