Форматер CSS
Форматуйте мінімізовані або неохайні таблиці стилів за допомогою цього форматера CSS. Вставте CSS, і інструмент проаналізує його, а потім виведе кожне правило із селектором в одному рядку, кожне оголошення — в окремому рядку з відступом у два пробіли, пробіл після кожної двокрапки, пробіли навколо комбінаторів і вкладені at-правила, як-от медіазапити. Про помилки аналізу буде повідомлено. Ідеально для веброзробників і дизайнерів, які читають, налагоджують або перевіряють таблиці стилів із будь-якого джерела.
Поширені запитання
Як працює форматер CSS?
Він аналізує таблицю стилів на правила, оголошення та at-правила, а потім виводить їх знову в узгодженому форматі. Оскільки CSS аналізується, результат відображає фактичну структуру таблиці стилів.
Як виглядає відформатований CSS?
Кожне правило починається із селектора та відкривної фігурної дужки. Кожне оголошення розміщується на окремому рядку з відступом у два пробіли та пробілом після двокрапки, а закривна дужка — на власному рядку. Списки селекторів об’єднуються комою та пробілом, а навколо комбінаторів, як-от > і ~, ставляться пробіли.
Чи підтримуються медіазапити та інші at-правила?
Так, правила всередині @media, @supports та подібних блоків вкладено й відформатовано з відступами. Інструкції на кшталт @import залишаються в одному рядку, а значення url() записуються в лапках.
Що відбувається з некоректним CSS?
Якщо парсер не може прочитати таблицю стилів, наприклад через пропущену фігурну дужку, інструмент зупиняється та показує повідомлення парсера з номером рядка. Виправте вказане місце й відформатуйте ще раз.
Коментарі зберігаються?
Так, коментарі зберігаються як між правилами, так і між оголошеннями. Кожен коментар розміщується на окремому рядку з відступом, що відповідає навколишньому коду.
Чи підтримуються користувацькі властивості?
Так, користувацькі властивості, як-от --brand-color, форматуються так само, як будь-яке інше оголошення. Посилання, як-от var(--brand-color), зберігаються без змін.
Чи можна тут форматувати SCSS або Less?
Ні, ця сторінка призначена для звичайного CSS, тому вкладені правила або змінні з препроцесорів можуть не підтримуватися. Для таких файлів скористайтеся форматувальником SCSS або Less.
Чи можна змінити відступи або стиль дужок?
Ні, у форматувальника немає налаштувань: він завжди використовує два пробіли, а відкривну дужку ставить у рядку селектора. Завдяки цьому результат однаковий для кожної таблиці стилів.
Чому результат обрамлено блоком коду css?
Результат повертається як блок коду Markdown із позначкою css, тож у Markdown він відображається з підсвічуванням синтаксису. Скопіюйте рядки між роздільниками у свій файл .css.
Якого максимального розміру може бути моя таблиця стилів?
До 5 MB за один запуск; більший вхідний файл відхиляється з повідомленням. Результат ідентичний опції CSS у форматувальнику коду.