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 can reuse it throughout the stylesheet. This is useful as it gives authors a single place to make changes and prevents errors due to typos and not updating a media query exactly the same way everywhere it is used. Naming things is also important. As Adam Argyle points out in No media query variableshttps://web.dev/state-of-css-2022/no-media-query-variables: > Naming things is very important: it can align purpose with...
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 background color with a variable specified in the :root element. We then set the color to be the one that provides the highest contrast with the background color among our choices the color we want to test against and our color choices are separated by the string vs. css .item1 { background-color: var--color1; color: color-contrastvar--color1 vs black, white; } But the colors to use for the text color are...
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 CSS Color Level 4 specification introduces many new color spaces into the CSS world. Some of these, like display-p3, are already supported in Safari while others are just becoming available in Chromium browsers hwb HWBhttps://developer.mozilla.org/en-US/docs/Web/CSS/colorvalue/hwb stands for hue, whiteness, and blackness with an optional fourth value separated by a slash representing alpha transparency. css hwb194 0% 0% / 00c3ff / hwb194 0% 0% / .5 / 00c3ff...
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 I can then query using either xQuery, NoSQL, or SQL databases. The idea: > Create a tool to automatically transcribe interviews and other audio files into an XML database. Then use XQuery to build the metadata for the interviews. These are preliminary notes and ideas, where possible I will try to incorporate code to validate them but it won't be perfect or possible to do...
In a previous post, we looked at the top accessibility issues reported in the WebAIM Million 2022 reporthttps://webaim.org/projects/million/, how to create accessible content, and how to test and repair accessibility errors. In this post, we'll look at different ways and tools to automate detecting accessibility issues rather than evaluating pages one at a time. Finally, we'll look at ways of automating testing in Github repositories using Github Actions. Web-based accessibility testing The easiest way to test if a site has accessibility issues is to run it through a web-based accessibility tool. The simplest one to use is the Axe browser...
The WebAIM Millionhttps://webaim.org/projects/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 we can learn from the report are worth it. In the table below, we see the most common accessibility issues and what percentage of the top one million websites exhibit the issue. | WCAG Failure Type | % of home pages in 2022 | % of home pages in 2021 | % of home pages in 2020 | % of home pages in 2019 |...
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 CSS couldn't do what many designers do: place a single grid over their whole design and constantly align items within it. Using subgrid, the grandchild of a grid can adopt its parents’ columns or rows as its own, and align the parents' rows or columns. If I understand it correctly, it works something like this: The first parent defines the main grid as we normally would. We...
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 Gutenberg plugin so I can compile it and install it on my testing machine. Because there is no branch, I can't just do: bash git checkout -b So I had to research how to get creative in doing this. The first step is to make sure we have all the tags available both to our origin and any upstream repositories. We...
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 adding alternate stylesheets to a site and show an example of how they work in Firefox. How do you write alternate stylesheets and include them on a page? Each alternate stylesheet is a complete and valid stylesheet. From the CSS perspective, there's no syntactic difference between an alternate stylesheet and the primary one. To include the alternate stylesheet in a page, you use the link element as...
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 variables. calc The calc function supports four arithmetic operations: addition +, subtraction -, multiplication , and division /. This will allow you to dynamically calculate the width and height of a container to create responsive layouts. In this example, you can set the margins of an element minus a fixed amount: css div { width: calc80vw - 20px; } min The min function is used to set the...
