CSS properties worth remembering
Tuesday, June 4th, 2013 | Limited, Programming
A lot has changed since I wrote my first line of CSS – which is probably going on a decade ago now. Other things have been there all along, but have sometimes been overlooked or neglected. Below is a collection of CSS that it is easy to forget exists.
Selectors
Obviously you can use . # * etc, but there are actually far more options. As well as chaining them (p, div) and specifying them being inside each other (p div) you can also specify they must be the parent (p > div) or immediately after one another (p+div).
As well as checking attributes (input[type=text]) you can also do contains (input[title~=something]) and starting with (input[type|=something]).
We’re probably all familiar with :visited and :hover states, but there are actually dozens you can use – :focus, :first-letter, :first-line, :first-of-type, :last-of-type, :only-child, :empty, :enabled and “checked just to name a few.
Sizing in rem
It’s good practice to use em sizing to make everything relative – that way if a user scales up the page then everything stays in proportion (though modern browsers tend to handle this well anyway). But isn’t it annoying that it stacks? A 2em value inside a 2em value will give you a font size of 4.
You can solve this by using rem. Specifying 2rem will make it 2 x the root (html) element of the document – so you can make it all relevant to that and not worry about nesting.
Gradients
You can add gradients as backgrounds and even create complex patterns with multiple colours starting and stopping at different points.
background-image: linear-gradient(bottom, #22E7D2 12%, #3EFFFC 56%, #2FAB24 100%);
Shadows
It’s simple to add a drop shadow to an element.
box-shadow: 10px 10px 5px #888;
You can add it to text as well.
text-shadow: 2px 2px #ff0000;
Box sizing
Tired of having to work out what width you want something to be, then taking off the padding and the border? Sometimes maybe you don’t even have the option to do that because you want it to be 100% wide. Box sizing to the rescue. Set the box sizing to border and it will calculate the width factoring these properties in.
box-sizing: border-box;
Border radius
Want some nice rounded corners? Easy.
border-radius: 5px;
border-top-left-radius: 3px;
border-bottom-right-radius: 10px;
Clipping
You probably shouldn’t clip as it means you’re sending an image to the browser that is too big and then cutting it down. However, the functionality to do it does exist within CSS>
position:absolute;
clip:rect(0px,70px,100px,0px);
There is a background-clip property too.
Columns
Want to present your text in a series of columns? Theres a property for that.
column-count: 3;
column-gap: 5px;
A lot has changed since I wrote my first line of CSS – which is probably going on a decade ago now. Other things have been there all along, but have sometimes been overlooked or neglected. Below is a collection of CSS that it is easy to forget exists.
Selectors
Obviously you can use . # * etc, but there are actually far more options. As well as chaining them (p, div) and specifying them being inside each other (p div) you can also specify they must be the parent (p > div) or immediately after one another (p+div).
As well as checking attributes (input[type=text]) you can also do contains (input[title~=something]) and starting with (input[type|=something]).
We’re probably all familiar with :visited and :hover states, but there are actually dozens you can use – :focus, :first-letter, :first-line, :first-of-type, :last-of-type, :only-child, :empty, :enabled and “checked just to name a few.
Sizing in rem
It’s good practice to use em sizing to make everything relative – that way if a user scales up the page then everything stays in proportion (though modern browsers tend to handle this well anyway). But isn’t it annoying that it stacks? A 2em value inside a 2em value will give you a font size of 4.
You can solve this by using rem. Specifying 2rem will make it 2 x the root (html) element of the document – so you can make it all relevant to that and not worry about nesting.
Gradients
You can add gradients as backgrounds and even create complex patterns with multiple colours starting and stopping at different points.
background-image: linear-gradient(bottom, #22E7D2 12%, #3EFFFC 56%, #2FAB24 100%);
Shadows
It’s simple to add a drop shadow to an element.
box-shadow: 10px 10px 5px #888;
You can add it to text as well.
text-shadow: 2px 2px #ff0000;
Box sizing
Tired of having to work out what width you want something to be, then taking off the padding and the border? Sometimes maybe you don’t even have the option to do that because you want it to be 100% wide. Box sizing to the rescue. Set the box sizing to border and it will calculate the width factoring these properties in.
box-sizing: border-box;
Border radius
Want some nice rounded corners? Easy.
border-radius: 5px; border-top-left-radius: 3px; border-bottom-right-radius: 10px;
Clipping
You probably shouldn’t clip as it means you’re sending an image to the browser that is too big and then cutting it down. However, the functionality to do it does exist within CSS>
position:absolute; clip:rect(0px,70px,100px,0px);
There is a background-clip property too.
Columns
Want to present your text in a series of columns? Theres a property for that.
column-count: 3; column-gap: 5px;