Google’s Prompt API 🔗
Mat Marquis on Google pulling the web standards equivalent of U2 album marketing: As a Chrome user, you’ll have received Gemini Nano in the form of a [...]
CSS-Tricks
Posts
Making Zigzag CSS Layouts With a Grid + Transform Trick 🔗
Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm like, say, a zigz [...]
Fixed-Height Cards: More Fragile Than They Look 🔗
Getting a multi-column of cards to line up equally is is a headache we've all faced, and it gets even harder when working with fixed heights. Fixed-He [...]
What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More 🔗
Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing image sou [...]
The Importance of Native Randomness in CSS 🔗
We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one. The Importance of Native R [...]
contrast() 🔗
The contrast() filter function increases or decreases the contrast of an element. contrast() originally handwritten and published with love on CSS-Tri [...]
contrast-color() 🔗
The contrast-color() function takes a <color> and returns either black or white, whichever is the most contrasting color for that value. contrast-colo [...]
Let’s Use the Nonexistent ::nth-letter Selector Now 🔗
My shim might give the powers that be another reason to say native support isn't necessary, or if lots of people use my :nth-letter hack in the wild, [...]
Recreating Apple’s Vision Pro Animation in CSS 🔗
Putting CSS’s more recent scrolling animation capabilities to the test to recreate a complex animation of the Apple Vision Pro headset from Apple's we [...]
Enhancing Astro With a Markdown Component 🔗
I use a Markdown Component for two main reasons: (1) It reduces the amount of markup I need to write, and (2) it converts typographic symbols. Here's [...]
Markdown + Astro = ❤️ 🔗
Although Astro has built-in support for Markdown via .md files, I'd argue that your Markdown experience can be enhanced with MDX. Markdown + Astro = ❤ [...]
What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More 🔗
This issue of What’s !important brings you clip-path jigsaws, a view transitions toolkit, name-only containers, the usual roundup of new, notable web [...]
A Well-Designed JavaScript Module System is Your First Architecture Decision 🔗
Behind every technology, there should be a guide for its use. While JavaScript modules make it easier to write “big” programs, if there are no princip [...]
hypot() 🔗
The hypot() function takes a list of values and returns the square root of the sum of their squares. hypot() originally handwritten and published with [...]
The Radio State Machine 🔗
One of the best-known examples of CSS state management is the checkbox hack. What if we want a component to be in one of three, four, or seven modes? [...]