CSS-only Custom Range Slider with Motion
@property + counters + anchoring + scroll-driven animations = 😍
Domain: bram.us
Misconceptions about CSS Specificity
To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS.
What if you had real control over Dark Mode on a per-site basis?
Dark Mode Toggle Buttons should be a browser feature.
CSS Foundations: What is IACVT?
Learn all about “Invalid At Computed Value Time” or IACVT for short.
Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
If you create a scroll-driven animation, check for overflow: hidden elements up the DOM tree and change them to overflow: clip.
Scroll-Driven Animations: Style an element based on the scroll direction & speed
Combine Scroll-Driven Animations with @property, transition-delay, calc(), sign() and abs() … and you can do Scroll Detection using only CSS!
The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
A function that computes to the first color if the used color scheme is light or unknown, or to the second color if the used color scheme is dark.
A quick introduction to CSS @scope
Have you heard about CSS @scope? It’s an upcoming way to scope the reach of your CSS selectors.
Faking a :snapped selector with Scroll-Driven Animations
(Ab)using Scroll-Driven Animations to apply styles on elements that are snapped within their scroll-snapping enabled ancestor scroller.
Rearrange / Animate CSS Grid Layouts with the View Transition API
Animate elements in a grid layout as new items are added, items change size, etc.
Using :is() in complex selectors selects more than you might initially think
Because selector matching in browsers happens from right to left, you might end up with more matches than you expected when using :is().
Sibling Scopes in CSS, thanks to :has()
Leverage CSS :has() to select all siblings between two element boundaries.
A :nth-child(An+B [of S]?) polyfill thanks to CSS :has()
The :has() selector is way more than just a “parent selector”…
Upgrading colors to HD on the web
Let’s take a look at how we can progressively enhance the color experience on the web, accessing color spaces such as display-p3.
Dark Mode Toggles Should be a Browser Feature
When implementing Dark Mode and ways to toggle it, developers currently need to duplicate code and roll their own toggle implementation.
The Future of CSS: CSS Toggles
CSS toggles are a mechanism for associating toggleable state with a DOM element.
The CSS :has() selector is way more than a “Parent Selector”
Safari TP 137 just dropped with unflagged support for :has(). Often dubbed “the parent selector”, :has() is way more than that…
CSS in 2022
With 2021 coming to an end, let’s take a look at which CSS language features we can expect to land in browsers in 2022.
The Future of CSS: Cascade Layers (CSS @layer)
When authoring CSS we have to carefully think about source code order, selector specificity, and the use of !important.