- Зачем нужны CSS Beautifier и CSS Minifier?
- Где взять "укрошатель" и "сжиматель" CSS кода?
- Как пользоваться CSS Beautifier и CSS Minifier от BeautifyTools
Зачем нужны CSS Beautifier и CSS Minifier?
Так как все данные от одного компьютера к другому передаются либо по проводам, либо с помощью электромагнитного излучения, а не просто волшебным образом появляются там, где они нужны, то при передаче данных важен размер передаваемого объёма этих данных. Для того, чтобы уменьшить объёмы этих данных для CSS-файлов можно использовать CSS Minifier. Он убирает все ненужные пробельные символы из кода, а также удаляет все комментарии, вытягивая весь CSS-код в одну строку. И это вообще никак не сказывается на том, что видит у себя пользователь в браузере. Так как эти символы и комментарии нужны человеку для чтения и правки кода, но для работы браузера не имеют значения. Всё работает немного быстрее и быстрее загружаются данные с сервера, откуда загружается страница сайта.
CSS Beautifier наоборот, приводит CSS-код в удобочитаемый и хорошо воспринимаемый человеческим глазом формат. Выставляются все отступы и переводы строчек так, что при отладке сразу ясно, какое свойство, какого класса, какое значение прописано. Для работы с кодом — вещь конечно незаменимая!
Где взять "укрошатель" и "сжиматель" CSS кода?
В браузерах есть инструменты разработчика, которые позволяют привести минифицированный CSS-код в удобочитаемый вид, однако, на сервере может хранится сжатый код. А встроенных в браузере минификаторов я вообще не встречал.
Поэтому, можно воспользоваться он-лайн "укрошателем" и "сжимателем" CSS кода для того, чтобы привести код в удобный для работы вид в период отладки, а после создать сжатую версию кода, которая будет быстро и легко загружаться с сайта в браузер пользователя.
Вот один из них по ссылке: https://beautifytools.com/css-minifier.php
Выполняет обе функции: и сжимает и причёсывает CSS-код в зависимости от того, что в данный момент нужно для работы!
Как пользоваться CSS Beautifier и CSS Minifier от BeautifyTools
В вашем распоряжении два окна. В первое нужно разместить CSS-код, во втором сразу отобразится отформатированный результат, который можно скопировать одним кликом мышки.
Кнопки управления над окном ввода CSS-кода:
Загрузить URL (Load Url)
Клик по этой кнопке выдаст окно, в котором можно ввести URL со ссылкой на CSS-файл с удалённого сервера, который нужно обработать. Удобно! Ничего не надо копировать и вставлять!
Загрузить файл (Browse)
Клик по этой кнопке откроет навигацию по локальному компьютеру, где можно в стандартном интерфейсе найти и выбрать файл, находящийся на собственном жёстком диске.
"Укрошатель" CSS (Beautify css)
Оптимизация css-кода с помощью онлайн css beautifier. Вводите грязный, минифицированный css-код, чтобы красиво оформить, отформатировать, украсить и сделать его более читабельным. В редакторе есть возможность выбора различных тем и размеров шрифта. Подсветка синтаксиса, автозавершение, ошибки кода и предупреждения также включены для более легкого написания кода.
"Сжиматель" CSS (Minify css)
Онлайн CSS Minifier принимает любую форму css кода и делает его минифицированным, сжатым, удаляя пробелы, новые строки, отступы и комментарии. Он уменьшает размер файла и оптимизирует css для вашего сайта.
Скачать результат (Download)
Клик по этой кнопке позволяет скачать и сохранить в файл полученный обработанный CSS-код на локальном компьютере.
Очистить (Clear)
Клик по этой кнопке удаляет все данные из окошка ввода и вывода CSS-кода.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)
