CSS оптимизатор с визуальным форматированием шаблона

Представляю Вашему вниманию сервис оптимизации и форматирования css кода. Основан он на сверхпопулярном парсере CSSTidy, но от доброй сотни аналогичных проектов мой отличается одной небольшой особенностью – можно визуально создать пользовательский шаблон оптимизации.

Итак, если Вам не подходят 4 предустановленных варианта обработки, выбираем в выпадающем списке «Сжатие» пункт «Ваши настройки». В текстовом блоке ниже находится одно единственное правило css

a {color:red;}

Его можно форматировать при помощи пробелов, знаков табуляции (если включен javascript, Tab сработает прямо в текстовом поле) и переносов строки. Оформление этой инструкции станет шаблоном для всех введенных в блок «Исходный CSS» стилей.

Если допущена ошибка, при попытке оптимизации будет показано сообщение «Неправильный шаблон, загружено стандартное сжатие» и применится стандартный шаблон.

Ниже в текстовом поле можно указать количество строк между правилами. Значение по умолчанию – 0, т.е. пустых строк не будет; -1 заставит оптимизатор начинать новое правило на той строке, где закончилось предыдущее.

Сервис вероятно понравится тем, кто часто сталкивается с «чужой» версткой, и при этом имеет свой стиль оформления css.

Если вам понравилась статья, подписывайтесь на обновления блога по rss или присоединяйтесь в twitter

Поделиться ссылкой с друзьями:

Метки:

Категории: Css

Комментарии (4)

  1. О, отлично! Только хотел спросить, чем он отличается от остальных, потом прочитал все повнимательнее :) Буду пользоваться.

  2. Мужик, спасибо тебе большое за помощь с глюками в моем блоге. Не мог бы ты последний раз зайти на него и сказать, исправило ли до конца ошибку отключение плагина или нет.

  3. Серёжа:

    Всё отлично. Следующим этапом оптимизатора нужно сделать оптимизацию для таблиц работающих с набором спрайтов в одном файле, типа:
    .Sprite .Panel_RT1{float:right;background:url(‘sprite-1.png’) no-repeat -293px -32px;height:6px;width:12px}
    .Sprite .Panel_RT2{float:right;background:url(‘sprite-1.png’) no-repeat -293px -37px;height:14px;width:9px}
    .Sprite .Panel_RT3{float:right;background:url(‘sprite-1.png’) no-repeat -224px -81px;height:7px;width:10px}

  4. Дмитрий:

    Алексей, инструмент хороший. Но есть несколько недочетов. Например, не совсем корректно понимает @media. Удаляет закрывающую фигурную скобку и круглые скобки. Например, в этом случае:

    @media screen and (min-width:600px)
    {
    .header{
    clear:none;
    }
    }

    Так же удаляет одинаковые свойства, что правильно, но иногда плохо. Например в этом случае останется только последнее свойство:
    .nav{
    background-image: -moz-linear-gradient(top, #bbb, #777);
    background-image: -ms-linear-gradient(top, #bbb, #777);
    background-image: -o-linear-gradient(top, #bbb, #777);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#bbb), to(#777));
    background-image: -webkit-linear-gradient(top, #bbb, #777);
    background-image: linear-gradient(top, #bbb, #777);
    }