CSS layers resolve another problem with CSS specificity and rule order. as I documented in: Looking forward: CSS Layers and the @layer at-rulehttps://publishing-project.rivendellweb.net/looking-forward-css-layers-and-the-layer-at-rule/ CSS Layers or Cascade Layers are a way to group styles together and then apply them in a specific order. All modern browsers now support cascade layers. The idea behind layers is that you create layers as groups so that all the styles in a layer have the same priority and cascade together. There are three ways to create layers: 1. Using the @layer block at-rule, with styles assigned immediately to it: css @layer base { ......
In the past, we've had to write media queries that check for screen/device width as something like this. This query checks if the screen has a minimum width of 768px css @media min-width: 768px { … } and this query checks if the screen is smaller than 768px css @media max-width: 768px { … } You can also combine tests to determine if the value you're testing is within two values. css @media min-width: 800px and max-width: 1024px { … } The new Media Queries spechttps://www.w3.org/TR/mediaqueries-4/mq-range-context explains the new syntax for media queries using ranges. We can write the media...
This feature is only supported behind a flag in Chromium browsers since version 85 and, as far as I know, there is no polyfill. Do not use this feature in production. The prefers-reduced-data media query detects if the user has requested the web content that consumes less internet traffic via the browser or operating system's data-saver option. Until the introduction of the prefers-reduced-data media query, there was no way to honor the data-saver settings. In a music shop app or in any other application where we have a lot of images representing products, we can ask the browser to remove...
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...
