Automatic CSS Preview Generator - Have css file, want to automatically generate html to preview styles

Question

I have a fairly large CSS file developed by my web designer.

There are, of course, plenty of IDs, classes and tag properties assigned therein. Are there any tools to automatically generate HTML based on a CSS source file?

For example:

#basicInfoHead{
    background:url(../images/leftHeaders.jpg) no-repeat;
    margin-left: 0px;
    width:185px;
    height:28px;
}

#basicInfoHead span{
    float: left;    
}

Would generate

<div id=basicInfoHead><span>#basicInfoHead span</span></div>

Etc etc. From there, I could preview the generated code in my browser, and see what each of the individual (primarily text) styles would look like.

Thanks in advance!

Answer 1

This doesn't sound really applicable to a real world stylesheet. Your example is straightforward enough (even though it would have to be a div#basicInfoHead for any generator to know what to generate) but what if it becomes more complicated? What about elements that get defined in different was for multiple pages? What about elements that need to be on top of element x, or that need an element y directly following to look well? What about "incomplete" classes e.g. for a <table><tr><th> series that doesn't define anything for the tr? What about specific rules for combined classes .class1.class2.class3?

In the list of style sheets I've been working on, there is not one that could be turned into sensible HTML code by a generator like the one you are looking for. Not sure whether a tool like this exists.

Your designer should be delivering HTML for you to test the CSS. That's the usual way and as far as I can see, the only way that really makes sense.

Answer 2

Here we go. I'm making several assumptions that will only hold because my designer uses a certain style:

1. Everything is a div
2. I only want to see text styles, so I'll ignore anything that doesn't seem text-related

Not my best stuff, but it works for the majority of my styles. Had to manually edit a few tags, such as ul, ol, li, and remove 'body'.

#!/usr/bin/perl
use warnings;
use strict;
my $css;

open(FILE, '<', 'styles.css') or die();
while (<FILE>) { $css .= $_; }
close(FILE);

my (@css) = $css =~ m/^([a-zA-Z.#][^\n\r]+{.+?})/gmxs;

my @text_css = grep { /\s(h[1-5]|span|font|color|p|a|ol|ul)\b/ } @css;
foreach my $css(@text_css) {
    my ($selector_text) = $css =~ /^([^{]*){/;
    my (@selector) = split(/[\s{]/,(split(/[\n\r]+/,$selector_text))[0]);
    @selector = grep { !/{/ } @selector;
    my $start_html = '';
    my $middle_html = join(" ",@selector);
    my $end_html = '';
    my $result = '';
    for (my $i=0; $i< scalar(@selector); $i++) {
        $selector[$i] =~ s/:[-\w]+//g;
        if (substr($selector[$i],0,1) eq '#') {
            $selector[$i] =~ s/^#//g;
            $start_html .= qq(<div id="$selector[$i]">);
            $end_html = "</div>" . $end_html;
        }
        elsif (substr($selector[$i],0,1) eq '.') {
            $selector[$i] =~ s/^\.//g;
            $start_html .= qq(<div class="$selector[$i]">);
            $end_html = "</div>" . $end_html;
        } 
        else {
            # we have a tag, possibly with an id/class
            my($tag,$extra,$type);
            if ($selector[$i] =~ m/\./) {
                ($tag,$extra) = split('.', $selector[$i]);
                $extra =~ s/^\.//g;
                $type = 'class';
            }
            elsif ($selector[$i] =~ m/#/) {
                ($tag,$extra) = split('#', $selector[$i]);
                $extra =~ s/^#//g;
                $type = 'id';
            }
            else {
                $tag = $selector[$i];
            }

            if ($extra and $type) {
                $start_html .= qq(<$tag $type="$extra">);
            }
            else {
                $start_html .= qq(<$tag>);
            }
            $end_html = "</$tag>" . $end_html;
        }

        # is this the last one?
        if ($i == scalar(@selector) - 1) {
            $result = $start_html . $middle_html . $end_html;
        }


        print "<div>$result</div>\n" if ($result);
    }
}