Published in CSS on Tuesday, August 31st, 2004
Many of us break up our CSS based on functionality and create multiple style sheets. A little PHP can clean up the delivery of these stylesheets.
Updated on 01/09/2004.
While working the CSS for a design today, something occurred to me. Since we've been looking at using php with our css, many possibilities open up. These of course assume that you are passing your CSS to the PHP script handler...
Note that I am using PHP and Apache here.
I'd hinted at this before (and read about it on Webmasterworld, I believe). Put your comments in as PHP comments in your CSS. When parsed, the comments aren't delivered. Bandwidth saved, and you can comment to your hearts content.
Many people, myself included, like to split up their CSS into multiple stylsheets based on function, and import these more complex sheets from a basic stylesheet. This keeps things happy and tidy for us coders, but isn't the most optimal in terms of downoading or effective use of requests and packets.
In addition to being poorly optimized, Opera users (is this exclusive to us?) will notice that the browser applies the CSS as it is downloaded, in plain view of day. So for sites that work with multiple sheets, each sheet gets applied as it is downloaded. Makes for some interesting browsing, but I for one don't really like it.
A simple answer that will optimize the use of multiple stylesheets is to use your PHP to stick the sheets together before downloading. In that way they go down as one sheet. Keep your sheets separate and manageable when it comes to developing, but all together as one piece for efficient downloading.
You need to first tell the server to parse your CSS document with PHP's script handler. This can be done by placing an .htaccess file in your CSS diretory with the following:
AddHandler application/x-httpd-php .css php_value default_mimetype "text/css"
The first line tells it to send your CSS document to PHP, and the second line ensures that the correct mime type is sent for the parsed document.
Thanks to Matt for clearing up a potential problem here. If you don't have your CSS in it's own directory, skip the second line from above and add
header('Content-type: text/css'); as the first line in the PHP provided below.
In order to join you stylesheets together, you could simply have a stylesheet called "stitched.css", for example, that would contain the following:
<?php include("layout.css"); include("navigation.css"); include("colors.css"); include("hacks.css"); ?>
The result from this is one css document named "stitched.css" that contains all of the contents of the indicated css files.
The next step would be to include "stitched.css" somewhere so that the rules are applied. Many people use something like
@import url(/c/somesheet.css); in their basic stylesheet to call other sheets. That will do here, but now you only have to import one sheet, your combined sheet.
I haven't heavily toyed with this yet, but it seems like a good idea. When doing this, I would keep in mind some of the things noted while exploring gzipping css, namely the caching issues; be sure and 'manually' deal with the caching.
We'll be testing this out and report back here...
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..