Чистим CSS.

[swetlana]

Казалось бы, сервисов по форматированию и чистке CSS — хоть отбавляй.

однако мне для недавних проектов потребовался такой сервис, но ни один из найденных не справился. Все портили css, убивая свойства, которые им казались незнакомыми, а то ещё что похуже вытворяя.

Пришлось писать свой: http://swetlanabayer.ru/cssclean/

Главное требование, которое к нему предъявлялось изначально — чтобы не портил стили.

С парой моих проектов парсер справился успешно. Теперь прошу широкую общественность всё-таки найти в нём ошибки, подловить его на некорректной обработке css.

[rediskavet]

Я иногда для 6-7 стили вот так прячу

color: black;
//color: red;
padding: 25px;

Когда парсер переделает это в одну строку, то padding тоже не будет спрятан от нормальных браузеров.

Edited March 20, 2011 by rediskavet

[swetlana]

но это получается искажение синтаксиса css.

И тем не менее: какие есть предложения? Как должен повести себя парсер, встретив такую конструкцию?

[rediskavet]

но это получается искажение синтаксиса css.

И тем не менее: какие есть предложения? Как должен повести себя парсер, встретив такую конструкцию?

Перенести строку. После правила //

div{float:left;border: 1px solid red;//color: black;
width: 100%;margin-bottom:23px;

Edited March 20, 2011 by rediskavet

[wildhind]

Работает хорошо, ошибок не замечено, но было бы неплохо сделать ещё загрузку файла css по url и сортировку правил.

[psywalker]

Косяк. Пишу вот так

@media {padding: 10px;}

выдаёт хрень без последней закрытой скобки

Да, и ещё хотелось бы, чтобы:

1. Он показывал мне вес, ДО и После оптимизации

2. Чтобы после оптимизации мне давалась ссылка на скачивание нового файла.

3. Когда я загружаю файл, с кнопки "Обзор", то хорошо бы тада срузу в ТекстАрию загружался код с этих стилей. И была бы кнопочка чистки импута у кнопки "Обзор" и кнопка очистки ТексАрии.

p.s. А что значит "Лёгкая оптимизация"? Вроде не заметил отличий.

[swetlana]

Макс, насчёт @media ты знал

И я знаю.

Это будет следующее, что я сделаю. Поскольку хоть и редко, но встречается.

[psywalker]

Макс, насчёт @media ты знал

И я знаю.

Это будет следующее, что я сделаю. Поскольку хоть и редко, но встречается.

Свет, изменил немножно пожелания наверху.

[swetlana]

p.s. А что значит "Лёгкая оптимизация"? Вроде не заметил отличий.

Дело в том, что здесь производится не оптимизация относительно изначального файла как таковая, а форматирование согласно правилам.

Исходный файл в любом случае раздербанивается по косточкам, а потом собирается заново.

И существуют правила, согласно которым и происходит этот сбор обратно.

Теоретически нет ограничений по форматированию выходного файла. Его можно сделать как угодно.

Просто в самом первом варианте сделаны три распространённых варианта.

и каждый из этих вариантов должен выдавать результат в определённом формате независимо от того, что он получил на входе.

Перенести строку. После правила //

пожалуй, имеет смысл сделать обработку частных случаев? И это как раз один из них.

Только вот не скажется ли это на производительности?

…было бы неплохо сделать ещё загрузку файла css по url и сортировку правил.

загрузка по url может уже завтра будет, а насчёт сортировки правил — не знаю. Имеет ли смысл?

Иногда это бывает вредно. Например для кроссбраузерности.

[psywalker]

пожалуй, имеет смысл сделать обработку частных случаев? И это как раз один из них.

Только вот не скажется ли это на производительности?

А что поделать. Ошибки будет выходить дороже.

[swetlana]

Да, и ещё хотелось бы, чтобы:

1. Он показывал мне вес, ДО и После оптимизации

2. Чтобы после оптимизации мне давалась ссылка на скачивание нового файла.

3. Когда я загружаю файл, с кнопки "Обзор", то хорошо бы тада срузу в ТекстАрию загружался код с этих стилей. И была бы кнопочка чистки импута у кнопки "Обзор" и кнопка очистки ТексАрии.

это уже наведение красоты.

Сейчас главное, чтобы работало.

[psywalker]

это уже наведение красоты.

Сейчас главное, чтобы работало.

Согласен. Это на будущее

[wildhind]

И всё-таки с комментариями не всё гладко. Конечно уже нет такого безобразия, как вчера, но иногда они нарушают красоту кода на выходе, например если одно свойство закомментировать. Это наверно потому что они не всегда выделяются в отдельные элементы.

[swetlana]

была у меня мысль комментарии резать безальтернативно…

[rash]

Поставил себе задачу сломать этот парсер валидным CSS3. Получилось. Стили суровые, да.

@import url('reset.css');
@import "layout.css";

@media screen {
    body {
        font-size: 110%;
    }
    img {
       border: 1px solid red; 
    }
    img[alt] {
        border: 1px solid green;
    }
    ul[class='It\'s\{true\}'] li:nth-child(odd)::before {
        content: '\2014 It\'s odd list\
                  item';
    }
    ul[class='It\'s\{true\}'] li:nth-child(even)::before {
        content: '\2014 It\'s even list\
                  item';
    }
}

А исходник парсера никак нельзя будет увидеть? Просто у меня сейчас есть родственная задача, не сжатие, но разбор CSS все равно требуется. Пока что моя реализация слишком проста, и, например, медиа-правила там только что появились (еще плохо обрабатываются), а комменрариев нет вообще

P.S.: Ух ты, оказывается парсер, который подсвечивает код, не сломался на этих стилях С другой стороны нет гарантии, что он разбирал их именно как CSS.

[swetlana]

rash, у меня тоже весьма проста реализация.

Увидеть можно. Контакты у меня в профиле есть.

медиа-правила у меня пока что не обрабатываются вообще никак, это следующее на очереди. Может уже сегодня вечером будет.

Но в приведённом примере я вижу ещё пару мест, об которые моя реализация может споткнуться.

Спасибо, кстати. Очень ценный пример. Сохраню его себе за один из образцов.