Худший CSS, который мне когда-либо приходилось отлаживать, прибыл как одна линия из 40 000 символов. Шаг сборки объединил и свел на нет каждую часть проекта, правило ближе к концу преобладало над цветом, которого у него не должно быть, и не было возможности увидеть каскад, потому что не было разрывов строк, чтобы увидеть его. Я отправил достаточно интерфейсов по темам WordPress и приложениям React, чтобы знать, что таблица стилей, которую вы не можете прочитать, - это таблица стилей, которую вы не можете исправить, поэтому я построил форматтер css во время Toolz.dev это превращает эту стену текста обратно в отступы, сканируемые CSS в одной пасте, и снова минифицирует ее, когда вы готовы к отправке. Это руководство к нему и к тому, что "форматирование CSS" на самом деле означает.
TL;DR: Форматирователь CSS повторно отступает таблицу стилей с постоянным интервалом, чтобы ее можно было читать, и полоски минификатора CSS, которые отделяются друг от друга, поэтому файл мал. Инструмент форматтер css делает и то, и другое с одного входа. он анализирует CSS на правила, селекторы, объявления, правила at и комментарии, затем печатает эту структуру обратно с выбором двух пробелов, четырех пробелов или вкладок или сворачивает ее до наименьшего допустимого эквивалента. Вложенный
@mediaа@keyframesблоки,url()значения и строки с кавычками сохраняются в целости и сохранности, и все работает на стороне клиента, поэтому ваш CSS никогда не покидает браузер.
Что такое CSS-форматор?
Форматор CSS читает таблицу стилей и переписывает ее с предсказуемым, последовательным пробелом. сами правила не меняются. селекторы, свойства и значения идентичны до и после, и браузер применяет отформатированный файл точно так же, как он применил бы оригинал. Что меняется, так это макет: одно объявление на строку, одно пространство после каждого двоеточия, каждый блок с отступом на один уровень глубже, чем его родительский элемент, и закрывающая скобка на своей собственной строке. Результатом является файл, который человек может сканировать.
Под капотом инструмент не делает поиск и замену на пробелах, где наивные форматировщики идут не так. Сначала он анализирует CSS в его реальной структуре. Таблица стилей - это последовательность узлов: правила стиля, которые соединяют селектор с блоком объявлений, например, с правилами at @media или @import, комментарии, и сами объявления. как только CSS является деревом этих узлов, распечатать его обратно с любым отступом, который вам нравится, просто и, что особенно важно, безопасно. парсер - это то, что позволяет форматировщику знать, что запятая внутри :not(a, b) является частью селектора, а между ними - запятая h1 а h2 разделяет два селектора, причем точка с запятой внутри a url() URI данных - это не конец декларации.
Тот же синтаксический анализ приводит в действие обратную операцию. поскольку инструмент уже понимает структуру, он может печатать дерево вообще без отступов, что и есть минификация. Вот почему один инструмент охватывает оба задания: форматирование и минификация - это один и тот же синтаксический анализ, напечатанный двумя разными способами.
В чем разница между форматированием и минированием CSS?
Это противоположные концы одной оси, и знание того, что вы хотите, сохраняет путаницу Форматирование, также называемое украшением или красивой печатью, добавляет пробелы для пользы людей Минификация удаляет пробелы для пользы машин и сетей Вы форматируете копию вы читаете и редактируете; вы минифицируете копию вы отправляете в браузер.
Различие имеет значение, потому что они принадлежат в разных точках вашего рабочего процесса. пока вы пишете CSS, или когда вы унаследовали файл, который вам нужно понять, вы хотите, чтобы он был отформатирован. когда вы развертываете, вы хотите, чтобы он был минифицирован, чтобы браузер загружал меньше байтов и красок раньше. большинство конвейеров сборки минифицируются автоматически, но множество ситуаций выходят за рамки сборки: сниппет, вставленный из CodePen, таблица стилей, извлеченная из страницы, которую вы проверяете, файл темы, отредактированный непосредственно в CMS. Для тех, автономный форматировщик и минификатор является самым быстрым путем.
Вот краткий обзор раскола.
| Аспект | Формат (украсить) | минимизировать |
|---|---|---|
| Аудитория | Люди читают и редактируют | Браузеры скачивание |
| Белое пространство | Добавлено для читаемости | Удалено полностью |
| замечания | Хранится по умолчанию | Удалено по умолчанию |
| Размер файла | Больший | Как можно меньше |
| Когда использовать | Написание, отладка, рецензирование | Доставка на производство |
Как мне отформатировать CSS с помощью этого инструмента?
Поток намеренно короткий. вставьте свой CSS во вход, выберите "Украсить" или "уменьшить" и прочитайте результат. При украшении выберите два пробела, четыре пробела или вкладки, чтобы они соответствовали настройкам редактора проекта & #39;s, и решите, оставлять ли комментарии.The форматтер css показывает выходные данные со значком размера, чтобы вы могли видеть изменение байта, и перечисляет любые уведомления об анализе, такие как несбалансированная скобка, в качестве предупреждений, а не в бесшумном случае.
Четыре шага выглядят так на практике Сначала вставьте таблицу стилей, будь то минифицированный, рукописный или экспортированный из инструмента. во-вторых, нажмите "Украсить", чтобы повторно отступить его, или "Минифицировать", чтобы удалить его. В-третьих, просмотрите вывод и значок размера и посмотрите на любые предупреждения. В-четвертых, скопируйте результат в буфер обмена или загрузите его как .css файл готов к выходу в ваш проект. нет шага загрузки и учетной записи, потому что все это происходит в вашем браузере.
Если вы работаете с другими структурированными форматами, в Toolz отображается один и тот же шаблон. The джсон форматтер украшает и минифицирует JSON форматтер html делает то же самое для наценки и форматтер sql обрабатывает запросы Форматирование - это общая идея, и наличие одинаковой формы инструмента для каждого языка сохраняет мышечную память согласованной, тема Набор инструментов для веб-разработчиков гид развивается дальше.
Изменяет ли форматирование работу моих стилей?
Нет, и это гарантия, которая делает инструмент безопасным для работы на производственном CSS.Украшение и минификация только касания пробелов и, опционально, комментариев. они никогда не переупорядочивают объявления, никогда ничего не переименовывают, никогда не объединяют или отбрасывают правила, и никогда не переписывают значения.Специфика ваших селекторов не меняется, порядок источника, который управляет каскадом, не меняется, а вычисленный результат в браузере является байт-на-байт эквивалентом.
Это стоит прямо заявить, потому что некоторые оптимизаторы CSS делают гораздо больше, чем просто минимизируют: они объединяют дубликаты селекторов, отбрасывают правила, которые они считают неиспользованными, и изменяют порядок свойств. Эти преобразования могут тонким образом изменить поведение, особенно когда каскад или а !important участвует. этот форматировщик намеренно не делает ничего из этого. Это инструмент пробелов. Если вы украшаете файл, ничего не редактируете и снова минифицируете его, два файла функционально идентичны, а это означает, что вы можете свободно путешествовать туда и обратно без страха.
Грамматика CSS, определяющая, что считается пробелами, а где незначительно, указана в Синтаксический модуль CSS, уровень 3 из W3C. Форматировщик следует этой модели токенизатора грамматики и #39;s, поэтому он обрабатывает пробелы внутри строкового токена или a url() в отличие от пробелов между декларациями.
Как он обращается с @media, @keyframes и другими правилами?
Правила At - это место, где случайные форматировщики разваливаются, потому что правило at-rule может либо заканчиваться точкой с запятой, либо завертывать целый блок других правил. @import "base.css"; это утверждение, которое заканчивается точкой с запятой. @media (max-width: 600px) { ... } это блок, содержащий свои собственные вложенные правила, и эти вложенные правила необходимо отступать на один уровень глубже, чем @media линия сама по себе. Подход "найти и заменить" не может отличить их друг от друга; синтаксический анализатор может.
Потому что этот инструмент строит настоящее дерево, вложенное @media блок сохраняет свои внутренние правила правильно отступами при украшении и правильно сжимается при минировании. То же самое справедливо и для @supports функциональные запросы и для @keyframes анимации, где нравится каждый процентный шаг 0% а 100% является собственным блоком внутри анимации. Объявления шрифтов в @font-face и слоистый @layer правила обрабатываются одинаково. Какую бы глубину вложения ни достигала таблица стилей, отступ отслеживает ее.
Это структурное осознание также защищает части значения, которые выглядят как синтаксис, но не являются таковыми. А url() может содержать URI данных, упакованный с основанием 64, который включает точки с запятой и двоеточия, а также a content свойство может держать строку цитирования с скобками или запятыми внутри него Форматировщик покидает внутреннюю часть строк цитирования и url() значения точно такие, как написано, поэтому путь к шрифту, URI данных SVG или фрагмент текста сгенерированного контента никогда не свертываются, не меняются местами и не нарушаются. Если вы часто встраиваете изображения в виде URI данных, изображение на базу64 инструмент естественным образом сочетается с этим.
Насколько меньше минификация CSS делает мой файл?
Это полностью зависит от того, сколько пробелов и сколько комментариев содержит источник, но экономия реальна. Табличка стилей, написанная с щедрыми отступами и комментариями к документации, обычно сокращается на двадцать-сорок процентов, как только пробелы исчезнут. Файл, который уже был довольно компактным, будет меньше уменьшаться. Значок размера в инструменте показывает точное количество байтов до и после для вашего файла, поэтому вам никогда не придется угадывать.
Эти байты имеют значение, потому что CSS является рендер-блокировкой. браузер не будет рисовать страницу, пока он не загрузил и не проанализировал CSS в заголовке документа, поэтому каждый килобайт таблицы стилей является килобайтом между пользователем и их первым взглядом на страницу. Минификация является одним из самых дешевых результатов производительности: нет изменений кода, нет риска для поведения, только меньше байтов на проводе. Помимо минификации, gzip или сжатия Brotli на уровне сервера сокращает файл дальше, и минифицированный CSS хорошо сжимается, потому что удаление отступа оставляет значимые токены плотнее.
Минификация - близкий родственник посвященного ей произведения минификатор css делает и руководство минификатора CSS идет глубже на стороне сжатия Причина, по которой оба существуют, - удобство: иногда вы приземляетесь на форматировщик, чтобы очистить файл, и хотите минифицировать его в том же месте, а иногда вы сразу переходите к минификатору В любом случае базовый синтаксический анализ один и тот же.
Могу ли я сохранить свои комментарии и контролировать отступ?
Да обоим, и эти два варианта охватывают случаи, которые пропускает одноразмерный форматировщик Комментарии сохраняются по умолчанию при украшении, потому что, пока вы читаете и редактируете CSS, комментарии часто являются наиболее полезной частью. при минификации комментарии удаляются по умолчанию, чтобы сохранить каждый байт, но есть переключатель для их сохранения, который вы хотите, когда файл содержит заголовок лицензии или уведомление об авторских правах, которое должно сохраняться в отгруженном пакете.
Отступ - это выбор, потому что команды расходятся во мнениях, и смысл форматировщика состоит в том, чтобы положить конец разногласиям, последовательно применяя одно правило. Два пробела - это наиболее распространенное значение по умолчанию в современных внешних проектах, четыре пробела подходят кодовым базам, которые используют их в других местах, и вкладки подходят командам, которые предпочитают их для доступности или личной конфигурации. Выберите один и каждый блок в выводе следует за ним. Согласованность - это все значение: форматировщик стоит использовать именно потому, что он удаляет небольшие ручные решения, которые в противном случае перемещают файл за файлом по проекту. Более широкий случай стандартизации вашего инструмента таким образом проходит через Инструменты повышения производительности разработчик гид.
Какие бытовые проблемы на самом деле решает форматирование?
Линия из 40 000 символов, которую я открыл, - это драматический случай, но обыденные встречаются гораздо чаще. вы копируете правило из браузера и инструментов разработки #39;s, и оно поступает с вычисленным сокращением и непоследовательным интервалом, который не соответствует вашему файлу. Вы наследуете таблицу стилей от подрядчика, который никогда не запускал форматировщик, поэтому стили скобок и отступы меняются каждые несколько сотен строк. Вы вставляете фрагмент из сообщения блога или инструмент дизайна, который использует вкладки, где ваш проект использует пробелы. В каждом из них CSS работает, но не совпадает, и файл, который не совпадает, является файлом, который замедляет каждое будущее редактирование и запутывает каждый дифф.
Проведение такого файла через форматировщик нормализует все это сразу. Каждый блок получает один и тот же отступ, каждое объявление попадает в свою строку, и разница, которую вы фиксируете впоследствии, показывает только изменения, которые вы на самом деле внесли, а не бурю шума пробелов. Последний момент - это тихий выигрыш в производительности: последовательно отформатированная кодовая база создает чистые различия, а чистые различия ускоряют проверку кода и облегчают обнаружение регрессий. Форматирование не является косметическим. Именно это делает таблицу стилей разборчивой по мере ее роста, и именно поэтому каждый серьезный внешний проект в конечном итоге стандартизирует одну раскладку и обеспечивает ее соблюдение. Форматирование не является косметическим. Это то, что сохраняет таблицу стилей разборчивой по мере ее роста Инструменты повышения производительности разработчик руководство представляет собой более широкий аргумент в пользу устранения такого рода ручного трения из рабочего процесса.
Безопасно ли форматировать конфиденциальный или собственный CSS?
Да, и это преднамеренное решение дизайна, а не сноска. все анализы и форматирование происходят в JavaScript внутри вашего браузера. ни одна таблица стилей не загружается на сервер, ничего не регистрируется, и инструмент продолжает работать с вашим соединением, выключенным после загрузки страницы. Вы можете отформатировать CSS, который содержит имена внутренних классов, неизданные токены системы дизайна или структуру непоставленной функции, не покидая вашу машину.
Это имеет большее значение, чем может показаться, потому что таблица стилей может утечь намерение Имена классов и имена пользовательских свойств часто телеграфируют функции, которые еще не являются общедоступными, и структура компонента 's CSS может показать, как продукт построен. серверный форматировщик, каким бы авторитетным он ни был, является третьей стороной, которой вы передаете эту информацию. клиентский инструмент полностью удаляет вопрос. рассуждение, лежащее в основе обработки данных разработчика в браузере, а не на сервере, является предметом онлайн-инструменты конфиденциальности данных руководство, и это применимо к каждому инструменту в Инструменты кодирования сбор, а не только этот Когда конфиденциальность свободна, нет причин от нее отказываться.
Часто задаваемые вопросы
Как мне отформатировать CSS онлайн?
Вставьте свой CSS в область ввода и нажмите Beautify. инструмент анализирует таблицу стилей и переписывает ее с одним объявлением в строке и последовательным отступом. все работает в вашем браузере, поэтому ничего не загружается.
В чем разница между форматированием и минированием CSS?
Форматирование, также называемое украшением, добавляет отступы и разрывы строк, поэтому CSS читается для людей, а минирование удаляет все ненужные пробелы и комментарии, поэтому файл как можно меньше для браузеров. Этот инструмент делает и то, и другое с одного и того же входа.
Изменяет ли форматирование CSS работу моих стилей?
Нет. Украшение и минификация только изменяют пробелы и комментарии, а не правила, селекторы или значения. Браузер применяет отформатированную таблицу стилей точно так же, как он применяет оригинал.
Правильно ли он обрабатывает @media и @keyframes?
Да. Вложенные правила, такие как @media, @supports и @keyframes, анализируются как блоки, поэтому их внутренние правила отступают на один уровень глубже при украшении и сохраняются нетронутыми при минировании.
Будет ли он нарушать значения url () или строки контента?
Нет. Форматировщик оставляет внутреннюю часть цитируемых строк и значений url () точно такими, как записано, поэтому URI данных, пути к шрифтам и текст контента никогда не сворачиваются и не переставляются.
Насколько меньше минификация делает мой CSS?
Это зависит от того, сколько пробелов и сколько комментариев содержит файл, но читаемая таблица стилей обычно сокращается на двадцать-сорок процентов после удаления отпечатков и комментариев. Значок размера показывает точное изменение байта для вашего файла.
Могу ли я сохранить свои комментарии при минификации?
Да. есть переключатель для сохранения комментариев. оставьте его для наименьшего вывода или включите, когда вам нужно сохранить заголовок лицензии или примечания к автору в минифицированном файле.
Безопасно ли здесь форматировать конфиденциальный CSS?
Да. все анализы и форматирование происходят в JavaScript внутри вашего браузера. ни одна таблица стилей не отправляется на сервер, ничего не регистрируется, и инструмент работает с отключенным соединением.
выше форматтер css является бесплатным, полностью работает в вашем браузере, и не нуждается в регистрации. Украсьте таблицу стилей, чтобы прочитать ее, минифицируйте ее, чтобы отправить, и никогда больше не отлаживайте строку из 40 000 символов. Исследуйте его и остальную часть Инструменты кодирования На Toolz.dev.
