December 20th, 2010 by Mike Fulton
Categories: Web Design & Programming

I created my first web pages way back in 1994 when the Compuserve information service (CIS) first gave their customers a hosting option.  In mid-1996, my first website glamoursoft.com was born.

The technology for creating web pages back then was pretty basic.  You used a text editor of some kind to hand-code your HTML and then used FTP to post it on your site.  Then you looked at it with your web browser to make sure it looked the way you wanted it to look.  Eventually we got authoring tools like Microsoft FrontPage or Macromedia’s Dreamweaver which made things easier, but there were still certain tasks that were difficult simply because of the limitations of using HTML to do complex layouts and text formatting.

For example, in those early days if you wanted to change the color of a block of text, you would have to surround it by a tag, like this: this text is red.  This wasn’t too bad if you only had to do it once or twice… but imagine having to do it 20 times on a single page, and having 20 pages to worry about.  Search and replace might get the job done in some cases, but not in others.

These limitations were well known and as early as 1994, several proposals for implementing style sheets were submitted to the World Wide Web Consortium (W3C) for consideration.  Style sheets would allow you to define your layout and text formatting separately from the HTML. This ultimately resulted in the CSS Level 1 specification (recommended) being published in December 1996. The W3C’s recommendation for the CSS Level 2 specification came in late 1997, and today’s target is the not-yet-finalized CSS Level 3 specification.

My Own Personal Journey To CSS

I had used little bits and pieces of CSS in my web pages for several years before I made a major effort to embrace it.  Mostly inline styles here and there. I was mostly using the WYSIWYG editor in FrontPage to create my layouts and do most formatting, and in those days FrontPage had very limited support for CSS.  You could hand-code whatever you wanted, but the program didn’t use CSS when generating code and didn’t do much with regards to helping the user create styles or stylesheets.

Microsoft’s FrontPage had a variety of server-side extensions for various things. These were a pre-defined set of CGI handlers for doing specific tasks. This allowed FrontPage to generate code that relied on those extensions to do things that you would otherwise have to hand-code in Perl or PHP or some other server-side programming language.

Ironically, what ultimately got me on the CSS bandwagon was PHP.   Since I was using FrontPage to do everything, the only time I ever needed to worry about server-side code was a few occasions when the basic form-submission handler didn’t do what I needed.  But around 5-6 years ago, I started working on a new website project where I needed to use a database.  I was no stranger to database programming in general, but this was my first time using a database on a website.  After reading about the various options I landed on using MySQL and PHP.

I went shopping for a few books on PHP and MySQL and while I was browsing around I picked up one about CSS.  I think it was an early edition of O’Reilly’s CSS Cookbook. After flipping through the book and a few others, I realized I needed to make a bigger effort to use CSS and this new project seemed like the ideal platform. Since then it’s been CSS full speed ahead and no looking back.

CSS Isn’t Perfect

As I started to use CSS, the one thing I noticed that I was repeating myself a lot. I’d create a style that specified a certain choice of font, and then another, and then another, and each time, I’d have to type out the entire selection. For example:

h2.headline
{
   font-family: Arial, Verdana, Sans-Serif;
}
h3.headline
{
   font-family: Arial, Verdana, Sans-Serif;
}
.normaltext
{
   font-family: Arial, Verdana, Sans-Serif;
}

At first this just seemed like extra typing and since that was largely eliminated by cut and paste, I didn’t worry about it too much. But then came a time when I needed to change those styles so that some things used one font and others used something different. A simple search and replace wouldn’t work because that same font selection was used in other places. I came to realize that what I really wanted was a feature that CSS didn’t have: the ability to create my own constants or variables that could be referenced by the style definitions.

This seemed like such an obvious idea to me that at first I figured it couldn’t possibly be missing. I figured I just hadn’t read about how to do it yet. However, a few web searches later, I realized that this feature just didn’t exist.

While searching, I found a proposal called “CSS Variables” that looks promising. The example below follows the syntax it suggests.

@variables pagefonts {
headlinefont:Arial, Verdana, Sans-Serif;
bodyfont:Times New Roman, Serif
}

h2.headline
{
   font-family: pagefonts.headlinefont;
}
h3.headline
{
   font-family: pagefonts.headlinefont;
}
.normaltext
{
   font-family: pagefonts.bodyfont;
}

Apparently there are a lot of people who think such a feature should be included, but there are also others who are vehemently opposed, including one of the original creators of CSS, Bert Bos, who wrote an essay about why they were a bad idea. Read it for yourself but in my opinion, his arguments come down to “we’ve survived this far without CSS variables so they’re not really necessary” and that they’re “icky”. Those quotes are mine, and by “icky” I mean that they don’t fit in with his grand philosophy of what the web and HTML and CSS are supposed to be about.

It’s ironic and yet not surprising that this essay is presented on a horribly ugly web page. I have to wonder if this guy has ever been involved in any real life web design outside of academia.

Introducing PHP Into the CSS Equation

I know I’m not the first one to come up with this, but I wanted to talk about it anyway. Recently I was working on some custom themes for the WordPress blogging system. I had several instances of what were basically the same theme but with different color schemes and it just got to be a pain to change the colors when needed. These themes might use a total of 6 or 8 colors but there are dozens of places in the style sheet where they are defined. And it’s very easy to have one variation where you want two different places to be the same color while another variation has those in different colors. Basically it’s an ideal example of a situation where having predefined variables would help a lot.

After spending way too much time farting around with changing colors around, I decided that it was time to just dive in and figure out how to do this with PHP. The basics are pretty simple… create a php file, use the header() function to output an HTTP header that says we’re a style sheet, then define our variables. We finish up with our original style sheet, but with references to the PHP variables embedded as needed.

Here’s an example:


header("Content-type: text/css");

// All style definitions are contained in the "bella" object
// This is the name of our WordPress theme and is done
// in order to avoid namespace collisions with other PHP code.
// Don't define EVERYTHING here... just things that get repeated a lot

$bella->backgroundcolor = "#6800b9";
$bella->fonts = "Verdana, Ariel, Helvetica, Tahoma, Sans-Serif";

$bella->tagbar->backgroundcolor = "#723900";
$bella->tagbar->border = "1px solid black";
$bella->tagbar->textcolor = "#DEC9B4";
$bella->tagbar->link = "#DEC9B4";
$bella->tagbar->visitedlink = "#DEC9B4";
$bella->tagbar->hoverlink = "red";

$bella->footer->text = "#DEC9B4";
$bella->footer->link = "#DEC9B4";
$bella->footer->visitedlink = "#DEC9B4";
$bella->footer->hoverlink = "red";

// All style definitions appear as usual below
// References to PHP variables for colors, font names, etc.
// are done by escaping to PHP and outputting the desired variable
?>

div#tagbar
{
background-color: backgroundcolor?>;
text-align: left;
border: none;
padding: 0px;
font-family: fonts?>;
}

I’ve included only one style definition here to keep things short. The original file this is based on has perhaps 60 or 70 styles, and about 40% have references to at least one variable. See how the reference to font-family in the style definition accesses the variable we defined earlier? This might occur a dozen times or more within the remainder of the style definitions.

Also notice that all of our variable definitions in the PHP code at the top are setting properties of the $bella object. This is done mainly to reduce the chance of having a namespace collision with any of the other PHP code that may be used.

Also, for WordPress theme designers, note that even though this file is included as style.php there is still a style.css file contained in the theme because the comment block at the top of the file is used by WordPress to get the information about the theme which is shown on the Dashboard.

Useful, But…

This is a very useful technique but it has its drawbacks. First and perhaps most important is the fact that it requires PHP and server side processing. PHP isn’t available on all web servers. People using a shared hosting service with a Windows-based server may be out of luck. While the basic idea could probably be adapted to other technologies like Active Server Pages, that’s just more work.

And speaking of more work, another drawback is that this requires the server to do more processing to handle the PHP code in our stylesheet. It’s not a LOT of extra work, but that could be an issue for some situations.

Third, since it requires PHP, non-programmer types might have difficulties adopting this technique, or at least be reluctant due to fear of having difficulties.

In Conclusion

I do note that there are a few differences between my implementation of the basic idea and what I’ve seen described elsewhere. In particular the use of a single top-level PHP object to hold all of the definitions is not something I’ve seen elsewhere. I hope someone finds this useful.

Til next time!

Mike

PS. Happy Holidays!