testing content.php

Different ways to optimize CSS

CSS optimization is very important for every website. But question is how to optimize the CSS. We probably write the CSS with old fashion. We write every properties in new line & not using the shorthand coding of CSS.

Use Shorthand Properties

The most commonly used properties are the font family of properties. With the font shorthand property you can turn this complete declaration:

p {       font-style: italic;
     font-variant: small-caps;
     font-weight: bold;
     font-size: .85em;
     line-height: 1.2em;
     font-family: arial, helvetica, sans-serif;

Into this:

p {font: italic small-caps bold .85em/1.2 arial,helvetica,sans-serif;}

In most cases you’d specify just the size and face, like this:

p{font:.85em arial,helvetica,sans-serif;}

Padding and Margin Shorthand Properties

Instead of specifying up to four longhand padding or margin values, you can use the padding and margin shorthand properties. So instead of this:

div { padding-top:.9em; padding-right:2em; padding-bottom:1em; padding-left:2em; }

You can do this:

div{padding: .9em 2em;} /* padding: top/bottom right/left */

Border Shorthand Properties

The border properties have eight shorthand properties (border-style/width/color, border-top/right/bottom/left and border). The most powerful is the border shorthand property which you can use when all sides of your element have the same values. So instead of this:

div { border-top: thin solid red; border-right: thin solid red; border-bottom: thin solid red; border-left: thin solid red; }

You can do this to create a thin red line:

div{border:thin solid red;}

You can use border properties in combination to null out each other to save space and create effects. For example:

div { border:1px solid black; border-top:0; border-right:0; }

This abbreviated supported by all major browsers.