If you thought 2024 was packed with amazing new CSS, well, you’re right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.
This Part 1 (of a 2-part series) is a practical, hands-on, applicable approach to database indexes. We’ll cover what B Trees are with a focus on deeply understanding, and internalizing how they store data on disk, and how your database uses them to speed up queries. This will set us up nicely for part 2, […]
This time we’re looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.
A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.
If the #hash in the URL matches the ID of an element *inside* a
(Only Safari Technical Preview!)
Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.
All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here’s where those controls are located and another nice tool.
We shouldn’t rely on colour alone to indicate that something is interactive.
Then goes on to show how links should be underlined, but that the default underline can be a little intense, and essentially shows how to chill them out. Exactly like we showed! I still think it’s a great balance.
I feel like most usage of global CSS custom property use has the author putting them into a :root selector like:
:root {
--brand-color: red;
}Code language: CSS (css)This is just a PSA that you… don’t have to. It’s not required. It has nothing to do with custom properties. It’s just a selector. It happens to select the html element on a website, except for with extra specificity that I’d wager isn’t typically useful. I think the earliest code samples of them in the spec did it that way for whatever reason, and it stuck as a weird niche cultural artifact.
If you know a bit about the popover API in HTML, you might know it’s basically 1) click a button 2) toggle visibility of another element. Una has a great article explaining that there is a bit more to it.
First, there are actually three kinds of popovers. There is the normal kind, which close when you click away (or ESC). If you don’t want that, there is the “manual” kind which requires very explicit closing and lives an isolated life, not affecting other popups. The new kind, “hint”, is an in-betweener where it can be opened without closing other normal popups, yet retains the light dismissal properties.
Second, it doesn’t have to be a click to open a popover. You could bind whatever you want in JavaScript naturally, but with a new interestfor attribute (and CSS friends) you can cause a trigger on essentially a hover (with a mouse) or focus (with a keyboard). All experimental stuff, but ✨cool✨.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.