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

У меня есть довольно большой файл 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>

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

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


css automation xhtml
person Marcel Chastain    schedule 23.05.2010    source источник
comment
CSS должен быть более конкретным, чтобы сделать это, то есть div#basicInfoHead, а не просто #basicInfoHead. Будет довольно сложно понять, что должно и что не должно содержать фиктивный текст, как вы думаете?   -  person Dr. Frankenstein    schedule 24.05.2010

Ответы (3)


arrow_upward
2
arrow_downward

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

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

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

person Pekka    schedule 23.05.2010
comment
Истинный. Мне приходится делать много предположений о том, как мой дизайнер оформляет вещи, которые на самом деле неприменимы к сайтам других людей. А пока ковыряю перл - пожелайте мне удачи =) - person Marcel Chastain; 24.05.2010

arrow_upward
2
arrow_downward

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

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

Не лучший мой материал, но он работает для большинства моих стилей. Пришлось вручную отредактировать несколько тегов, таких как ul, ol, li, и удалить «тело».

#!/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);
    }
}
person Marcel Chastain    schedule 23.05.2010

arrow_upward
0
arrow_downward

Генератор предварительного просмотра CSS на основе Python: https://github.com/glowinthedark/css_stylesheet_preview_generator.

Зависит от cssutils (установить с pip3 install cssutils).

Использование:

python3 css_preview_generator.py mystyle.css > preview.html
person ccpizza    schedule 05.06.2020