Favorite CSS gems
These are a few of my favourite CSS properties and selectors that I wish more people knew about. This list is more like a personal “note to self”; as I always forget various CSS syntax and properties. And because an image is worth a thousand words, every property is followed by a CodePen example (not all of which are mine). Let’s begin!
box-sizing: border-box
Useful (and used) in almost every responsive layout. It changes the default CSS box model (content-box) to include the element’s content, padding, and border but NOT the margin, inside of the element’s width and height
a + b and a ~ b selectors
‘+’ : Selects all b elements directly after an a element.
‘~’ : Selects all b elements after an a element
The + rule selects all li elements that come directly after p elements, while the ~ rule selects all p elements after elements with the class black.
One of my favorite uses for the + selector is checkbox styling, where you can apply specific rules depending on whether the element is checked or not.
Honorary mention: use the for property of the <label> element to make the label clickable ;)
:before and :after
These pseudo-elements are one of the most useful CSS tricks for any front-end developer, as they can be used to add lines, boxes, checkmarks (see Pen above) in almost every element.
ALMOST.
Unfortunately :before and :after cannot be used on <input> elements, as they don’t have any content to be altered by these pseudo-elements. Also, they cannot be used on <img> elements; they are just not supported by browsers. I learned that the hard way, through a few futile CSS tries and a couple of painful Google searches.
:first-letter
I haven’t used this pseudo-element in any real life projects yet, but it is one of my favorites as it demonstrates the potential of pure CSS. It does exactly what you would imagine, it selects the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). You can change its font, margin, padding, background, color, and a few other CSS properties.
object-fit
Have you ever wanted to fit an image to an area with dimensions different to the image’s, or even with a ratio different to the one of the image? Yeah, me too. Instead of going the CSS background route, you can use object-fit, and its little sister object-position, to use the image to stretch over, cover or fill the area that you want. The following Pen from CSS-tricks explains this much better.
animation-play-state
Pretty self-explanatory: it toggles the state of the animation on or off (running or paused)
animation-direction
Again, does what is says on the tin, controls the direction of the animation. Possible values: normal, reverse, alternate, alternate-reverse
You can see both these animation properties in action below
text-transform
You can use this to make make text CAPITALCASE or lowercase or even capitalize text. Simple, effective and extremely useful.
background-attachment
This controls how the background moves relative to the viewport. It has three possible values: scroll (default), fixed, local.
My favourite out of the three is fixed, as it makes for a straightforward, pure CSS parallax effect.
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
It’s so easy; even W3Schools can do it
transitions
My all-time favourite CSS feature. You can use it for a variety of things, from hover effects to hiding or showing buttons or other elements. Transitions make almost every change seem more natural and beautiful.
That’s all for now!
Please tap or click ♥︎ to help this article reach others ;)
P.S.: I did not include any prefixes or compatibility issues for the above properties on purpose, because I wanted to focus on the CSS properties and not browser quirks! Check https://caniuse.com/ to check the support for various CSS and HTML properties ;)
