5 Clever tips on CSS

The 5 cleverest CSS tips I have collected in the last few months.

Clamp

Perfect for font-size, for example. Replace most of your media-queries for it with that.

What does it do?

Sets a value between lower and upper bounds. It‘s like setting up min/max values and a relative in between.

Open this pen in a new tab and resize the screen horizontally to see it at work.

Emoji as icons

I’ve come across this and used it most as fun experiment. But recently I have used in small standalone side-projects. Where a just wanted to quick and dirty add an icon for visual feedback.

How to do it?

Set your <span> to be transparent, and then use text-shadow to show the silhouette of the icon.

❗️ Remember to add role="img" and an aria-label to the span

Everything can be a list

Every wrapper element can have a counter, and using pseudo-elements (::before, ::after) it’s quite easy to make them like an order list without being restrained by the list-style property. You can also reset the counter at will and start counting from whichever point you want.

❗️ Only recommended in very specific use-cases, always prefer the semantically correct tag. If you do use this technique, be sure to address a11y concerns!

Object Fit

Defines how an image or a video will fit in its container.

What is it good for?

It is extremely useful to preserve aspect-ratio of images on galleries or other kinds of lists.

Play around with the different values it can receive in this pen.

Second Argument of text-decoration

Such a basic well-known property. Though I usually only see it being used with a single value while it actually is a shorthand to 4 others.

• line
• style
• color
• thickness

This pen emphasis the usage of the second argument. Which you can, in fact, combine multiple values such as underline overline. Both are style values but they do not override each other if declared together.

💌

In case you have found this post useful, please consider sharing it with your network, that would help me a lot to continue sharing posts like this and others. 😁

What about you? What’s a clever CSS feature that you like to use or have recently found out about? Let me know in the comments!! 🏆

Cover Photo by davisco on Unsplash