csso icon indicating copy to clipboard operation
csso copied to clipboard

Минификация множественных значений фонов

Open kizu opened this issue 13 years ago • 1 comments

Скажем, если есть что-то такое:

.class {
    background: url(1.png) 100% 100% no-repeat,
                url(2.jpg) 100% 100% no-repeat,
                url(3.jpg) 100% 100% no-repeat,
                url(4.jpg) 100% 100% no-repeat;
}

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

.class {
    background: 100% 100% no-repeat;
    background-image: url(1.png),
                      url(2.jpg),
                      url(3.jpg),
                      url(4.jpg);
}

Экономия: из 142 в 104 символа в этом конкретном случае. Подозреваю, что чем дальше тем больше люди будут использовать множественные фоны и градиенты, так что можно будет подумать в эту сторону.

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

kizu avatar Feb 28 '12 16:02 kizu

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

Но — в 99% случаев такое не повредит, так что если когда в CSSO будет не 100% безопасный (но сильно ужимающий) режим — туда этому таску и дорога.

Кстати, может ввести теги типа «safe», «unsafe» и вешать их соответствующим issues? Ну и вообще можно подумать над каталогизацией issues — со всякими полезными метками и прочими штуками (майлстоуны?) было бы проще работать, наверное.

kizu avatar Oct 24 '12 23:10 kizu