Что такое CSS Formatter?
Форматор CSS читает таблицу стилей и переписывает ее с постоянным интервалом, отступом и разрывами строк, чтобы ее было легко читать и поддерживать. Он анализирует CSS на базовую структуру правил, селекторов, объявлений, правил at и комментариев, а затем печатает эту структуру обратно, используя предсказуемый макет: одно объявление на строку, одно пространство после каждого двоеточия, и каждый вложенный блок имеет отступы на один уровень глубже, чем его родительский. Правила стиля остаются идентичными, но файл, который прибыл как одна длинная непрерывная строка, становится чем-то, что вы можете сканировать и редактировать.
Тот же инструмент работает в обратном направлении, как CSS минификатор. минификация полосок каждое пространство, вкладка, разрыв линии, и (необязательно) комментарий, что браузер не нуждается, сворачивая таблицу стилей до наименьшего байт-для-байт эквивалент. хорошо отформатированный 6 КБ стилистик часто падает ниже 4 КБ, как только пробелы исчезнут, что означает меньше байтов по сети и более быструю первую краску. Beautify, пока вы пишете и отлаживаете; миниатюрную копию, которую вы отправляете в производство.
Этот форматировщик понимает части CSS, которые запускают наивные сценарии поиска и замены. Вложенные правила, такие как @media и @supports, правильно отступают по своим внутренним правилам, сохраняются блоки @keyframes с процентными шагами, строковые литералы в содержимом и значения URL () оставляются точно такими же, как написано, а комментарии сохраняются или удаляются по запросу. Все полностью работает в вашем браузере, поэтому ваша таблица стилей, включая любые собственные токены дизайна или имена внутренних классов, никогда не загружается, и инструмент продолжает работать после того, как страница загрузилась даже без подключения.
Небольшой тест показывает, что делает этот CSS-форматор онлайн. Вставьте @media (максимальная ширина: 600px){.nav a,.nav button{padding:8px 12px;color:#333}} и нажмите "Украсить" с 2 пробелами. Медиа-запрос открывает свой собственный блок, кнопки .nav a и .nav переходят на отдельные строки на один уровень, и каждое объявление находится на своей строке с пробелом после двоеточия. Значок размера читается 73 B → 98 B, +34%, потому что отступ добавляет байты. Нажмите "Минифицировать" на этом выводе и он вернется к исходным 73 байтам.
Как использовать CSS Formatter?
Вставьте свой CSS
Вставьте или введите таблицу стилей в область ввода. Минифицированный, написанный от руки или экспортированный CSS - все работает, включая файлы с @media, @keyframes и комментариями.
Выберите украсить или минифицировать
Нажмите "Украсить", чтобы повторно отступить CSS для чтения, или "Минифицировать", чтобы удалить пробелы для доставки. Выберите 2 пробела, 4 пробела или вкладки для макета beautify.
Рассмотрите результат
Форматированный CSS отображается справа со значком размера, показывающим изменение байта Любые уведомления об анализе, такие как незакрытая скобка, перечислены как предупреждения.
Скопируйте или скачайте
Скопируйте выходные данные в буфер обмена или загрузите их в виде файла.css, готового войти в ваш проект или построить конвейер.
Основные характеристики
Украсьте и минифицируйте
Один инструмент повторно отступает CSS для чтения и снимает его обратно для доставки, поэтому вам никогда не понадобятся две отдельные утилиты
Вложенный At-Rule Aware
Правильно отступает правила внутри @media, @supports и @keyframes, а не сглаживает или искажает их
Строка И URL() Безопасный
Оставляет нетронутым содержимое цитируемых строк и значения url (), поэтому URI текста и данных содержимого сохраняют форматирование нетронутым
Конфигурируемая отступ
Форматируйте с двумя пробелами, четырьмя пробелами или вкладками, чтобы они соответствовали стилю вашего проекта или настройкам редактора
Frequently Asked Questions
Related Tools
Chmod Calculator
Convert Unix file permissions between octal, symbolic and rwx checkboxes. Toggle read, write and execute for owner, group and others, plus setuid, setgid and sticky, and copy the chmod command - all in your browser.
JSON Formatter
Format, validate, and minify JSON data
YAML Validator
Validate YAML syntax and convert to JSON format
CSS Minifier & Beautifier
Minify CSS to cut file size or beautify minified stylesheets for debugging
Comments
0 comments
No comments yet. Be the first to share your thoughts!