spool

I came across Kitty Giraudel’s folded corners technique. It leverages CSS clip-path, and I thought that that was such a cool way to do it. clip-path has been trending lately, most likely because web b

My mum loved logic because she was born at a time when nothing made sense. She was born in 1945, the year World War II ended, so she dodged a literal bullet because we are Jewish. But from the first d

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 4GB transfer recently; no permission asked or

Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm — a layout where items cascade diagonally, like water flowing down

Fixed-height cards often feel like a safe choice. A designer hands you a mockup where every card aligns perfectly in a grid. The titles are short, the excerpts fit neatly, and the layout looks stable

Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing img srcs using content, and more. This is What’s !important

Recently, I published a story about the new random functions that have landed in CSS and how they work. In this article, we’ll explore the challenges of randomness in CSS, how the concept has evolved

The CSS contrast() filter function increases or decreases the contrast of an element, either making colors pop out more or dulling them to gray. Unlike other filter functions like brightness() or satu

The CSS contrast-color() function takes a <color> value (as well as a variable) and returns either black or white, whichever is the most contrasting color for that value. In other words, contra

“I think I’m done with reality.” — The Seventh Circle by Architects We’ve all, at some point, had the thought that CSS sucks. Indeed, the overhyped buzz around the new pretext.js library as a “CSS

Apple’s product animations, particularly the scrolly teardowns (technical term), have always been inspiring. But these bleeding-edge animations have always used JavaScript and other technologies. Plus

There are two ways to enhance Markdown in an Astro project: Through MDX Through a Markdown Component This article focuses on the Markdown Component. Why Use a Markdown Component I

Markdown is a great invention that lets us write less markup. It also handles typographical matters like converting straight apostrophes (') to opening or closing quotes (' or ') for us. Although A

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 platform features, and more. Creating a jig

Writing large programs in JavaScript without modules would be pretty difficult. Imagine you only have the global scope to work with. This was the situation in JavaScript before modules. Scripts attach

The hypot() function takes a list of values and returns the square root of the sum of their squares. .hypotenuse { width: hypot(30vmin, 40vmin); /* 50vmin */ } Most of the time, we’ll pass

Managing state in CSS is not exactly the most obvious thing in the world, and to be honest, it is not always the best choice either. If an interaction carries business logic, needs persistence, depend

View transitions are really, really neat. Not only that, but they’re starting to pop up everywhere. I’m sure you’re like me and have come across more than a few in the wild that both make you go wow a

A date range selector lets users pick a time frame between a start and end date, which is useful in booking trips, sorting info by date blocks, picking time slots, and planning schedules. Example p

The CSS saturate() function increases or decreases an element’s color saturation level, or in other words, the intensity of the element’s color. The saturate() is used alongside the filter or backdrop

The CSS justify-self property aligns an individual element, overriding its parent container’s justify-items value. .container { display: grid; grid-template-columns: 2fr 1fr; justify-item

Every now and then, I stumble onto an old project of mine, or worse, someone else’s, and I’m reminded just how chaotic CSS can get over time. In most of these cases, the !important keyword seems to be

Multi-column layouts have not been used to their full potential, mostly because once content exceeded a limit, multi-column would force a horizontal scroll. It’s unintuitive and a UX no-no, especially

Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task

A lot has happened in CSS in the last few years, but there’s nothing we needed less than the upcoming Olfactive API. Now, I know what you’re going to say, expanding the web in a more immersive way is

April Fools’ Day pranks on the web imply that we’re not trying to fool each other every day in web design anyway. Indeed, one of my favorite comments I received on an article was, “I can’t believe my

Short n’ sweet but ever so neat, this issue covers light/dark favicons, @mixin, anchor-interpolated morphing, object-view-box, new web features, and more. SVG favicons that respect the color sch

I deployed a contact form that last month that, in my opinion, was well executed. It had all the right semantics, seamless validation, and great keyboard support. You know, all of the features you’d w

I’m really interested in this emerging idea that the future of web design is Generative UI Design. We see hints of this already in products, like Figma Sites, that tout being able to create websites o

Over the last few years, there’s been a lot of talk about and experimentation with scroll-driven animations. It’s a very shiny feature for sure, and as soon as it’s supported in Firefox (without a fla

Editor’s note: Mat Marquis and Andy Bell have released JavaScript for Everyone, an online course offered exclusively at Piccalilli. This post is an excerpt from the course taken specifically from a ch

For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve missed and new CSS that you don’t want to miss. This includes random(), random-item(), folded corners using

When I talk about layouts, I’m referring to how you place items on a page. The CSS properties that are widely used here include: display — often grid or flex nowadays margin padding width

Web browsers ship new features all the time, but what fun is it if we can’t build silly and fun things with them? In this article, let’s go over a few demos that I’ve made by using the new customiz

The z-index property is one of the most important tools any UI developer has at their disposal, as it allows you to control the stacking order of elements on a webpage. Modals, toasts, popups, dropdow

Temani Afif recently did this exercise and I thought I’d build off of it. Some of these are useful. Many of them are not. There’s a bird at the end! html html { /* I mean, duh */ } :root

Choosing between Popover API and Dialog API is difficult because they seem to do the same job, but they don’t! After a bit lots of research, I discovered that the Popover API and Dialog API are wil

Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten y

TL;DR: We can center absolute-positioned elements in three lines of CSS. And it works on all browsers! .element { position: absolute; place-self: center; inset: 0; } Why? Well, that needs

Ok, take a deep breath. We’ll have some fun understanding this vulnerability once you make sure your browser isn’t affected, using the table below. Chromium-based browserAm I safe?Google Chr

You’re surely no stranger to bookmarks. The ability to favorite, save, or “bookmark” web pages has been a staple browser feature for decades. Browsers don’t just let you bookmark web pages, though. Yo

I got this interesting question in an SVG workshop: “What is the performance difference between an SVG loader and simply rotating an image for a loader?” The choice between Scalable Vector Graphics

Just before we wrapped up 2025, I saw this proposal for :near(), a pseudo-class that would match if the pointer were to go near the element. By how much? Well, that would depend on the value of the <l

Here’s a really quick tip. You can think of Tailwind utilities as components — because you can literally make a card “component” out of Tailwind utilities. @utility card { border: 1px solid black

Confession time: I’ve read about the performance benefits of scroll-timeline(), but when I see an impressive JavaScript scrollytelling site like this one, it makes me question if the performance of ol

Interop 2026 is formally a thing. So, you know all of those wild, new CSS features we’re always poking at but always putting under a “lack of browser support” caveat? The Big Three — Blink (Chrome/Edg

This issue of What’s !important is dedicated to our friends in the UK (aka me), who are currently experiencing a very miserable 43-day rain streak. Presenting: the five most interesting things to read

In the previous article, we built the classic hexagon grid. It was a responsive implementation without the use of media queries. The challenge was to improve a five-year old approach using modern CSS.

You have an element with a configurable background color, and you’d like to calculate whether the foreground text should be light or dark. Seems easy enough, especially knowing how mindful we ought to

Speaking of charts… When was the last time you had to use a pie chart? If you are one of those people who have to give presentations right and left, then congratulations! You are both in my personal h