Dirty tricks in CSS are very useful; where would YouTube players be without using
padding–bottom: 56.25% to create a 16:9 ratio? I assembled a list of my favourite dirty tricks for you!
This one gets me a lot of dirty looks, but that doesn't mean it's wrong.
If you add items that vary in width in a row with a (quite large) gap in between it can be very hard to determine when those items won't fit on the same row anymore, using a margin on only one side can also mess with centered items or make items break too soon.
margin: 0 -2rem;
margin: 10px 2rem 0; // ensures a 4rem gap between items
I've talked about this in a previous article, because pseudo elements like
::before on an anchor tag (
<a>) inherit the click-ability of its parent you can use it to extend the clickable area of a link.
Make sure you add
position: relative on the element you want to use as reference for the clickable area.
In the following example I used
position: relative to the entire
position: absolute to the pseudo element with either
bottom set to
width: 100%; height: 100%;
Some developers would add an anchor link around the entire list item, this is really annoying to people using screen readers. It's also annoying to style, because you'd have to set the
color property to overwrite standard link behaviour on all text.
This trick works on buttons as well🤓
Writing mode is a css property used to set the writing direction. This is of course meant for languages that have a different writing direction than left to right, it's also very useful to style text that has been rotated 90deg.
When you use
transform to rotate text 90deg
padding-left will appear on the top of the element (which is probably what you would expect) but the container also gets a weird width; see the codepen below when you click on the texts. You won't get this with
writing-mode: vertical-lr;. The big downside of using writing mode instead of transforms is that you can't animate the rotation between two writing modes.
For some reason when you use percentages for
padding-bottom they are not based on the
height of the element but the
width. This is very useful in styling YouTube embeds since you probably want it to take up 100% of the available width, but you can't always be exactly sure how wide that space is. Using
height: 56.25% (16/9) won't work, but adding
padding-bottom: 56.25% will!