CSSO (CSS Optimizer) — структурная минимизация CSS

[@kuber]

В IE 8.0 не работает.

Он может что-то большее чем:
www.codebeautifier.com

[@skryzhanovsky]

Спасибо, разберёмся.

Может. Вот пример.
Вход:

.test0 {
    color: green;
    margin: 0
}

.break {
    color: red
}

.test1 {
    color: green;
    margin: 0
}

CSSO (я отформатировал для чтения):

.test0, .test1 {
    color: green;
    margin: 0
}

.break {
    color: red
}

.test1 {
    margin: 0
}

Code Beatifier (убил порядок селекторов, получили другой CSS):

.break {
    color:red;
}

.test0,.test1 {
    color:green;
    margin:0;
}

Если выключать сортировку селекторов, структурной минимизации не происходит, это беда минимизаторов на основе CSSTidy.

[@kuber]

Зачем Вы лукавите? Ваш результат тоже изменил CSS.
Например: Тест

Какого цвета был Тест, а какого стал после преобразования?

[@skryzhanovsky]

Я сейчас проверил результат работы исходного CSS и результат работы CSS после CSSO. Идентичный. Что именно подразумеваете под «изменил CSS» и как проверили?

[@kuber]

Ниже пример. Хабраредактор съел и оставил только слово «Тест»

[@kuber]

Выше читать так:
Например:

[@kuber]

Да что ж мне так не везет!
Вот что хотел привести в качестве примера:

[@skryzhanovsky]

А. Нет, я не лукавлю, я ошибаюсь. Есть разница. Спасибо.

[@Serator]

Глупый он у вас какой-то получился. Сломался на первом же примере:

a [title="1px"]{color:red;}

И что за мода пошла выкладывать на показ бетки… Вы сделайте нормальный, рабочий продукт и показывайте тогда.

[@skryzhanovsky]

Спасибо, исправим.

[@Serator]

С другой стороны возможно вы и правы. Если на выходе сделаете достойный продукт, то бета имела место быть. Успехов вам.

+

p{
font-family:Palatino,serif;
font:italic 700 large Arial,serif;
}

font тоже можно было бы сжать.

[@skryzhanovsky]

Мы будем очень стараться сделать достойный продукт, честное слово.
Спасибо.

[@kizu]

Если бы все всегда ждали того момента когда будет «нормальный, рабочий продукт», мы бы с вами ещё с деревьев не спустились и прыгали по лианам :)

[@hacenator]

А как он относится к использованию хаков в css?

[@skryzhanovsky]

Смотря каких. :) Например?

[@hacenator]

Так всевозможные IE'шные хаки.
«Underscore hack» и подобные, «Box model hack», «Child selector hack».
Хаки для версий типа IE5, можно опустить, думаю это уже не столь актуально.

[@ChemAli]

Ужал с 59 до 38 Кб. Неплохо.

[@kuber]

А www.codebeautifier.com при настройке «All Optimisation»?

[@Serator]

a [title="1px"]{width:-moz-calc(1px + 1px);color:hsla(0,0%,100%,.5)}

выдал:

Optimised number: Changed "-moz-calc(1px+1px)" to «0»

С чего бы это…

[@Ewg]

HabraCSS
codebeautifier: Input: 118.001KB, Output:81.682KB, Compression Ratio: 30.8%(-36319 Bytes)
CSSO: 84,1KB

[@skryzhanovsky]

А порядок селекторов при этом не слетел?

[@kuber]

Выше мы видели как и у Вас произошло «недорозумение» с CSS.

[@skryzhanovsky]

Так я исправлю. :) В этом и смысл выкладывать анонсы даже бета-стадий. Чем раньше отловят ошибки, тем раньше они исправятся, да и заинтересованные люди подтянутся. Толпой и батьку бить легче.

[@kuber]

Надеюсь в плане гибкости настроек тоже будут улучшения! А то сейчас по сути настроек вообще нет.

[@skryzhanovsky]

Улучшения будут везде, где они не будут противоречить разуму и будут полезны пользователю. Всё не угадать, потому вот вас сейчас спрошу: каких настроек не хватает? Что бы лично вам оказалось полезным в повседневной практике?

[@ambientos]

Интересно было бы получать на выходе некую статистику по тому, что же произошло в процессе работы скрипта. Например, сколько пересекающихся селекторов, где в них пересекались стили и т.п. Такое возможно?

[@ChemAli]

Output:40.182KB, Compression Ratio: 35.3%(-21964 Bytes)
Тоже неплохо.

[@alexbeep]

Попробовал на нескольких своих, больше 13% не вышло — можно порадоваться за себя, что пока что такие штуковины мне не нужны

[@skryzhanovsky]

Почему не нужны? Почему бы не улучшать то, что можно улучшить, пусть даже это мелочи?

[@alexbeep]

Я так думаю, 13% — это НДС на более красиво читаемый код

[@skryzhanovsky]

М… А на каком этапе его читать будут? Человек, который зашёл на страницу и браузер которого скачал стили?

[@crwin]

А серверный вариант будет, к примеру на пэхэпэ?

[@deepsweet]

текущий вариант написан на js и отлично работает как на клиенте, так и на сервере через node.js.

[@skryzhanovsky]

Нашими силами — вряд ли. Но код очень простой технически, его можно без боли мигрировать на многие языки. Это open source, всё в руках энтузиастов.

[@skryzhanovsky]

Уточню: серверный вариант — уже. PHP — чьё-нибудь будущее. :)

[@crwin]

Поэтому и уточнил, в частности интересуют другие языки, нежели node.js

[@Sytrus]

Никогда не верстал в столбик.

[@Sytrus]

Минусяторы верстают в столбик? :)

[@Sytrus]

В сравнении с www.codebeautifier.com в вашем интерфейсе вообще не понял оптимизировалось чего или нет, строки склеились, а процент сжатия не показывает. Баг? FF4.

[@skryzhanovsky]

Починил.

[@Sytrus]

Спасибо.

[@ferrari]

Покажите цифры в процентах, помнится фанател оптимизацией на проекте, где ставили жесткие требования по нагрузке — пришел к выводу, что обработка форматирования css — самое неэффективное из всего возможного, оставил оригинальные не обработанные файлы.
а по сравнению с отдачей в gzip выигрыш был еще менее заметен (буквально пару килобайт на 1500 строк css).

[@skryzhanovsky]

Покажем при выходе из beta в production. Сейчас нет ряда минимизаций, зато есть баги. Любая метрика сейчас будет отличаться от будущих результатов.
Эта пара килобайт играет в зависимости от нагрузки и от количества людей, использующих минимизацию. Если у страницы один посетитель в час, да ещё всё кешируется, минимизация — копейки. Если счёт на сотни тысяч, если минимизация не у одного проекта, а у всей Земли (допустим), числа становятся заметно интереснее.
Наконец, если что-то можно сделать лучше хоть на копейку, почему бы не сделать.

[@TeXHaPb]

Как-то на anekdot.ru начинающий разработчик выложил несжатый скрипт календаря. Всего +15кб. Но на главной странице. За сутки это вылилось в несколько гигов лишнего трафика.

[@Methos]

Чем он лучше CssTidy?

[@skryzhanovsky]

CSSTidy или не минимизирует структуру или гробит порядок селекторов. Цель CSSO — минимизировать структуру И не гробить порядок селекторов.
Наконец, CSSTidy хуже тем, что его никто (насколько знаю) не поддерживает, а на носу уже куски CSS3 со своей спецификой.

[@Methos]

Дело в том, что CssTidy замечательно работает, вёрстку не разрушает. Порядок селекторов — вроде там есть настройки управления этим.

Экономить байты, сжимая — бессмысленно. Намного больше в процентном соотношении сожмётся при удалении переносов строки и пробелов, да и gzip хорошо сожмёт тоже.

[@skryzhanovsky]

Я промахнулся и ответил ниже. Посмотрите, пожалуйста.

[@skryzhanovsky]

Давайте на всего одном примере: что вы будете делать, когда в полный рост поднимутся CSS3 media queries? Предлагаю проверить вот такое:

@media screen and (min-width: 400px) and (max-width: 700px) { a { color:red } }

[@Prophet]

Данный подход даст выигрыш далеко не всегда.

Проверил, прогнал сжатый YUICompressor'ом css-файл с рабочего проекта (весил 65783 байт). После структурной оптимизации он стал весить 64124, итого 1659 байт экономии (2,5%).

Но если учесть, что css гзипуется, то вместо выигрыша, теряем сотню байт: 11833 байта против 11941.
Файлы с примерами

[@skryzhanovsky]

Вы правы, не всегда. В данном случае потеряли. В другом можем выиграть. Мне кажется, универсального решения здесь не существует, разве что специально оптимизировать текст под алгоритмы сжатия, но это как-то… Но пример хороший, спасибо.

[@Prophet]

Без gzip использовать минификацию css не выгодно, пруфлинк.

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

[@nobr]

Начало хорошее, не забрасывайте.

Хочу ещё дать один пример:

.class
{
    border-top:1px solid #000;
    border-right:2px dashed #111;
    border-bottom:3px dotted #222;
    border-left:4px double #333;
}

…можно оптимизировать до:

.class
{
    border-width:1px 2px 3px 4px;
    border-style:solid dashed dotted double;
    border-color:#000 #111 #222 #333;
}

…и соответственно ещё уменьшить, если некоторые размеры, стили или цвета совпадают. Например:

.class
{
    border-top:1px solid #000;
    border-right:2px solid #111;
    border-bottom:1px solid #222;
    border-left:2px solid #111;
}

…можно оптимизировать до:

.class
{
    border-width:1px 2px;
    border-style:solid;
    border-color:#000 #111 #222;
}

[@skryzhanovsky]

Не забросим. :)
Да, border в ближнем TODO.

[@Rekrut]

Так на вскидку пример не может прийти в голову, но мне кажется, что группировка селекторов в ряде случаев будет гробить верстку. По этому в ряде случаев этот процесс сложно автоматизировать. К тому же при gzip разница вообще будет будет мизерной.

И еще, порой (когда длинна селектора превосходит длину перемещаемого свойства) группировка увеличивает объем, а не уменьшает его.

[@skryzhanovsky]

М… Чуть сложнее. Вот в общем случае она не гробится, если соблюдать итоговый порядок селекторов исходного CSS. Зато гробится в частном случае, когда в элементе комбинируются классы. Вон сверху сразу влепили такой случай и всё сломали. :) Но это решаемо.

Абсолютно верно. Потому в CSSO при частичном выделении свойств в отдельный блок работает правило «Суммарная длина выделяемых свойств должна быть больше суммарной длины копируемых селекторов».

[@DenVdmj]

Из командной строки под win не пашет.
1) __dirname под win использует виндовый backslash, так-что файл «csso\lib\csso.js» printFile должен быть таким:

function printFile(filename) {
    // Не пашет под виндой:
    // print(fs.readFileSync(__dirname.slice(0, __dirname.lastIndexOf('/')) + '/' + filename).toString());
    // пашет под виндой:
    // print(fs.readFileSync(__dirname + '/../' + filename).toString());
    // пашет под виндой:
    print(fs.readFileSync(__dirname.replace(/[\\/][^\\/]+$/, '/' + filename)).toString());
}

2) виндовый dirname (dirname.exe, по крайней мере из популярного пака UnxUtils) не понимает «--», ругается («too many arguments») на конструкцию: $(dirname — "$0")
Такой вариант проще и работает под win:

#!/usr/bin/env bash
CSSO_HOME=$(dirname $0)
node "$CSSO_HOME/../lib/csso.js" $@

либо можно сменить батник csso.cmd на такой:

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" "%~dp0\node_modules\csso\lib\csso.js" %*
) ELSE (
  node "%~dp0\node_modules\csso\lib\csso.js" %*
)

<парсер кретин>который заменил два минуса на длинное тире</парсер кретин>