- Rolands Atvars -

You probably haven’t head of anything with the name of ‘MDRN CSS’. I know that I would be surprised if you had, because thats a PHP class that parses CSS. Why I would be surprised? Because I develop it and I haven’t said anyone about it.

Now – you might ask: “Why would anyone want to have a PHP class that parses CSS?” and that’s a good question, but before I start explaining I have to go into javascript & browsers & css a bit.

So – browsers and CSS. You’ve probably heard of CSS3. It’s basically a new version of CSS that supports awesome new things like rounder corners, box shadows, transitions and so on. The problem is – every browser implements it a bit different (and some doesn’t implement it at all). Lets take rounded corners as an example. Lets say you have a box (div) with dimensions 200x200px and you want this box to have a rounder corners with radius of 20px. Currently you would need to implement it somehow like this:

.box {
  border-radius:20px; /* CSS3 standard */
  -webkit-border-radius:20px; /* for webkit browsers (chrome, safari, ...) */
  -moz-border-radius:20px; /* for mozilla/gecko browsers (fireofox, ...) */
}

So basically you need to set this property for every browser in different way (these properties are called vendor specific properties). That sucks, because it makes it harder to write CSS files and you have to keep track of all the properties for all the browsers. Also you have to change one value in multiple places.

I think that we can come to an agreement that this isn’t cool – isn’t cool at all.

Next – CSS and javascript. Luckily there are some interesting javascript tools that let you get around this. For example eCSStender. This is an awesome JS library that makes valid CSS3 properties into current browsers properties. So in above example you would only need to write:

.box {
  border-radius:20px; /* CSS3 standard */
}

and this library would make it work for almost any browser. Neat isn’t it? By the way – I suggest you read this article: Stop Forking with CSS3. It has a section about eCSStender as well.

OK – still…why to parse CSS with PHP? Well – the answer is pretty simple. Although JS solution is pretty awesome, the downsides are that:

• you need to have javascript enabled (although this isn’t a big issue I think)
• Your server will have more requests, because JS will have to download each CSS file using AJAX after the page is loaded.
• Your web page visitors will experience bigger CPU loads, because JS will have to parse those CSS files. That can make their computers a bit slow, which isn’t an awesome thing.

So – I guess now you can, probably, think of some reasons why parsing CSS file on servers side would be useful. There are some other advantages, but that’s not for this post.

So – basically I’m writing a PHP CSS parser that will allow you to write valid CSS3 stylesheets and this parser will convert them to something…maybe more ugly but also something that will work on all (when I say all, I mean all the good ones) browsers.

Currently I’m just in some experimental state. I’m writing this class so that the the main class just parses the CSS into PHP variables and the actual valid to vendor specific conversions will be done in plugins. In the process the parser will also minimize this CSS file (this can be turned off). Because it’s not smart to parse the CSS file on every request, there will be a simple caching system built in that will allow to store the parsed CSS file into other file (which you would reference in your html).

Currently there is no dedicated page for this project, but I will make it when I think it can be released for some public testing. Actually this site is currently using this parser, so if you look at this sites stylesheet, you will see the output of my parser. (if you remove the ‘modernized-’ part of the stylesheet name you will see the original stylesheet. I made a small and quick WordPress plugin that helps me to do this thing. I will release it when the parsing class is near to something more stable.

My main objective is to finish the parsing class and to create about two plugins as examples and allow the community to create different plugins. We’ll see how it goes.