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 over time, and why this native feature is a big deal. One of the first Read more…
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 saturate(), contrast() affects both saturation and lightness, keeping only the color’s hue. .low { filter: contrast(50%); } .normal { filter: contrast(100%); } .high { filter: contrast(200%); Read more…
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, contrast-color() is sort of an accessibility tool for conforming to WCAG contrast requirements. .card { background-color: var(–swatch); color: contrast-color(var(–swatch)); } For example, on the next demo Read more…
“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 killer” reflects how much we all want to strangle CSS at times Someday in the future, CSS Read more…
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, they aren’t always responsive (or, at least, Apple switches to a static image at a certain width). I’ve been wowed by CSS’s more recent scrolling Read more…
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 Astro has built-in support for Markdown via .md files, I’d argue that your Markdown experience can be enhanced Read 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 platform features, and more. Creating a jigsaw puzzle using clip-path CodePen Embed Fallback Amit Sheen demonstrated how to create a full jigsaw puzzle using clip-path. While I doubt Read more…
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 attached to the DOM were prone to overwriting each other and variable name conflicts. With JavaScript modules, you have the Read more…
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 it two arguments: hypot(A, B). Think of it like a way to complete the Pythagorean theorem where we give Read more…
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, depends on data, or has to coordinate multiple moving parts, JavaScript is usually the right tool Read more…
