How to combine your separate CSS files into one using PHP and then compress the CSS with GZIP
Compress CSS with PHP and GZIP
Are you one of those CSS designers or developers that like to place your separate concerns into different tangible files?
Do you make a “layout.css”, “typography.css”, and “colors.css” file for every website you create?
Do you make different cascading stylesheets for each type of browser or platform that you expect to visit your website?
If you answered yes to any of those questions then take a look at our script here and solve your overwhelming CSS file inclusions by combining them with PHP and compressing them with GZIP!
First, start by calling the CSS file, but notice that we will be using “style.php” as the filename.
[html]
<link rel="stylesheet" type="text/css" href="/css/style.php" />
[/html]
That’s it!
Well no, but you’re basically done! All you need to do now is add your CSS file (which needs to be titled “style.css” in order for the PHP script to find it) into the same folder as the style.php file, and let the script take care of the rest!
This php script will provide a few great benefits:
- It will compress the CSS using GZIP in order to ensure the smallest possible file size
- It will set expiration dates for the CSS file so that the user only downloads the CSS file when they first visit your site
- It will detect the type of browser that they are using, as well as their operating system
- It will automatically load all CSS files that are applicable, including browser specific stylings
- If there is no browser specific stylesheet found, the script will still function – you can add or remove browser specific stuff as you see fit!
So, in other words, when a user comes to your website, they will download a tiny CSS file, have it cached, and will be able to browse a fully optimized site. That means someone with IE7 can have an equal experience as someone with Safari, thanks to fully customized browser CSS – without any hacks!
Download the CSS browser selector and GZIP PHP script
For a live demonstration, check out our very own CSS file, which will add in browser specific CSS, compress, and cache for any platform that you use:
http://electrokami.com/wp-content/themes/ekrev/style.php
Here is the download – have fun and make sure to use it in all of your projects!
Download CSS Combiner with GZIP and browser selector
Support and questions
Questions or suggestions? Tell us all about them below!