css / csso Goto Github PK

Could csso minify margins which's not set property?
like:

`````` .test{margin-left:4px;margin-bottom:4px;margin-top:14px;}to.test{margin:14px 0 4px 4px;}```

Использую сборщик csso со сборщиком https://github.com/mde/jake хотелось бы более простой способ подключения и парсинга из другого node app, сейчас использую так:

var csp  = require('csso/lib/cssp').parse,
    csm  = require('csso/lib/cssm').minimize,
    csu  = require('csso/lib/cssoutils');
...
var optimized_css = csu.min2string(
    csm(
      csp(
        fs.readFileSync('elfinder.css').toString()
      ),
      {}
    ).nodes,
    ''
  );

Так же хотелсь бы опцию которая добавляла \n после каждого rulset'а - таким образом оcтаётся читабильность css файла.

Надо добавить поддержку '//' в минимизацию shorthand.
http://clubs.ya.ru/ui/replies.xml?parent_id=106&item_no=105&with_parent=1#reply-ui-106

Сокращать -0 до 0.

Добавить минимизацию margin / padding, если есть все размерности. Генераторы любят лишнее писать. Ничего больше этого не надо, никаких перекрываемых fake и т.п.

Сабж: width:10.1000em → width:10.1em

Ещё можно подумать над тем, чтобы (опционально) сокращать излишне длинные дроби (2.222222222222222222), но тут надо исследовать после какого знака браузерам становится всё-равно.

Мелочи, но всё же:

1. :first-child короче чем :nth-child(1) на один символ.
2. :last-child короче чем :nth-last-child(1) аж на семь символов.
3. Аналогично и с …-of-type.

Единственный момент: есть версии браузеров, которые понимают :first-child, но не понимают nth-child.

Ну и представить такое в коде я могу только если например что-то или кто-то автоматически нагенерит стилей с …(1),…(2),…(3) и т.д. и не прооптимизирует соответствующие пункты с единичками.

Есть два конкретных широко используемых хака для IE8/IE9 (например, вот тут их упоминают).

Первый, для IE8 и IE9, в конце свойства ставится конструкция \0/ (без пробела это правило поймёт ещё и опера):

.a {
    color: lime;
    color: red \0/;
}

Второй, только для IE9, в конце свойства пишется \9:

.b {
    color: lime;
    color: red\9;
}

Сейчас CSSO оставляет только второе значение, что логично. Но на практике было бы здорово знать, если эти правила поймут только соответствующие версии IE и не сжимать их.

outline: none → outline: 0

из правила

#main {
    margin-right: -100%;
}

получаем

#main{margin-right:-}

Для многих новых свойств (т.е. редко используемых) может быть ситуация, что оно (свойство), встретится в таблице стилей только в двух-трёх местах, но при этом значение будет везде одинаковым. Сейчас если между двумя селекторами будет третий, то эти свойства не склеются, тогда как вынести это свойство из них в отдельный блок будет безопасным т.к. мы точно знаем, что нигде нет блоков, в которых это свойство могло бы быть переопределено.

Например, сейчас у

.block1 {
    text-shadow: 1px 0 2px red;
    }
.block2 {
    text-shadow: 1px 0 2px red;
    }
.block3 {
    color: red;
    }
.block4 {
    text-shadow: 1px 0 2px red;
    }

будут оптимизированы только первые два блока, тогда как если это и есть вся таблица стилей, то безопасно склеивать блоки с одинаковыми значениями. А вот если бы появился какой-то селектор .block4 {text-shadow: 0 -1px 1px green;} (причём только где-то между этими свойствами т.к. если он будет в конце или начале, то вес селектора не позволит потом им что-то переопределить), то всё, мы только тогда начинаем бояться и всё делаем как и сейчас.

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

Очень хочется режим, с которым кроме результата будет выдаваться статистика о том что именно было прооптимизированно:
— какие свойства были удалены как перекрытые;
— какие именно оптимизации оказались самыми эффективными;
Ну и всё в том же духе.
Помимо практической пользы (можно, например, искать где что перекрывается) было бы просто забавно смотреть на статистику по тому какие методы оптимизации какой прирост дают :)

Т.к. border-top (и т.п.) в случае отсутствия собственного цвета подхватывает цвет у color (см. [CSS 2.1 / 8.5.4 Border shorthand properties]), в случае совпадения цветов можно делать вот так...

Было:

.test {
    color: red;
    border-left: solid red;
}

Стало:

.test {
    color: red;
    border-left: solid;
}

Для background-position со значениями вида right top (9 символов) возможно сжатие до 100% 0% (7). То же для остальных пар.

Сейчас CSSO угробит хаки вот такого вида:

.my { color: red }
.my, x:-vendor-pseudo { color: green }

до

.my, x:-vendor-pseudo { color:green }

Пожалуй, единственный правильный вариант такое спасать — составить список всех вендорных селекторов, определять такие хаки и не перекрывать.

Пожалуйста:

— Переведите документацию или хотя бы описание на английский язык
— Оставьте всё на Github (Temporary CSS-optimizer repo?)

Пора бы уже демонстрировать такие вещи и западной аудитории.

Чем плотнее CSSO сжимает, тем меньше работы gzip и тем хуже иногда сжатие пары CSSO+gzip. Т.к. алгоритм DEFLATE основан на повторяющихся последовательностях, CSSO следует составлять как можно более однообразные строки. Например, пересортировывать селекторы по алфавиту, в итоге a, b { .. } .. b, a { .. } превратится в a, b { .. } .. a, b { .. }.

Раз уж всё-равно весь CSS парсится, почему бы с каким-нибудь ключиком не выдавать всякую полезную информацию о коде?

Ну, например:

1. Если селекторов больше 4095 — выдавать предупреждение, что в ие дальше какого-то селектора будут проблемы (как вариант — сразу предлагать засплитить файл).
2. Пытаться отлавливать всякие ошибки (если этого до сих пор нет), которые могут привести к чему-нибудь плохому (многое из того, что w3cшный валидатор делает)
3. Сообщать о всяких неоптимальных селекторах, влияющих на производительность (ховеры без элементов, звёздочки, cелектор + без родителя/элементов (опасно в фф <4) и т.д.)

В общем, попробовать в будущем сделать не просто оптимизатор, но и анализатор кода, кажется, это может быть вполне разумным развитием :)

Надо добавить возможность выключить реструктуризацию, оставив лишь plain минимизацию.
Как аргументом, так и через API.

Например, попробовал в веб-версии прооптимизировать a{{} — зависает и выдаёт потом сообщение о «медленном скрипте». Возможно, могут встретиться и ещё подобные случаи.

Довольно большая, но, кажется, не сильно сложная задача: для каждого шортхенда есть много дефолтных значений, которые хочется обрезать (я об этом написал в issue про font, но лучше этот момент отдельно вынести).

Для font всё просто: можно вырезать все значения normal:

• font: normal normal 1em/2 Arial, sans-serif → font:1em/2 Arial,sans-serif

А вот у background уже дофига различных значений можно опустить:

• background: none repeat scroll transparent 0 0 → background:0 0;

(Кстати, background:none можно легко сжимать до background:0 0 — получаем экономию на одну спичку)

…и т.д.

Ну и для кучи современных всяких CSS3 свойств часто не опускают какие-либо из значений (и вот их точно часто из генераторов вставляют), например:

• у transition: all .3s ease недефолтное только указание времени, т.е. это можно сократить до transition:.3s
• у box-shadow, увы, можно только ноли выкидывать до одного, и только если они идут в конце: box-shadow: 3px 0 0 0 red → box-shadow: 3px 0 red, но box-shadow: 3px 0 3px 0 red → box-shadow: 3px 0 3px red.

Правда, вот случай с box-shadow чуть сложнее: в старых вебкитах нельзя использовать четвёртую цифру — свойство не будет применено. Возможно, где-то кто-то может использовать это как хак для старых версий. Но по идее это актуально только для -webkit-box-shadow, для остальных пефиксных и без вариантов можно все ноли сокращать безопасно, кажется.

Хотя, для всех подобных шортхендов надо тестировать отдельно во всех актуальных браузерах, но, насколко я помню, там не так много проблем и спорных мест.

Склейка одинаковых @media наверняка же когда-нибудь будет?

Так что напишу пока про совсем простую их оптимизацию: вот тут написали про то, что если задаёшь @media all and (min-width: 500px), то по спецификации можно опустить all and т.к. это и так значение по дефолту. Проверил: в современных браузерах, действительно, всё с этим нормально.

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

background-position: 0 эквивалентен background-position: 0 50%, следовательно, ошибочно сжимать background-position: 0 0 до background-position: 0.

(создаю отдельным issue, а не комментирую сюда т.к. бага важнее, чем фича)

Если задано только одно свойство, то второе по дефолту становится равным 50%.

Это можно использовать так:

1. background-position:10px 50% → background-position:10px
2. background-position:50% 0 → background-position:top

И т.д.

P.S. Кстати, я заметил, что background с шорхендами и дефолтами вообще почти не оптимизируется — создать про это отдельный issue?

Вспомнил пару моментов из доклада Пепелсбея про префиксы (вот кадр, например).

Смысл в том, что многие автоматические раскрыватели префиксных кластеров, а также многие верстальщики могут часто писать CSS3-свойство в префиком, которое в том или ином браузере не существует (т.е. изначально было реализовано без префикса). Это -o- и -ms- для border-radius и box-shadow, -o- для свойств column-blah и background-size и многие другие (хорошим источником для нахождения свойств, для которых никогда не существовало префиксов можно считать http://caniuse.com/).

Кажется, что совершенно безвредно было бы вырезать подобные конструкции из кода, скажем, вот такой вот кусок

-webkit-box-shadow: 10px 10px 1px red;
   -moz-box-shadow: 10px 10px 1px red;
    -ms-box-shadow: 10px 10px 1px red;
     -o-box-shadow: 10px 10px 1px red;
        box-shadow: 10px 10px 1px red;

Можно было бы сократить до

-webkit-box-shadow: 10px 10px 0 red;
   -moz-box-shadow: 10px 10px 0 red;
        box-shadow: 10px 10px 0 red;

(А если бы можно было гибко настраивать CSSO, то в теории можно было бы предусмотреть настройки поддерживаемых браузеров, тогда можно было бы исключать и -khtml- и -webkit- с -moz- для border-radius и box-shadow. Или и вовсе, для мобильных устройств вырезать всё кроме -webkit- и безпрефиксного варианта, а для .ie.css —вообще вырезать все CSS3-свойства)

Кстати, кажется, имеет смысл как-нибудь посмотреть на код, который генерят всякие SASS, Less, Compass и прочие, наверняка там можно попробовать найти ещё аналогичные места, которые можно сократить.

В случаях вида [a="b"] можно убирать кавычки и оставлять [a=b].

Например, преобразовывать
#F00
white
rgba(0,0,0,1)
rgba(255,255,255,0.5)
до
red
#FFF
#000
hsla(0,0%,100%,0.5)
Местами тут экономия на спичках и редкие юз-кейсы (#F00 → red), но вот с rgba и прочими может местами быть хорошая экономия, кажется.

background: #eee; /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */

becomes:

background: linear-gradient(top,rgba(255,255,255,.2)0%,rgba(0,0,0,.2)100%);

Если в селекторе :not() будет находиться какой-то класс, то первая его часть будет заменена на 0. См. например,

:not(el.class-postfix)
{
    color: red;
}

«сжимается» в

:not(el0-postfix){color:red}

Согласно пункту 4.3.4 (http://www.w3.org/TR/CSS21/syndata.html#uri), можно вырезать кавычки и пробелы в аргементах у url().

В качестве бонуса -- padding не группируется :-)

.node {
    background:url('img/image.png')  no-repeat;
}

После сжатия:

.node{background:url('img/image.png')no-repeat}

Сочетание "')no-repeat" вызывает ошибку и правило не обрабатывается (IE 7, IE 8)
Если поставить пробел после скобки, то все работает.

1. Опция которая бы доавляла \n после каждого rulset - сохранит читабильность css.

2. В замечательном проектке UglifyJS, который мы используем вместе с вашим есть опция --max-line-len:

   (default 32K characters) — add a newline after around 32K characters. I’ve seen both FF and Chrome croak when all the code was on a single line of around 670K. Pass –max-line-len 0 to disable this safety feature.

Собственно при больших CSS имеет смысл так же как и в JS.

Детальнее: http://pornel.net/firefoxhack
Пока не понять, надо ли что-либо с этим делать.

.test {
    opacity: 1; 
    $margin-top: 0;
    padding-bottom: 8px;
    bottom: -8px;
    height: auto;
}

csso :

.test {
    opacity: 1; 
    $margin-top: 0;
    padding-bottom: 8px;
    bottom: -8px;
    height: auto;
}

проблема из-за $margin-top: 0, используется для IE

Вот такую запись:

clip:rect(auto,auto,auto,auto)

Можно заменить на:

clip:rect(0,auto,auto,0)

Т.к. по сути свойства и спецификациям, auto в начале и конце эквивалентны нолям (но не в середине!)

Например,

.class {
    border: 0 solid;
    border-top-width: 10px;
    border-bottom-width: 10px;
    }

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

.class {
    border: solid;
    border-width: 10px 0;
    }

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

.class {
    border: 1px solid green;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
    border-right: 1px solid red;
    }

можно сократить вообще до

.class {
    border: 1px solid red;
    }

Not sure what to do to fix it. :]

Sometimes it is necessary to include multiple src attributes for a font (for a fallback for IE).

It would look something like this:

@font-face {
font-family: 'pictos';
src: url('../fonts/pictos-web.eot'); /* IE9 Compat Modes */
src: local('☺'), url(data:application/x-font-woff;charset=utf-8;base64,longbase64encodedstring) format('woff'), url(data:font/truetype;charset=utf-8;base64,otherlongbase64encodedstring) format('truetype'), url('pictos-web.svg#webfontIyfZbseF') format('svg');
font-weight: normal;
font-style: normal;
}

When compressed the first src: url should not be removed, but it is:

@font-face{font-family:'pictos';src:local('☺'),url(data:application/x-font-woff;charset=utf-8;base64,longbase64encodedstring) format('woff'),url(data:font/truetype;charset=utf-8;base64,otherlongbase64encodedstring) format('truetype'),url('pictos-web.svg#webfontIyfZbseF') format('svg');font-weight:400;font-style:normal}

Moving this into an IE specific stylesheet is a fix for now, but it shouldn't fail when compressed.

Сейчас для вывода результата работы утилиты в файл используется следующая конструкция:

csso style.css > style.css

Предлагаю дать возможность делать так:

csso style.css style.min.css

что будет по-моему немного удобнее

Можно убирать a:first-letter из селекторов вида a, a:first-letter.

В CSS нередко встречаются "условно" большие z-index, когда верстальщик пишет "лишь бы большой", например, z-index: 9999. В погоне за байтами есть смысл собирать z-index по коду и вместо 1000, 2000, 9999 сжимать до 1, 2, 3.

После такого невалидного хака для оперы, в процессе оптимизации, CSSO теряет все следующие после него стили.

/* Opera 9.5 > */ /* */
@media all and (resolution = 0dpi)
{
   #js:root .b-form-checkbox__bg 
   {
      background: #fff;
   }
   #js:root .b-form-checkbox
   {
      background: #9a9a9a;
   }
}

(Opera >= 9.5 и < 10.50 stackoverflow)

При попытке внести отдельно стоящее свойство с отрицательным значением в шортхенд остаётся только дефис, само значение теряется. Например, можно попробовать сжать

.a{margin:0}
.a{margin-top: -1em}

результатом будет

.a{margin:- 0 0}

Аналогично для margin-left и прочих.

Включить поддержку невалидного (неизвестного CSSO) CSS на уровне statement. Например:

// invalid
.a { color: red }

Сейчас, кажется, заданные font и его свойства по отдельности не склеиваются: a{font:11px/2 Arial;font-size:.86em;font-family:Verdana}

Ещё согласно http://www.w3.org/TR/CSS2/fonts.html#font-shorthand в записи вроде
font: normal normal 12px/1 Arial;
можно опускать оба normal.

Ещё можно попробовать для font-size 1.5em преобразовывать в 150%, а 200% в 2em и т.д. — это почти безопасно.
Почти = единственная разница будет в ие при изменении в браузере размера шрифта, но и то обычно во всех ресетах пофикшено заданием для body фонт-сайза в процентах.

Будет отлично если CSSO научится понимать keyframe

#button_account_add.pulsate img {
    -webkit-animation-name: pulsate;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    }
    @-webkit-keyframes pulsate {
        0% {
            opacity: .5;
            }
        50% {
            opacity: 1;
            }
        100% {
            opacity: .5;
            }
        }

Спасибо за отличный продукт!

.test {
    -webkit-transition: background-color 0.2s ease-in-out;
    }

сжимает в

.test{-webkit-transition:background-color 02s ease-in-out}

Попробуйте, пожалуйста, скомпилировать этот css-файлик (и обратите внимание на шрифт в body, input, textarea - он остается только в body в итоге)

body {
    -webkit-user-select: none;
    }

body, input, textarea {
    font-family: "Trebuchet MS", Ubuntu, "Droid Sans";
    font-size: 10pt;
    }

a.direct {
    opacity: .5;
    -webkit-user-select: none;
    }

#profile #followings p {
    -webkit-transition: background-color 1s ease-in-out;
    -webkit-user-select: none;
    }

Для разработки (фиксы, дебаг) нужны ключи дампа парсера и передачи имени rule. Документировать не надо, чтобы не сбивать с толку пользователей, которым это не требуется.