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.
What does it do?
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.
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?
<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
Everything can be a list
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.
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
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.
How about you?
What’s a clever CSS tip you recently found out about or use it often? Tweet about it and let me know!