It has been a long while since I posted anything to this blog! Recently I’ve put some time into it, cleaned up the cob-webs and updated the design. Now I just need some juicy content, and first up is CSS!

CSS has come such a long way in the last couple of years and is still evolving. It can take new features a while to get integrated into new browsers though. So you have to wait for them to have enough support to make them safe to use in production on large scale products. Unfortunately, this means we sometimes forget to start using new features, even when the support is in place.

So, to help you stay up to date I have put a little round up of some CSS properties and values that I think will be really useful to add to your daily use in 2024.

Properties

Let’s start the list with some of the properties.

Margin-block & margin-inline

I had seen these properties around for a while but never actually used them until I redesigned this blog. I found them very useful though. The idea is to use the writing mode to figure out the orientation of the element. So margin-block will add margins to the top/bottom of the element and margin-inline applies to the sides. Then if the writing mode changes the values rotate with the element. The block property will always be above and below the text and the inline property will be on the left and right. It’s pretty clever and very useful for those developing for different languages.

My personal favourite use case though is to centre align items! You can utilise margin-inline: auto to position block elements in the centre of the container. You no longer have to set the let and right margins individually or override top and bottom values.

Padding-block & padding-inline

This works the same way as the margin properties but for padding. In my experience, introducing these has been very useful. And you can still mix it in with the original set of properties. For example, if you want equal padding on all 4 sides or if you want to target a specific side of the element.

Block-size & inline-size

Again, very similar to the previous properties - but this time a replacement for width and height. Since this site is only using horizontal left-to-right writing mode, I didn’t use these properties in this project. There are definitely some good use cases for them though. Particularly if you have any transitions that manipulate the orientation of the element.

Inset, inset-block & inset-inline

This one is such a time saver for those absolutely positioned elements! You no longer have to write 4 lines to set top, bottom, left and right to 0. Now you can just use inset which will set all 4 properties in one. And you can actually provide 4 values to it if you want to set different values to each side. The shorthand works the same way as margin or padding and it makes things so much easier. You also have the inset-block and inset-inline properties which work the same way as the other inline and block properties.

Aspect-ratio

This one is not new! But I think it can get forgotten so I wanted to give it a shout out. You no longer need to do padding hacks to make elements keep their aspect ratio on resizing. This can be good for hero components that have background images with some text and need to keep their shape.

Values

Now time to look at some of the values you can start implementing.

Clamp()

This is technically a function but is used as a value so I’m going to put it here. The function clamps the middle value between an upper and lower bound. It’s particularly useful for fluid typography without needing to add media queries. This is the most typical use case, but it can be used as a value for any property so you can get creative with it.

Dvw & dvh units

The vw and vh units are so useful and have become pretty mainstream in CSS. But did you know there are more viewport units? Svw and svh represent small viewport width and height, and lvw and lvh represent large viewport width and height. These take into account the browser interface, with small being the smallest the browser can be and large being the largest.

All the viewport units are useful, but browsers with varying interface sizes tend to be dynamic. For example, on mobile devices the browser can adjust as you scroll. So if you wanted something to be full screen, the other units may not work at all times. This is why dynamic viewport units - dvw and dvh are so useful! They will adjust with the dynamic browser interface and keep things in proportion at all times!

Conclusion

These are just a few of the properties and values that I think will elevate your CSS code. And they are well supported so safe to start using immediately. This is just a small sample of the new CSS features that can elevate your code. I’m going to save some of them for their own dedicated posts though. If you’re interested in reading about that, make sure to check back often for new articles. In the meantime, please sign up for the newsletter to stay up to date. Also, follow along on social media for more frequent updates.

Happy coding 🙂