Автоматический генератор предварительного просмотра CSS - иметь CSS-файл, хотите автоматически генерировать HTML для стилей предварительного просмотра

Question

У меня довольно большой файл CSS, разработанный моим веб-дизайнером.

Конечно, в нем есть множество идентификаторов, классов и свойств тегов.Существуют ли какие-либо инструменты для автоматической генерации HTML на основе исходного файла CSS?

Например:

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

#basicInfoHead span{
    float: left;    
}

Будет ли генерироваться

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

и т. Д. Оттуда,Я могу просмотреть сгенерированный код в своем браузере и посмотреть, как будет выглядеть каждый из отдельных (в первую очередь, текстовых) стилей.

Заранее спасибо!

Answer 1

Это не очень подходит для реальной таблицы стилей. Ваш пример достаточно прост (хотя для того, чтобы любой генератор знал, что генерировать, он должен быть div#basicInfoHead), но что, если он станет более сложным? А как насчет элементов, которые определены в разных было для нескольких страниц? Как насчет элементов, которые должны располагаться поверх элемента x, или для которых нужен элемент y, непосредственно следующий за ним, чтобы хорошо выглядеть? Как насчет "неполных" классов, например для серии <table><tr><th>, которая ничего не определяет для tr? А как насчет конкретных правил для комбинированных классов .class1.class2.class3?

В списке таблиц стилей, над которым я работал, нет ни одной, которую можно было бы преобразовать в разумный HTML-код с помощью генератора, подобного тому, который вы ищете. Не уверен, существует ли такой инструмент.

Ваш дизайнер должен предоставить HTML для вас, чтобы протестировать CSS. Это обычный и, насколько я вижу, единственный способ, который действительно имеет смысл.

Answer 2

Вот и мы.Я делаю несколько предположений, которые будут выполнены только потому, что мой дизайнер использует определенный стиль:

1. Все является div
2. Я хочу видеть только стили текста, поэтому я буду игнорироватьвсе, что не похоже на текст

Не самая лучшая вещь, но она работает для большинства моих стилей.Пришлось вручную отредактировать несколько тегов, таких как ul, ol, li, и удалить «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);
    }
}