Very short trick: Conditional CSS and optimization

The use of conditions within the browser is often used to decide which style sheet to load depending on the type of browser. For example we can use this code to load a particular style sheet when the browser is Internet Explorer 6:

1
2
3
4
5

<! - Upload this style sheet for all browsers ->
"stylesheet" href = "foglio_style.css" type = "text/css" / > < link rel = "stylesheet" href = "foglio_style.css" type = "text / css" />
<!--[ If IE 6]>
<link rel="stylesheet" href="foglio_style_ie.css" type="text/css" />
<! [Endif] ->

An alternative to this approach (which generates at least two HTTP requests) would be to act on the class or id of the tag body :

1 2	<!--[ If IE 6]> <body class="ie6"> <! [Endif] -> > <!--<![endif]--> <!--[ If! IE ]>--> < body > <!--<![ endif] ->

In this way we could add CSS for different browsers in a single file and route definitions based on the class or id assigned to the body ! For example:

1 2	: #000 } p {color: # 000} color : #f00 } /* solo su IE 6 / body. ie6 p {color: # f00} / only on IE 6 * /

Obviously this procedure is useful and advantageous when the code "alternative" is to a certain size ...

Optimization of style sheets

Lastly, a great online tool for formatting and compressing CSS: CSS Formatter and Optimiser . Based on the engine CSSTidy (also available in downloadable version of php ), was impressive in its diversity and excellent file compression. The algorithm, in fact, not only to eliminate the "head" or the last ";" (semicolon), but optimizes the syntax of the color (# ff9900 to # f90), the signs of pixels (0px at 0), as well as perform a number of useful controls to detect typing errors.