CSSTricks
Tailwind’s @apply Feature is Better Than it Sounds | CSS-Tricks
By this point, it’s not a secret to most people that I like Tailwind. But, unknown to many people (who often jump to conclusions when you mention Tailwind), I don’t like vanilla Tailwind. In fact, I find most of it horrible and I shall refrain from saying further unkind words about it. But I recognize…
A New “Web” Readiness Report | CSS-Tricks
The beauty of research is finding yourself on a completely unrelated topic mere minutes from opening your browser. It happened to me while writing an Almanac entry on @namespace, an at-rule that we probably won’t ever use and is often regarded as a legacy piece of CSS. Maybe that’s why there wasn’t a lot of…
Automated Visual Regression Testing With Playwright | CSS-Tricks
Comparing visual artifacts can be a powerful, if fickle, approach to automated testing. Playwright makes this seem simple for websites, but the details might take a little finessing. Recent downtime prompted me to scratch an itch that had been plaguing me for a while: The style sheet of a website I maintain has grown just…
Case Study: Combining Cutting-Edge CSS Features Into a “Course Navigation” Component | CSS-Tricks
I came across this awesome article navigator by Jhey Tompkins: CodePen Embed Fallback It solved a UX problem I was facing on a project, so I’ve adapted it to the needs of an online course — a “course navigator” if you will — and built upon it. And today I’m going to pick it apart…
Styling Counters in CSS | CSS-Tricks
The system descriptor The symbols or additive-symbols descriptors define the characters used for the counter style, while system says how to use them. The valid system values are: cyclic alphabetic symbolic additive fixed extends cyclic will go through the characters set on symbols and repeat them. We can use just one character in the symbols to mimic a bullet list: @counter-style cyclic-example { system: cyclic; symbols: “⏵”;…
Powering Search With Astro Actions and Fuse.js | CSS-Tricks
Static sites are wonderful. I’m a big fan. They also have their issues. Namely, static sites either are purely static or the frameworks that generate them completely lose out on true static generation when you just dip your toes in the direction of server routes. Astro has been watching the front-end ecosystem and is trying…
Grouping Selection List Items Together With CSS Grid | CSS-Tricks
Grouping selected items is a design choice often employed to help users quickly grasp which items are selected and unselected. For instance, checked-off items move up the list in to-do lists, allowing users to focus on the remaining tasks when they revisit the list. We’ll design a UI that follows a similar grouping pattern. Instead…
Using & Styling The Details Element | CSS-Tricks
You can find the element all over the web these days. We were excited about it when it first dropped and toyed with using it as a menu back in 2019 (but probably don’t) among many other experiments. John Rhea made an entire game that combines with the Popover API! Now that we’re 5+ years…
Working With Multiple CSS Anchors And Popovers Inside The WordPress Loop | CSS-Tricks
I know, super niche, but it could be any loop, really. The challenge is having multiple tooltips on the same page that make use of the Popover API for toggling goodness and CSS Anchor Positioning for attaching a tooltip to its respective anchor element. There’s plenty of moving pieces when working with popovers: A popover…
Typecasting And Viewport Transitions In CSS With Tan(atan2()) | CSS-Tricks
We’ve been able to get the length of the viewport in CSS since… checks notes… 2013! Surprisingly, that was more than a decade ago. Getting the viewport width is as easy these days as easy as writing 100vw, but what does that translate to, say, in pixels? What about the other properties, like those that take a percentage,…