Представляю Вашему вниманию сервис оптимизации и форматирования css кода. Основан он на сверхпопулярном парсере CSSTidy, но от доброй сотни аналогичных проектов мой отличается одной небольшой особенностью – можно визуально создать пользовательский шаблон оптимизации.
Итак, если Вам не подходят 4 предустановленных варианта обработки, выбираем в выпадающем списке «Сжатие» пункт «Ваши настройки». В текстовом блоке ниже находится одно единственное правило css
a {color:red;}
Его можно форматировать при помощи пробелов, знаков табуляции (если включен javascript, Tab сработает прямо в текстовом поле) и переносов строки. Оформление этой инструкции станет шаблоном для всех введенных в блок «Исходный CSS» стилей.
Если допущена ошибка, при попытке оптимизации будет показано сообщение «Неправильный шаблон, загружено стандартное сжатие» и применится стандартный шаблон.
Ниже в текстовом поле можно указать количество строк между правилами. Значение по умолчанию – 0, т.е. пустых строк не будет; -1 заставит оптимизатор начинать новое правило на той строке, где закончилось предыдущее.
Сервис вероятно понравится тем, кто часто сталкивается с «чужой» версткой, и при этом имеет свой стиль оформления css.
Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!
Подписаться в telegram
О, отлично! Только хотел спросить, чем он отличается от остальных, потом прочитал все повнимательнее :) Буду пользоваться.
Мужик, спасибо тебе большое за помощь с глюками в моем блоге. Не мог бы ты последний раз зайти на него и сказать, исправило ли до конца ошибку отключение плагина или нет.
Всё отлично. Следующим этапом оптимизатора нужно сделать оптимизацию для таблиц работающих с набором спрайтов в одном файле, типа:
.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}
Алексей, инструмент хороший. Но есть несколько недочетов. Например, не совсем корректно понимает @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);
}