If you’re trying to reduce the overall size of your CSS one of the things you can do is to use the shorthand properties. CSS shorthand properties provide a method of combining common properties of a particular styled element into a single statement. Let’s take a look at the CSS shorthand for using backgrounds. CSS …
If you’re trying to reduce the overall size of your CSS one of the things you can do is to use the shorthand properties. CSS shorthand properties provide a method of combining common properties of a particular styled element into a single statement.
Let’s take a look at the CSS shorthand for using backgrounds.
This is how you’re probably used to writing background styles in CSS.
.myelement
{
background-color: #FFF;
background-image:url('/path/to/file.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
As you can see from the snippet above, we’re applying five CSS properties to this element, all of which are to do with the background. Wouldn’t it make sense to group all of these together?
Grouping them together is easily done.
.myelement
{
background: #FFF url('/path/to/file.png')no-repeat center fixed;
}
Using the background shorthand format we’ve combined all five properties into a single ‘background’ property. You’re still able to use it as you like and it will still support the other possible values available in the first example.