This year again, we aggregated a ton of data from developers across the world that really highlights the changes that the CSS world is going through right now. And while we encourage you to check out the full results, we also wanted to compile this quick overview of a few major trends.
I redesigned the site! I can never think about the word redesign without also thinking about realigning, from Cameron Moll’s seminal article. I did not start from nothing. This design wasn’t a blank design canvas and empty code editor thing. I doubt any future redesign will be either. I started with what we already had and pushed some things around. But I pushed so much around, touching almost every single file, that it’s worthy of drawing a line and saying this is v18.
While working with the team at DEV this past quarter on their open source community platform, Forem, they requested I review a Pull Request for accessibility on GitHub that introduced a new Chrome-only CSS feature: content-visibility. I’d missed the announcement of this feature months earlier by Chrome advocates, so my first step was to read up on it to understand the potential accessibility impact.
Shadows occupy a strange place in the CSS box model. They have no effect on an element’s width and height, and are readily clipped if overflow on a parent (or grandparent) element is hidden. Now that some of the CSS Houdini specifications are being implemented in browsers, there are tantalizing new options to work around this. The CSS Paint API, for example, allows developers to generate images programmatically at run time. Let’s look at how we can use this to paint a complex shadow within a border image.
In this post I’ll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I’ll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel.