The color-mix() functional notation takes two values and returns the result of mixing them in a given colorspace by a given amount.| MDN Web Docs
I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries| CSS-Tricks
The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like , and =, that make more sense syntactically while writing less code for responsive web design.| CSS-Tricks
In more recent years, design systems and component libraries have gained popularity. There is also a desire to build once, deploy anywhere. Meaning a component developed in isolation is intended to work in any number of contexts to make building complex interfaces more efficient and consistent. CSS container queries have landed and are now available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement...| Smashing Magazine
Thanks to the wide support of the prefers-reduced-motion-media feature, we now have more advanced ways to design motion that can be creative and innovative while also being safer for those with motion sensitivities.| Smashing Magazine
The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations.| CSS-Tricks
“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface.| CSS-Tricks
CSS Logical Properties and Values aren't quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes. In this article, Rachel Andrew is going to explain how CSS is changing to support writing modes, and in doing so, she’ll clear up some of the things that might confuse you about Flexbox and Grid.| Smashing Magazine
Chrome| caniuse.com
Chrome| caniuse.com
1. Introduction| www.w3.org
Chrome| caniuse.com
CSS Containment Module Level 3| drafts.csswg.org
1. Introduction| drafts.csswg.org
IE| caniuse.com
HSL colors are very powerful when we use them the right way. They can save us time and effort and even help us to explore options for how to apply color to design. In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.| Smashing Magazine
We all have run into CSS collisions and sudden regressions in our codebases when new styles are written or 3rd-party styles are added. This is because of the interdependence of styles due to source order, specificity, and inheritance. Some ways to control the cascade have included methodologies like ITCSS and BEM and other newer native features. Cascade layers will be the ultimate native solution for resolving conflicts between multiple sources of styles. Cascade layers introduce the new at...| Smashing Magazine
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity.| CSS-Tricks