How to combine your separate CSS files into one using PHP and then compress the CSS with GZIP

compress css with php and 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.

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

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:

  1. It will compress the CSS using GZIP in order to ensure the smallest possible file size
  2. It will set expiration dates for the CSS file so that the user only downloads the CSS file when they first visit your site
  3. It will detect the type of browser that they are using, as well as their operating system
  4. It will automatically load all CSS files that are applicable, including browser specific stylings
  5. 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!

Related Posts
  • Pingback: Four quick and easy ways to make your site load faster | electro kami()

  • sowgnar

    great information!
    only question is that the .php file downloaded is named “style.php” and you reference “styles.php” with the CSS call link and in the article..
    just a typo?

    • http://electrokami.com/author/camsjams/ Cameron

      Good catch sowgnar! That was a typo – it is now fixed and updated.

      Thank you!

  • Pingback: How to know when to upgrade your web server | electro kami()

  • Israel

    so you name all your CSS files under one name? style.css and as longest is inside the folder style.php they would be found? or you do this for each CSS files, if that’s the case how is this combining everything into one file?

    • http://electrokami.com/author/camsjams/ Cameron

      Well you can modify the style.php file on line 14 to include additional files that you may want as part of your site’s “base css”.

      But there are many other modifications that you could try like passing a parameter to the PHP file such as:
      style.php?inc=layout,colors,blog,admin

      and then parse that variable by splitting it by the “,” and those can be used to include additional files.