# Форматер 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 у форматувальнику коду.

Ваша реклама тут?

[Напишіть нам електронною поштою](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набір плагінів для роботи з агентами для WordPress.](https://sleekwp.com/?ref=oneclickpro)