Есть ли продвинутый CSS minifier/компилятор, который делает такие вещи, как резервирование полосы и разделяет отдельные идентичные правила?

Например

input{margin:0}body{margin:0;background:white}

будет короче, как это написано

input,body{margin:0}body{background:white}

или

input,body{margin:0}body{margin:0;padding:0}

будет короче, как это написано

input,body{margin:0}body{padding:0}

Заключение нет такого инструмента См. принятый ответ.

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

Ответы

Ответ 1

Это можно сделать, используя CSSO.

Рассмотрим следующий ввод:

input{margin:0}body{margin:0;background:white}

Выход CSSO:

input,body{margin:0}body{background:#fff}

(именно то, что вы ищете)

<ы > Но, к сожалению, CSSO оптимизирует это:

.dont-care {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

To:

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

Однако CSSTidy преобразует вышеуказанное значение в соответствующее свойство сокращения:

.dont-care {
    background:url("images/chart.png") no-repeat;
}



Семь Четыре шага для оптимизации CSS:

Вот практика, которую я придерживаюсь:

  • Объединить файлы CSS в all.css.
  • Поставка для CSSO.
  • Хит Minimize
  • Вставьте вывод в all.min.css

За исключением оплаты @Grillz, чтобы сделать это вручную, я пока не нашел лучшего решения для оптимизации CSS.



Но как насчет старых IE-хаков?

Если вы используете хаки CSS для IE6 и 7, CSSO сохранит хаки.

Например:

.dont-care {
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;
}

Выход CSSO:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}

<ы > CSSTidy будет игнорировать asterik (* взлом, используемый для IE6), и вывод:

.dont-care {
    background:url("images/chart.jpg") no-repeat;
}

Вы также можете избежать взлома и использовать отдельный файл CSS для более старых версий IE (скажем all.oldIE.css). После оптимизации (используя 7 шагов, описанных ранее) оба файла отдельно, это то, что вы можете использовать в теге <head> вашего файла HTML/masterpage/template/layout в конечном итоге:

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

где all.min.css будет работать для всех браузеров, кроме версий IE, меньше и равно 7. Но использование только CSSO - безопасная ставка.

Update

Пропустить часть CSSTidy. CSSO делает безопасную оптимизацию. Согласно их разработчику, оптимизация сокращений небезопасна:

Рассмотрим пример:

.a{
    background-attachment: fixed;
}
.b {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

и если бы у вас был <div class="a b"></div> - элемент с обоими классов, вы не можете оптимизировать .b, как вы пишете, потому что это переопределить background-attachment, установленный в .a.

Итак, нет, это не безопасная оптимизация.

Ответ 3

Если вы используете визуальную студию, вы можете установить расширение Web Essentials. В нем есть экспериментальная поддержка очистки и слияния правил CSS, но не так, как вы подписались. Он, например, создает больше пробелов, но он объединяет теги css, которые имеют (частично) одинаковые стили, например..

Ответ 4

попробуйте LESS.

LESS автоматически распознает, когда вы сохраняете файл *.less и сразу же компилирует свой CSS-код и будет уменьшен. Вы можете создать столько файлов, сколько хотите, и LESS будет наблюдать за ними все, чтобы вызвать компиляцию.

Вы будете работать только в файлах .less. Инструмент автоматически скомпилирует и сохранит ваши файлы как .css

http://lesscss.org/

Ответ 5

Я бы порекомендовал https://www.npmjs.com/package/ gulp -clean-css

если у вас нет проблем с использованием gulp он делает именно так, как вы хотите

Ответ 6

Да, есть. YUI Compressor делает это для вас. Я ошибался, компрессор YUI - это всего лишь minifier, но очень полезен. Что и как они минимизируют представленный здесь.

Это пакет .jar, который вам нужно будет download, а затем запустить через терминал, если вы находитесь в Unix или Linux (я не знаю о Windows, поэтому кто-то заполняет этот пробел!) со следующим синтаксисом:

$ java -jar /path/to/yuicompressor-x.y.z.jar myfile.css -o myfile-min.css

Опция -o объявляет, какой файл вы хотите записать свой миниатюрный контент.

Ответ 8

Нет, нет такого инструмента, который бы оптимизировался до уровня, который вы задаете (что я знаю, по крайней мере), и я не уверен, что вы захотите его использовать, если бы это было. Причина в том, что это не тривиальная проблема, чтобы найти наименьший возможный мини-код css. Для тривиального CSS, который вы предоставили, это легко. Но представьте себе, что это делается на блоке CSS размером 300 КБ. Это не тривиально. И стоит ли тратить время процессора на его создание (возможно, если вы кешируете результаты, но это не так, если вы обслуживаете его динамически)?

И какой выигрыш? Экономия всего на несколько процентов при передаче? Если у вас нет трафика на уровне facebook, вы не сможете сэкономить много трафика. И несколько процентов не будут сильно влиять на ваших пользователей (даже по dial-up, передача нескольких килобайт не так уж плохо).

Просто используйте стандартный компрессор (minify, YUI Compressor и т.д.) и сделать это. Вместо этого, беспокойтесь о низко висящих фруктах. Легко исправить проблемы...

Ответ 9

Вы пробовали less.js? вы можете написать css-код объектно-ориентированным образом, также вы можете использовать эту инфраструктуру либо на стороне клиента, либо на стороне сервера, ниже демонстрации на вашем случае:

/* you can write you desired css as follows */
body {
  &input {
        margin: 0;
  }
  background:white;
}

и он будет автоматически скомпилирован в:

body, input {
    margin:0;
}

body {
    background:white;
}

Ответ 11

CSSO немного устарел, ACCSS - это порт CSSO, но исправляет открытые проблемы с исходным кодом.

https://github.com/acwtools/accss

а также имеет лучшую степень сжатия