The 5 cleverest CSS tips I have collected in the last few months.
font-size, for example. Replace most of your media-queries for it with that.
Sets a value between lower and upper bounds. It‘s like setting up
max values and a relative in between.
Open this pen in a new tab and resize the screen horizontally to see it at work.
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.
<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
Every wrapper element can have a counter, and using pseudo-elements (
::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!
Defines how an image or a video will fit in its container.
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.
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.
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