Форматувальник використовує сканер, що враховує синтаксис, а не ділить текст навмання за фігурними дужками й крапками з комою. Він відстежує рядки, коментарі, функції, селектори атрибутів і вкладені блоки. Тому розділові знаки всередині URL або значення в лапках залишаються без змін.
Форматування CSS онлайн
Працює повністю у вашому браузері - без завантаження на сервер і без реєстрації.
Вхідний CSS
Відформатований CSS
Вставте CSS для форматування
Як відформатувати CSS онлайн?
Форматувальник CSS перетворює мінімізовану таблицю стилів або код із нерівними відступами на читабельний текст із послідовними переносами рядків. Вставте CSS, виберіть два пробіли, чотири пробіли або табуляцію, а потім скопіюйте чи завантажте результат. Обробка відбувається в браузері та зберігає коментарі, рядки в лапках, URL даних і порядок оголошень.
Як користуватися
- 1Вставте CSS. Додайте в поле введення таблицю стилів, блок селекторів або фрагмент мінімізованого CSS.
- 2Виберіть відступи. Укажіть два пробіли, чотири пробіли або табуляцію. Результат оновлюється під час введення.
- 3Перевірте стан. Перегляньте показники структури або виправте вказаний непарний роздільник, незакритий коментар чи рядок.
- 4Скопіюйте або завантажте. Скопіюйте відформатований CSS у буфер обміну або збережіть файл як formatted.css.
Кому це знадобиться
- Фронтенд-розробникам, які розгортають виробничий CSS, щоб його було зручніше читати й налагоджувати.
- Рецензентам коду, які вирівнюють відступи перед порівнянням скопійованої таблиці стилів або фрагмента запиту на злиття.
- Студентам, яким потрібно чіткіше побачити вкладені медіазапити, селектори та блоки оголошень.
- Командам підтримки й тестування, які впорядковують CSS з інструментів розробника перед додаванням до задачі або сценарію відтворення.
Часті запитання
Форматувальник CSS безкоштовний?
Так. Можна форматувати стільки CSS, скільки здатен комфортно опрацювати браузер. Обліковий запис і встановлення не потрібні, обмежень на кількість запусків немає, а результат з'являється одразу.
Мій CSS надсилається на сервер?
Ні. Форматування виконується локально в браузері. Вставлений CSS залишається в редакторі сторінки та не передається жодному API, тому тут можна працювати зі стилями приватних проєктів.
Який обсяг CSS можна відформатувати?
Інструмент не встановлює фіксованої межі символів. Для дуже великих згенерованих таблиць стилів важливі пам'ять і швидкодія пристрою, але звичайні стилі сайтів, компонентів та електронних листів обробляються миттєво.
Форматування змінює роботу CSS?
Змінюються лише пробіли та переноси рядків. Селектори, оголошення, коментарі, рядки в лапках і їхній порядок зберігаються. Перевірте результат перед публікацією, особливо якщо застосовано експериментальний синтаксис або незвичні escape-послідовності, чутливі до пробілів.
Інструмент перевіряє властивості CSS?
Ні. Він перевіряє парність фігурних, квадратних і круглих дужок, а також закриття коментарів і рядків. Чи правильні окремі властивості, значення або можливості браузера, слід перевіряти стандартним валідатором CSS.
Чи можна форматувати медіазапити та вкладений CSS?
Так. Блоки всередині правил @media, @supports, @container, @layer і @keyframes отримують відступ відповідно до глибини вкладення. Сучасні вкладені селектори також форматуються без зміни рядків та аргументів функцій.