CSS Beautifier и форматтер онлайн
Мгновенно форматируйте, разуменьшайте и систематизируйте беспорядочные или сжатые таблицы стилей CSS в режиме реального времени. Наш форматтер CSS на конечном автомате точно выполняет отступы вложенных запросов @media, @keyframes, переменных CSS (--var), URL-адресов https:// и встроенных URL-адресов. URI данных SVG — и включает CSS Minifier одним щелчком мыши, когда вы готовы к отправке в производство.
Как украсить и отменить минимизацию CSS онлайн
- Вставьте свой CSS: Вставьте сжатый
.min.cssили беспорядочную таблицу стилей в редактор Input CSS слева или нажмите Загрузить образец для проверки вложенности@mediaзапросы, переменные и URL-адреса. - Выберите Preset или настройте параметры: Выберите 2 пробела, 4 пробела, Очистить и сортировать A–Z или Свернуть (.min.css) на панели быстрого доступа Presets или настройте отступ, размещение фигурных скобок, разделение селектора и сжатие цвета справа.
- Проверьте статистику в реальном времени: Наблюдайте за тем, как счетчики Input, Output, Rules и Lines обновляются сразу же после ввода или переключения параметров.
- Скопировать или загрузить: Нажмите Копировать в clipboard или Загрузите .css, чтобы сохранить отформатированную таблицу стилей как
styles.beautified.css(илиstyles.min.cssв режим Minify).
CSS Объяснение параметров форматирования и оптимизации
| Вариант | Что он делает | До | После |
|---|---|---|---|
| Уменьшение размера и отступ | Расширяет однострочные правила и вложенные блоки @media / @keyframes с помощью 2, 4 или 8 пробелов или табуляции. |
@media(max-width:768px){.box{width:100%}} |
@media (макс. ширина: 768 пикселей) { |
| Один селектор на строку | Разбивает списки селекторов, разделенные запятыми, на отдельные строки, игнорируя запятые внутри :is() или :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Сжать значения цвета | Преобразует rgb() и 6-значные коды hex в 3-значные коды hex внутри любого значения объявления, сохраняя при этом окружающие токены. |
граница: 1 пиксель сплошная rgb(255, 0, 0); |
граница: сплошная 1 пиксель #f00; |
| Свойства сортировки (A–Z) | Располагает объявления внутри каждого блока по алфавиту, чтобы стандартизировать проверки кода и выявить повторяющиеся свойства. | z-индекс: 5; дисплей: гибкий; выровнять-элементы: по центру; |
align-элементы: центр; |
Зачем использовать конечный автомат CSS Beautifier?
Многие простые онлайн-форматеры CSS разделяют код на каждое двоеточие (:), точку с запятой (;) или скобку (}). Этот подход перестает работать, как только ваша таблица стилей включает современные функции CSS, такие как:
- Вложенные правила и встроенные CSS Вложенность:
@mediaзапросы,@supportsзапросы функций,@ключевые кадрыанимации,@layerблоки и вложенные дочерние элементы селекторы требуют многоуровневого отслеживания отступов. - Внешние URL-адреса и встроенные URI данных SVG: Свойства, такие как
background: url("https://...")илиurl("data:image/svg+xml;utf8,содержит двоеточия и точки с запятой, которые никогда не следует разделять как разделители свойств CSS.") - Строки содержимого псевдоэлемента: Объявления типа
content: «Элемент: 1; Статус: OK»сохраняют свои точные внутренние символы и пробелы нетронутыми. - W3C — Точное сокращение цвета: Именованные цвета сокращаются только в том случае, если эквивалент hex строго короче и идентичен в спецификации CSS (например,
white→#fffиblack→#000, оставивgreenкакgreen, поскольку#008000длиннее, а#0f0на самом делелайм).
Часто задаваемые вопросы
Как отменить минимизацию файла .min.css онлайн?
Вставьте сжатый код .min.css в поле Input CSS слева. Инструмент автоматически анализирует селекторы, объявления, запросы @media и @keyframes в многострочные CSS с четкими отступами в реальном времени.
Поддерживает ли этот CSS beautifier запросы @media, URI @keyframes и data:?
Да. В отличие от простых форматировщиков на основе разделения, этот инструмент использует синтаксический анализатор CSS с конечным автоматом, который сохраняет вложенные блоки (@media, @supports, @keyframes, @layer и собственный CSS). вложение), а также двоеточия и точки с запятой внутри URI url("https://..."), data:image/svg+xml и строк content в кавычках.
Безопасно ли сортировать свойства CSS в алфавитном порядке?
Сортировка по алфавиту упрощает просмотр больших правил и помогает обнаружить повторяющиеся объявления. Однако если правило основано на сокращенном свойстве, за которым следует более конкретное переопределение (или наоборот, например, background-color вместо background), изменение порядка объявления может изменить то, какое свойство выиграет. Включите сортировку, если ваши правила не зависят от порядка переопределения сокращений.
Могу ли я также использовать minify CSS с помощью этого инструмента?
Да. Нажмите кнопку Minify CSS (или выберите Minify (Single-Line .min.css) на панели настроек), чтобы удалить комментарии, пробелы и конечные точки с запятой и сжать значения цвета в компактную рабочую таблицу стилей.
Загружен ли мой код CSS на какой-либо сервер?
Нет. Все форматирование и минификация CSS выполняются на 100% локально в вашем браузере с использованием JavaScript. Ваши таблицы стилей никогда не покидают ваш компьютер.