Author your own CSS Specification

It sounds unrealistic, right? But, you really can author your own CSS Specification, one that all browsers will support immediately. There are moments in every web developers life where we say to ourselves, "why isn't that capability supported? It's a no brainer!". With a little ingenuity and some coding chops, we can create a CSS specification all of our own.

As an example, one thing that has always bothered me about CSS is that it only goes one "block-level" deep. That is to say, you can do something like this:

#box1 span { font-size: 1em; }
#box1 p { font-size: 1.25em; }

But, you can't do this:

#box1 {
  span { font-size: 1em; }
  p { font-size: 1.25em; }
}

But, I really want to! What if I modified the CSS syntax a bit, so a "parent block" could be more easily picked out by a CSS parser. Let's say we wrap a parent element identifier in brackets:

[#box1] {
  span { font-size: 1em; }
  p { font-size: 1.25em; line-height: 1.5em; }
  a { color: #456; }
}

That would be a dream come true for me! It's easy to understand, and it's a great shorthand for what otherwise might look like a 100 character long directive to change one style. How can I use this notation, and force browsers to understand it? I can't control the client-side, but I CAN control what happens on my server. Remember that the browser doesn't care what it receives as a CSS file. You can send it an actual CSS file from the server, or one dynamically generated by a server-side language, such as PHP.

<link rel="stylesheet" href="/src/css/default.css" />


and

<link rel="stylesheet" href="/src/css/default.css.php" />


are both identical in the eyes of the web browser, as long as default.css.php has a content-type of text/css.

Okay, so how does that help me. I can use PHP to generate a CSS file, but that really isn't any different from using a static CSS file. That is, unless I use PHP to "bridge the gap" between my own CSS specification and the one that browsers understand.

Your default.css.php can load the default.css file (which uses your own CSS Spec), then parse it and output standards-compliant CSS:

<?php

?>

You might be thinking that this would be a lot of "processing" to take place on each page load. But, if you make proper use of HTTP caching, it only needs to be done once per user session.

My example above is only one of many possibilities when it comes to authoring your own specification. You could, for example, create a more "human language syntax":

h3 + p { }   could be   h3 [next sibling] p

a[href startswith 'http']   could take the place of   a[href^='http']

Clearly, the possibilities are endless. But, more importantly, it's a great way show off to your colleagues, "I created my own CSS specification."