CSS Optimisation - Best Blogs Asia

CSS Optimisation

Mar 15th, 2009 Web Development 0 Comment

Some of the easiest optimization techniques include compression of codes whenever possible (like CSS), compression of images for lower sizes (use Photoshop), and reducing the number of http requests and number of objects.

Style Declarations

When creating a site, no matter what the end design ends up being, there are certain standard css declarations that I end up making every time.

* {
margin: 0; padding: 0;
}

body {
padding:0; background:#fff;
} 

form {
padding:0; margin:0;
}

Compressing your CSS

I’d recommend by visiting CleanCSS first or CSSDrive, then trying the following technique in php:

Before

< link rel="stylesheet" type="text/css" media="screen"
href="/style.css"/ >

After

< link rel="stylesheet" type="text/css" media="screen"
href="/style.css.php"/ >

Now to the real part. Open up your style.css.php, or whatever you named it, file and add the following snippet of PHP to the very top:

< ? php if(extension_loaded('zlib')){ob_start('ob_gzhandler');
} header("Content-type: text/css"); ? >

Then, add the next line to the very bottom and save the file.

< ?php if(extension_loaded('zlib')){ob_end_flush();}? >

That’s it! Refresh your site and check it out. Compression rates can be upto 400%!

Print Stylesheet

A print stylesheet is useful, when a user prints a page you can control what should be printed.

In the print.css place the following, on the site you can place any areas which don’t need to be printed with the noprint div tag:

html {
     width:100%
}

body {
    background-color: #fff;
    color: #000;
    font-size: 12pt;
}

a {
    color: #000;
}

img {
    border: 0;
}

.noprint{
    display: none;
}

h1, h2 {
    page-break-before: auto;
}

p {
    page-break-inside: avoid;
}

No related posts.