Automatic CSS: The stylizator

20 Jun
2007

The stylizatorWriting CSS is good fun, but analyzing an html document to find how the page is structured us, at the very least, tiring. If you have ever had to write CSS for a blog or CMS template, you already know how time-consuming is to find every ID and CLASS in a large document. We’re going to write a simple script that takes an HTML file as input and gives us two things:

  • First, some CSS and Javascript to generate a visual structure with all the names like the one that can be seen at the top image (and a javascript only version!!).
  • Second, a CSS file without any rules, but with every ID and class in the document.

Let’s go:

The tools

We need to use any scripting language to read the HTML and act accordingly. This time we’re going to use perl, since it’s a simple and powerful language for text managing. It’s available in most operating systems and for windows users, it’s downloadable from http://activestate.com/ .

It should be possible to write in ruby, python, java or any other programming language. Take it as a guideline or, if you just want to use it, grab the code
We’re going to use some CSS and Javascript too. Let’s get wet…

Reading and parsing HTML

First of all, we need an HTML document to be parsed. As I’ll recall later, I used HTML code from csszengarden to try the code.
First thing to do is read the html from a file. The script we’re going starts the following way:

stylizator.1.pl

This first part opens a file, reads it and assign the contents to a variable. Now, we need to find all the id’s present in the file. To do that we could use a full-fledged HTML parser, but since many documents in the real world are not correct and our necessities are quite easy, there’s a simpler solution. So, regular expressions to the rescue.
Regular expressions find patterns in a file. We can tell perl to find things like /\w+/ and it will match alphanumeric characters. Probably to find named elements it should be enough to write:


/id=\"?\w+\"?/i

Where “id=” means exactly that, \”? means a possible quotation mark, (\w+) is a group of letters or numbers, another possible quote and the last “i” tells us to ignore the case of the text. In this particular case, we’re going to use a slightly more complicated expression, to take into acount possible missing quotes and so on:


/id\s*=\s*"?([^"\s>]+)/

Creating the CSS template

We’re going to write an empty CSS file. I like to use a previously written template that includes links to my CSS-reset file and some more files I always use. Then, for every named element, we need a line:


#namedelement{

}

stylizator.2.pl

and every time we find a class, since they are not unique, we need to filter it, creating a hash (associative array) with its name. And then, the same thing we’ve done with the IDs. Some more code:

stylizator.3.pl

With all that code, we already have a CSS template. You could start right now editing it to suit your needs. But we don’t know yet what the structure is. Why don’t we create a new HTML file that shows us how the document is laid? OK. Let’s write some more code

Javascript: The magic

Here is where the fun begins. Probably, I’ll need to wite another post about this piece of code, since there are a couple of sleights of hand, but, briefly, the following piece of code removes all the stylesheets and the inline CSS rules, then takes all the elements in the dom and finds the ones that have an ID, and adds a P element with the ID name to each one.

stylizator.js

As you can see, there are only two functions. The first one, removeSheets(), disables every stylesheet included from the HTML, and then calls the other one, findNamedElements(), This function gets all the elements in the DOM (getElementsByTagName(‘*’)) and iterates over them, doing a couple of things:

  • First, remove inline style elements (allElements[i].style.cssText = ”)
  • For the elements with an ID, some styles are added (a silver box around them)
  • A child P tag with the ID text is created too, giving it a class ’sign’

Then, we create a new stylesheet only for that class. We have to code a different way for Explorer and Firefox/Opera/Others because of compatibility issues.
Last, the function is called with removesheets(). You can even save the code as a bookmarklet and apply it to any website. It’s truly portable.

Now we need some perl code to insert the javascript into the HTML file, just before the </body>: tag.
Update: My pal Félix has just tol me that I need to add an “s” in the javascript substitution, to cope with multi-line javascript. Thanks, Félix

stylizator.4.pl

When you run the full script, another HTML file will be generated, that shows how the document is laid.

Trying it out

The best example I can think of is CSSzengarden, a site where a default layout is given to designers to skin it the better they can. I downloaded the HTML code (CC license, by-nc-sa) and called he script over it:


$> perl stylizator.pl csszengarden.html

And I got a csszengarden CSS file, with all the named tags, and a csszengarden.structure.html file with the visual structure of the site.

csszengarden.html

csszengarden.structure.html

csszengarden.css

Something like this. Click to expand(PNG 239KB):

The code

Download this file, unzip it in the same folder and call it via >perl stylizator.pl yourhtmlfile.html
It’ll create a file named yourhtmlfile.css and another one called yourhtmlfile.structure.html

Further work

There’s so much to be done. It could be possible to create a firefox extension that gives us the same visual result at the press of a button, or a system that keeps only structural CSS, discarding type and colors. The regular expressions could be better, too, to allow not-so-well-defined documents. If you have any further questions, drop me a line to david@corunet.com.

Have fun.

Would like to share? These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Facebook
  • Google Bookmarks
  • Live-MSN
  • Ma.gnolia
  • NewsVine
  • Slashdot
  • Spurl
  • Squidoo
  • TwitThis

5 Responses to Automatic CSS: The stylizator

Avatar

Dave

June 21st, 2007 at 11:16

Firefox Web developer toolbar has the option to do this. Information -> Display ID & Class details. They can also be outlined and other styles can be disabled.

Avatar

david

June 21st, 2007 at 12:24

Hi Dave,
This is easier to modify if you want it to suit your needs, and more flexible to tweak.

Also, it’s compatible with most browsers.

Avatar

utwou

August 25th, 2007 at 14:41

I find it very interesting. As David says, it is your own “stylizator”, so you can do automaticly whatever you want to the code.

Avatar

Tony

January 15th, 2010 at 06:33

Does the stylizator work in batch form? I would like to run a batch of html files through stylizator and have a site-wide master css file with all the class and ids used.

And do I need pearl to run the stylizator. A little more direction would be nice :)

Avatar

David Pardo

January 18th, 2010 at 14:00

Hi Tony,
The easier way is to create a bookmark in your browser with a link like:

href=”javascript:function removeSheets(){if(document.styleSheets){ …”

pasting just after javascript: all the stylizator.js code above.

Then you can call the function from your favorites menu or from one of your toolbars. If you have any trouble, please ask again.

David

Comment Form

top