A | A | A login
Tools To Make Your Life Easier

Download (version 2.9)

dynamic_css_2_9.zip zip format (213kb)

Requirements

Link to this page

Copy and paste the following into your HTML:

Creates this link:

Dynamic CSS with automatic compression

Dynamic CSS

What can it do for me?

This library will allow you to:

Speed up your web site

This library compresses your CSS files automatically and sends the file to your browser using Gzip (if your browser supports it).

The CSS file for this web site decreased from 11237 bytes to 2006 bytes. That's less than 1/5 the original size!

This library also adds a 1 year expiration header to the CSS file. This prevents the same file being requested over and over again.

Do you have multiple CSS files that you combine using @import or multiple <link>s? Use the @include command instead and combine your CSS files on the server.

Fix PNG handling automatically

The PNG image format and it's support of alpha transparency and lossless compression make for stunning graphics. The problem is older browsers don't support it and IE6 requires a filter added to your CSS file to support it.

This library detects PNG images in your CSS file and, depending on the requesting browser, can add the filter or switch to a GIF or PNG8 image automatically. It will create the GIF or PNG8 image if it doesn't exist.

Program logic in your CSS file(s).

CSS is a great way to keep your presentation out of your content (HTML). Wouldn't it be nice to be able to be able to make global color or back ground changes for example? With this library you can!

Just set variables at the top of your CSS file like:

set $color = #33CCFF;
set $background-color = #000000;
 

Now everywhere you use these colors, just use the variables instead:

p {
    color: $color;
    background-color: $background-color;
}
 

To change the colors throughout your entire CSS file, you only need to change the variables at the top now.

What if your web site has different themes? Use conditional logic to either switch between different blocks of CSS:

.body {
     if ( $_COOKIE['theme'] == 'bluesky' )
         color: #3366FF;
     else
         color: #000000;
     endif
}
 

or include a theme based CSS file conditionally:

.body {
    if ( $_COOKIE['theme'] == 'bluesky' )
         @include 'bluesky-theme.css';
     else
         @include 'default-theme.css';
     endif
}
 

 

The best part is it's free!

The code is distributed under the LGPL license. Just leave the copyright notice at the top and you can use it as much as you want with no restrictions.

The documentation is included in the download. Please feel free to send me comments or suggestions through the Contact form.

Download zip format dynamic_css_2_9.zip (213kb)

Requirements

Share:
Digg
Del.icio.us
Reddit
blog comments powered by Disqus
Copyright © 2007-2014 Neighbor Webmaster