Corunet. El Blog » css http://blog.corunet.com Web development, usability and more Fri, 23 Oct 2009 15:33:27 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Automatic CSS: The stylizator http://blog.corunet.com/automatic-css-the-stylizator/ http://blog.corunet.com/automatic-css-the-stylizator/#comments Wed, 20 Jun 2007 20:15:15 +0000 David Pardo http://blog.corunet.com/english/automatic-css-the-stylizator 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.

]]> http://blog.corunet.com/automatic-css-the-stylizator/feed/ 5 Three column layout with full page height http://blog.corunet.com/three-column-layout-with-full-page-height/ http://blog.corunet.com/three-column-layout-with-full-page-height/#comments Thu, 14 Jun 2007 19:36:56 +0000 David Pardo http://blog.corunet.com/english/three-column-layout-with-full-page-height The final result

Sometimes I wish I could do things that were easily done with table-based layouts but quite hard using just CSS.
Following a couple of posts in a CSS related Spanish mailing list (Ovillo), a guy called Zafonic showed me how to use negative margins and positive paddings to make equal sized columns. With a couple javascript functions, I patched it to fill the full browser window. Let’s see how…
Update: Error in code solved. Thanks to the testers

The problem

We’re going to write a three-column plus footer layout that covers all the browser space. The requisites are the following:

  • The three columns will have different background colors
  • We’re not going to use background images (so, no faux-columns)
  • We want the page to cover the full height of the browser. So, the footer will be at the bottom of the screen.
  • The layout has to degrade gracefully for javascript disabled browsers
  • All the code has to be valid and accesible

The beginning

The first part is simple. We need some html that defines three columns and a footer. Lets wrap the three columns within a div (called, by the way, container) and call the three columns col1, col2 and col3. The html code will be something like:

body.html

We need to give the columns a width and float them to the left. The css would be:

first.css

So, we already have a three column layout, but each column has a diferent height and the footer is far from the bottom:

first version

Negative margins to the rescue

As I already told you, I had’t heard about creating layouts using negative margins (I should have read this article from A List Apart some time ago). In a nutshell, it says that you can use a large negative margin and the opposite positive padding to “make room for the columns”. I recommend to read it if you haven’t, it’s very useful.
So, let’s go on the code. We’re going to add a -5000 pixel margin-bottom and a 5000 pixel padding-bottom to each column:

second.css

This way we get same height columns. This looks much better:

second version

but we don’t have 100% height yet. Internet explorer supports 100% height but all the other browsers don’t. So, we’ll need to use javascript to solve it:

Filling the screen – Here comes Javascript

The first thing we need is to find the height of the browser window. I use a small javascript function that takes into account the diferent behaviours of the different browsers:

height.js

This function returns the height of the browser window. It does one thing and does it well… Using this new knokledge, we can set the height of the columns, making them the browser’s window height minus the footer, to fill the screen completely. The other function we’ll need is:

fill.js

This function works by calling the last one (windowHeight) and substracting the footer size. If we’re in Explorer, we use style.height to modify the height of the columns and in all other browsers, minHeight, since Explorer doesn’t support that attribute. We’re going to call that function via onload.
And we get this:

third version

If the window is not tall enough to fit the column height, the page behaves normally:

small screen

The full code

Putting all together, this is what we get:

3.html

If you use it in a production environment, it’d be wise to split the javascript and the CSS into their own files, and review all the code, since it’s done in a quick and dirty way.

You can download the code using this link. People without javascript don’t get the full height but the site is equally usable and visually pleasant. I you have any further questions or just want to talk, drop me a line to david@corunet.com

]]> http://blog.corunet.com/three-column-layout-with-full-page-height/feed/ 3