Перейти до вмісту
TextArray
100% локально

Формат CSS

Прикрасьте скорочений або брудний CSS у чисті правила з відступами, які можна читати.

Введення
Вихід

Формат CSS

Вставте скорочений або заплутаний вручну CSS, і цей засіб форматування розширить його в чисту, читабельну таблицю стилів: одне оголошення на рядок, селектор і його відкриваюча дужка в одному рядку, закриваюча дужка окремо та порожній рядок між правилами верхнього рівня. Вкладені блоки, такі як @media, @supports і вкладені селектори, мають відступ на один рівень глибше, тому структура аркуша стає очевидною з першого погляду.

Інструмент читає ваш CSS символ за символом, а не розбиває його на наївні шаблони, тому він ніколи не порушує складний вміст. Рядки зберігають свій точний вміст, тому вміст: "a{b}" зберігається з дужками всередині нього. Тіла url() копіюються дослівно, тож URI даних із власними крапками з комою та двокрапками — url(data:image/png;base64,...) — залишається повністю окремим. Коментарі залишаються слово в слово на окремому рядку на поточному відступі.

Три варіанти налаштування виходу. Відступ перемикається між двома пробілами, чотирма пробілами або табуляцією. Один селектор на рядок поміщає кожен селектор списку коми в окремий рядок, що зручно для довгих згрупованих правил і чистіших відмінностей. Порожній рядок між правилами можна вимкнути, якщо потрібно зробити аркуш більш компактним. Підрахунок у реальному часі підраховує правила, оголошення та вихідні рядки під час введення, причому кількість правил підсвічується.

Це аналог мініфікатора CSS: використовуйте його, щоб знову зробити стислий робочий файл доступним для редагування, переформатувати неузгоджений код кількох авторів або просто прочитати таблицю стилів, яку ви не писали. Усе працює повністю у вашому браузері — ваш CSS ніколи нікуди не завантажується.

FAQ

Чи змінює це мої значення CSS або назви властивостей?
Ні. Він лише додає та нормалізує пробіли та розриви рядків. Селектори, властивості, значення, кольори, одиниці вимірювання, тіла url() і коментарі зберігаються точно так, як написано.
Чи фігурні дужки всередині рядків або url() порушать форматування?
Ні. Сканер символів відстежує рядок, коментар і стан url(), тому вміст: "a{b}" і url(data:...;base64,...) копіюються дослівно й ніколи не розглядаються як структура.
Що робить "Один селектор на рядок"?
Він розміщує кожен селектор списку, розділеного комами, в окремому рядку, тому h1, h2, h3 стає трьома рядками над відкриваючою дужкою. Коми всередині :is() або селекторів атрибутів ніколи не розділяються.
Чи можна виправити недійсний CSS?
Він форматує якнайкраще та ніколи не створює помилок у разі несправного введення, але не перевіряє та не відновлює ваш CSS. Відсутні дужки або випадкові символи розміщуються так добре, як це дозволяє їх структура.
Чи завантажено кудись мій CSS?
Ні. Форматування повністю виконується у вашому браузері, і ваш CSS ніколи не залишає ваш пристрій.