What’s !important #13: @function, alpha(), CSS Wordle, and More
CSS functions, the alpha() function, Grid Lanes, some things about <dialog> that you might not know, CSS…
offset-path
The offset-path property in CSS defines a movement path for an element to follow during animation. This…
@function
The @function at-rule defines CSS custom functions. These custom functions are reusable blocks of CSS that can…
What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More
What’s !important #12 talks about the old (testing in Safari when you don’t have Safari), the new…
Computing and Displaying Discounted Prices in CSS
CSS math isn’t just about how things look! It can also be used to work out useful…
The Importance of Native Randomness in CSS
Recently, I published a story about the new random functions that have landed in CSS and how…
contrast()
The CSS contrast() filter function increases or decreases the contrast of an element, either making colors pop out more…
Making Complex CSS Shapes Using shape()
Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such…
What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More
For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve…
Abusing Customizable Selects
Web browsers ship new features all the time, but what fun is it if we can’t build…
Spiral Scrollytelling in CSS With sibling-index()
Confession time: I’ve read about the performance benefits of scroll-timeline(), but when I see an impressive JavaScript…
No-Hassle Visual Studio Code Theming: Building an Extension
Years ago, when I read Sarah Drasner’s article on creating a VS Code theme, I silently thought…
Responsive Hexagon Grid Using Modern CSS
Five years ago I published an article on how to create a responsive grid of hexagon shapes….
Thank You (2025 Edition)
If I had to whittle down my favorite thing about CSS-Tricks to one thing — and like…
Creating Scroll-Based Animations in Full view()
The CSS animation-timeline property accepts a view() function which, in turn, returns a timeline of how much…
The Range Syntax Has Come to Container Style Queries and if()
The range syntax isn’t a new thing. We‘re already able to use it with media queries to…
The “Most Hated” CSS Feature: tan()
Last time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed…
Sequential linear() Animation With N Elements
Let’s suppose you have N elements with the same animation that should animate sequentially. The first one,…
CSS Typed Arithmetic
CSS typed arithmetic is genuinely exciting! It opens the door to new kinds of layout composition and…
Is it Time to Un-Sass?
Several weeks ago, I participated in Front End Study Hall. Front End Study Hall is an HTML…
What You Need to Know About CSS Color Interpolation
Color interpolation, loosely speaking, is the process of determining the colors between two color points. It allows…
Should the CSS light-dark() Function Support More Than Light and Dark Values?
One of the newer CSS features that has piqued my interest: the light-dark() function. And I’ve been closely following…
We Might Need Something Between Root and Relative CSS Units for “Base Elements”
CSS provides us with root and relative values. Root values are like rem and rlh — they’re…
Bringing Back Parallax With Scroll-Driven CSS Animations
For a period in the 2010s, parallax was a guaranteed way to make your website “cool”. Indeed,…