Онлайн сервис сжатия CSS кода

| 03.08.2014 | 2 комментария

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

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

В принципе все интуитивно понятно, выбираем степень сжатия, решаем что делать с комментариями в коде, вставляем код и жмем на кнопку!
Я покажу как работают режимы сжатия кода, на примере вот такого CSS кусочка:

view source
print?
01ul.minical {
02  position: absolute;
03  display: none;
04  list-style-type: none;
05  color: #3d454b;
06  background: white;
07  border: 1px solid #bbc5cd;
08  margin: 0;
09  padding: 0;
10  text-shadow: none;
11  width: 16em;
12  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
13  -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
14  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
15  z-index: 9327;
16  font-size: 1.1em;
17}
18ul.minical.minical-inline {
19  position: static;
20  -webkit-box-shadow: none;
21  -moz-box-shadow: none;
22  box-shadow: none;
23}

Режим - Light

Убрал все знаки табуляции и последние переносы строки перед закрывающейся скобкой.

Уменьшил размер кода на 11% 🙂

Режим - Normal

В данном режиме, каждое CSS правило записано в одну строку!

Вот такой вод код стал после сжатия:

view source
print?
01ul.minical{ position:absolute;  display:none;  list-style-type:none;  color:#3d454b;  background:white;  border:1px solid #bbc5cd;  margin:0;  padding:0;  text-shadow:none;  width:16em;  -webkit-box-shadow:0 0 12px rgba(0,0,0,0.2);  -moz-box-shadow:0 0 12px rgba(0,0,0,0.2);  box-shadow:0 0 12px rgba(0,0,0,0.2);  z-index:9327;  font-size:1.1em}
02ul.minical.minical-inline{ position:static;  -webkit-box-shadow:none;  -moz-box-shadow:none;  box-shadow:none}

Режим - Supre Compact

В данном режиме, весь код записывается в одну строку!

Вот как изменился исходный код:

view source
print?
01ul.minical{ position:absolute; display:none; list-style-type:none; color:#3d454b; background:white; border:1px solid #bbc5cd; margin:0; padding:0; text-shadow:none; width:16em; -webkit-box-shadow:0 0 12px rgba(0,0,0,0.2); -moz-box-shadow:0 0 12px rgba(0,0,0,0.2); box-shadow:0 0 12px rgba(0,0,0,0.2); z-index:9327; font-size:1.1em}ul.minical.minical-inline{ position:static; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none}

Надеюсь этот сервис будет вам полезен. 🙂

(4 голосов. Рейтинг: 2,00 из 5)
Загрузка...

Метки: ,

Рубрика: Online инструменты

Комментарии (2)

| RSS комментария

  1. Yura:
    15.10.2017 в 22:27

    Слабовато сжимает этот сервис.
    Лучше использовать //cssresizer.com/

    Ответить
    • Дмитрий Британ:
      16.10.2017 в 22:21

      Спасибо вам, за ваш комментарий!
      Думаю он будет полезен и другим 🙂

      Ответить

Оставьте свой комментарий

«
»