Output will appear here...Форматировщик CSS читает таблицу стилей и переписывает ее с последовательным интервалом, отступом и разрывами строк, чтобы ее было легко читать и поддерживать. Он анализирует CSS на базовую структуру правил, селекторов, объявлений, правил at и комментариев, а затем печатает эту структуру обратно, используя предсказуемый макет: одно объявление на строку, одно пространство после каждого двоеточия, и каждый вложенный блок имеет отступы на один уровень глубже, чем его родительский. Правила стиля остаются идентичными, но файл, который прибыл как одна длинная непрерывная строка, становится чем-то, что вы действительно можете сканировать и редактировать.
Тот же инструмент работает в обратном направлении, как CSS минификатор. минификация полосок каждое пространство, вкладка, разрыв линии, и (необязательно) комментарий, что браузер не нуждается, сворачивая таблицу стилей до наименьшего байт-для-байт эквивалент. хорошо отформатированный 6 КБ стилистик часто падает ниже 4 КБ, как только пробелы исчезнут, что означает меньше байтов по сети и более быструю первую краску. Beautify, пока вы пишете и отлаживаете; миниатюрную копию, которую вы отправляете в производство.
Этот форматировщик понимает части CSS, которые запускают наивные сценарии поиска и замены. Вложенные правила, такие как @media и @supports, правильно отступают по своим внутренним правилам, сохраняются блоки @keyframes с процентными шагами, строковые литералы в содержимом и значения URL () оставляются точно такими же, как написано, а комментарии сохраняются или удаляются по запросу. Все полностью работает в вашем браузере, поэтому ваша таблица стилей, включая любые собственные токены дизайна или имена внутренних классов, никогда не загружается, и инструмент продолжает работать после того, как страница загрузилась даже без подключения.
Вставьте или введите таблицу стилей в область ввода. Минифицированный, написанный от руки или экспортированный CSS - все работает, включая файлы с @media, @keyframes и комментариями.
Нажмите "Украсить", чтобы повторно отступить CSS для чтения, или "Минифицировать", чтобы удалить пробелы для доставки. Выберите 2 пробела, 4 пробела или вкладки для макета beautify.
Форматированный CSS отображается справа со значком размера, показывающим изменение байта Любые уведомления об анализе, такие как незакрытая скобка, перечислены как предупреждения.
Скопируйте выходные данные в буфер обмена или загрузите их в виде файла.css, готового войти в ваш проект или построить конвейер.
Один инструмент повторно отступает CSS для чтения и снимает его обратно для доставки, поэтому вам никогда не понадобятся две отдельные утилиты
Правильно отступает правила внутри @media, @supports и @keyframes, а не сглаживает или искажает их
Оставляет нетронутым содержимое цитируемых строк и значения url (), поэтому URI текста и данных содержимого сохраняют форматирование нетронутым
Форматируйте с двумя пробелами, четырьмя пробелами или вкладками, чтобы они соответствовали стилю вашего проекта или настройкам редактора
Format, validate, and minify JSON data
Validate YAML syntax and convert to JSON format
Minify CSS to cut file size or beautify minified stylesheets for debugging
Format messy SQL into readable, indented queries or minify SQL to a single line
0 comments
No comments yet. Be the first to share your thoughts!