Intereting Posts
Можно ли гарантировать доставку сообщений с использованием UDP на Node.js? Модули узлов – экспорт переменных или экспортирующих функций, которые ссылаются на него? Mongoose find (), как получить доступ к результирующим документам? Как создать таблицу html с Jade, итерации массива Транспортир для NodeJS на виртуальной машине – Как исправить ошибку 199? как создать древовидную структуру рекурсивного json & query для него, где id = 5 в nodejs Отладка тестов на jasmine-узел с помощью узла-инспектора Получение ggvis :: export_png () работает node-amqp + rabbitMQ как преобразовать сообщение в сообщение Маршрутизация Jade URL в узле Express Захват миниатюр в то время Загрузка видео Youtube 500 Ошибка: не удалось просмотреть «индекс» в каталоге представлений Макеты шаблонов Jade не работают в сочетании с Node.js модуль nodejs npm ошибка установки / модуль gcm-node send err Запуск mongodb навсегда, использующий вечно в windowsх

Существуют ли какие-либо агрессивные инструменты для оптимизации CSS?

Мне интересно, знает ли кто-нибудь об инструменте, который будет агрессивно переписывать CSS для более эффективного сжатия стилей. например, мне хотелось бы:

.foo { color : red; font-size: 16px; height: 20px; } .bar { color : red; font-size: 16px; height: 30px; } 

для сжатия:

 .foo, .bar { color : red; font-size : 16px; } .foo { height : 20px; } .bar { height : 30px; } 

Чтобы быть ясным, все министры, о которых я знаю, например, YUI Compressor, удаляют только пустое пространство и, возможно, присоединяются к нескольким свойствам (например, font-family и font-size font в font ). Я ищу что-то, готовое полностью переписать структуру файла.

Короче говоря, если кто-нибудь знает о какой-либо работе, которую кто-либо сделал в отношении логики сжатия позади этого, эта информация была бы оценена. Я подумываю написать свой собственный, если я не могу его найти, но есть миллион вещей, которые нужно учитывать, например, margin-top надпись части margin , специфичность селектора и включение порядка и т. Д. И т. Д. И т. Д. Затем работа как эффективно сжимать информацию, например, будет ли более эффективно повторять селектор или свойство?

Я не знаю агрессивного инструмента минимизации CSS, но вы можете использовать следующий подход:

Настроить

  1. Разверните свой CSS ( margin:1px 0 0 0; margin-top:1px; margin-left:0px; …).
  2. Построить граф G = (V, E) с V как множество вершин и E как набор ребер:
    • V состоит из конъюнкции двух наборов A (уникальные селекторы, например div , p > span , #myid ) и B (уникальные свойства, например display:block; color:#deadbeef; ).
    • E состоит из всех ассоциаций между селектором (в A) и свойством (в B).
  3. Используйте подходящую функцию веса c для ваших элементов в b . Это может быть количество соседей данного элемента b или accumulated lenght of properties - accumulated length of selectors . Твой выбор.

Вы можете заметить, что с помощью этого подхода вы получите двудольный граф. Теперь попробуйте следующий жадный алгоритм (псевдокод):

Алгоритм

  1. Возьмите элемент b в B, который имеет максимальный вес и добавьте его в пустое множество Z
  2. Проверьте, имеет ли другой элемент d в B одинаковый вес
    • если такое объявление существует, проверьте, покрывает ли он одни и те же селекторы.
      1. Если d охватывает одни и те же селекторы: добавьте d в Z и перейдите к шагу 2.
      2. если d не охватывает одни и те же селекторы, проверьте следующий элемент с тем же весом или перейдите к шагу 3, если вы проверили все элементы d .
  3. Теперь Z – набор свойств, охватывающий некоторые селекторы. Разберите это как CSS в буфер.
  4. Удалите все элементы в Z и их смежные ребра в G и удалите Z.
  5. Если B не пусто, перейдите к шагу 1.
  6. В вашем буфере содержится предварительно определенный код CSS. Теперь вы можете объединить некоторые свойства (например, margin-top:0px;margin-left:1px ).

замечания

Обратите внимание, что фактическое сжатие зависит от вашей весовой функции. Поскольку это жадный алгоритм, он, скорее всего, вернет миниатюрный CSS, но я считаю, что кто-то отправит контрпример. Также обратите внимание, что после удаления элементов в Z вам необходимо обновить свою весовую функцию.

Оценка времени выполнения

Алгоритм всегда заканчивается и будет работать в O ( |B|^2*|A| ), если я не ошибаюсь. Если вы используете кучу и сортируете свойства в каждом списке смежности (время установки O ( |B|*|A|log(|A|) )), вы получите O ( |B|*|A|* (log(|B|)+log(|A|)) ).

CSS Tidy работает как чемпион!

  • цвета, такие как «черный» или rgb (0,0,0), преобразуются в # 000000 или, скорее, в # 000, если это возможно.
  • Некоторые шестнадцатеричные коды заменяются именами цветов, если они короче.
  • a {свойство: x; свойство: y;} становится {свойством: y;}
  • (все дублирующие свойства объединены) margin: 1px 1px 1px 1px; становится margin: 1px;
  • Маржа: 0px; становится margin: 0;
  • а {рентабельность-топ: 10px; край дно: 10px; Левое поле: 10px; margin-right: 10px;}
  • а {поле: 10px;}
  • Маржа: 010.0px; становится margin: 10px;
  • удаляются все лишние пробелы
  • в зависимости от уровня сжатия все фоновые свойства объединяются
  • все комментарии удалены
  • последняя точка с запятой в каждом блоке может быть удалена
  • добавлены точки с запятой
  • исправлены неправильные строки в строках
  • добавлены отсутствующие единицы
  • плохие цвета (и названия цветов) фиксированы
  • стоимость имущества ! важный; становится собственностью: value! important;

Вы видели компрессор YUI ?

Вы также можете использовать http://www.minifycss.com/css-compressor/ или http://www.ventio.se/tools/minify-css/

Проект, называемый CSS Tools, претендует на это.