Tag Archives: css-class

CSSParser release

Posted by on April 10, 2011 No comments

So… I haven’t really been doing any work at all on the CSSParser(my own CSS Tidy project for reading and compressing CSS) I started on a couple of months ago. What happened is what always happens with my own projects. After I’ve implemented the initial idea, I start to loose interest.
But I’ve made it further with this CSSParser than I usually do, so I’ve decided to release the source code for the project. Not every function will be well documented but I’ve tried to comment as much as possible.

Download it here.

I’ll do a quick explanation of how the process, just to give an idea of how it all works.

  1. The CSSParser class reads a given CSS, using a single preg_match_all call.
  2. Now then class will start to build up an array of CSSSelector classes. This class will hold all the properties and identifiers of a CSS selector from the given CSS.
  3. Each property of the CSSSelector will be held in a CSSProperty class or a class extended the CSSProperty like CSSBorder and CSSBox. This way it’s easy to add more specific output on properties, simply by extending the CSSProperty class and making your own property class.
  4. Now all the data is structured in the CSSParser class. And by calling the printCSS() function with a CSSOut class as the argument, we can get the CSS out the way we want.

When printing the CSS a very primitive templating system is used, where the template simply is PHP that has access to the list of selectors after they’ve been run through a preProcess function optimizing the data for output.
An example can be the template1.php file (found in the downloadable zip):

1
2
3
4
5
6
7
8
9
10
11

<?php
foreach ($data as $selector) {
    echo implode(",\n", $selector->identifier);
    echo " {\n";
    foreach ($selector->properties as $property) {
        foreach ($property->getProperty($settings) as $key => $value) {
            echo "\t$key: $value;\n";
        }
    }
    echo "}\n";
}?>

Read more »

Checking for a value

Posted by on December 19, 2010 No comments

Reasoning behind the bench

I’ve been working a bit on my CSSParser (which I will rename to CSSReader og CSSHandler when I get around to it), and one thing I found out was, when reading shorthand values (like: border: 1px solid #00ffff;) you can’t assume they always come in the same order.
If we take a border property as an example:

.something {
  border-right: 1px dashed #00ff00;
  border-left: dashed 1px rgb(255,0,0);
  border-top blue solid 1px;
}

This shows that the border shorthand value can have a different order of subvalues, and the actual value data can change alot (notice the 3 different ways of defining a color, the rgb() still cause me a bit of trouble). So to set an array (mapped with [‘width’], [‘style’] and [‘color’]) I can’t just split the string and set it, I need to split the string and then try to guess every value. To guess the values I’ll be running through the following process: Read more »

Starting up my CSS Minify project

Posted by on October 19, 2010 1 comment

This is just a status update on my CSS Minify project, I will make more updates as I progress through the project. It’s basically a journal of my thoughts and design process, so if anything strikes you please do comment with some feedback.

So I started working on a way to minify my CSS files. I know (or well I found out, just after I started working on my own project) that there’s a well written and very functional CSSTidy which does exactly what I want to do. I will anyhow still continue my own project, mostly for the learning process, but also because it’s been a long time since I’ve had a project of my own and I miss that.
My initial thought was to parse the CSS using regular expressions, but the lexical approach CSSTidy uses caught my eye.
I’ve decided to start out parsing with the regular expressions. I will eventually try to copycat the CSSTidy way, just to get a better understanding of lexical analysis, and having CSSTidy as a result sheet.

So far I’ve made the parser, and it seems to work on proper CSS I will need to test it up against some messy CSS.
I had my CSSParser class, with a $selectors array holding all the selectors (my CSSSelector classes). The CSSSelector class had a similar $properties array, holding all the properties (CSSProperties class) for the selector.
This seemed a bit overkill, the arrays were both using a key being the selector/property name and a value being the class, the class it self just being a class with a value property. So I will remove the 2(selector and property) classes, and just use a simpler array structure.
I do however still like the idea of having the selector and property classes, it fits nicely into the whole CSS principal. I’ve been planing to use them when it comes to outputting the CSS again, but in that case why not just use them to start with … I’m torn.