6 CSS Features I Use on Every Project

The web is always changing, and now that rubbish browsers like Internet Explorer are out of the question, CSS is exploding with new options and features like never before.

With that said, my way of coding CSS has changed a lot over the past few years. Obviously, things like grid and CSS variables have changed it too, but I’m going to talk about some other new features I’ve been using instead.

1. Object-Fit

I’ve had this situation many times over the years. A client sends me a pile of images of different sizes, and wants me to put them into a perfect grid or slider. There were only two options to do this: crop the image with a third-party software (or via a server-side script) or use a background image. Using a background image is an easy solution but you lose something very important by doing that — accessibility!

Screen readers rely on alt-text to tell users what an image is. Background images don’t have alt-text. Yes, you could add a “title” to the background image and that might work but it would be better to use the old fashioned <img> instead.

<div title="This is a bad idea"…