CDRN

Форматувати та робити відступи у CSS

  • Панель керування
  • Документація
  • API
форматує ваші CSS-правила для зручного читання та розуміння, полегшуючи розробку та обслуговування

Навіщо використовувати інструмент форматування CSS?

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

Характеристики інструменту форматування CSS

Цей інструмент форматування CSS дозволяє вводити CSS-код і форматувати його для кращої читабельності. Він видаляє коментарі, зайві пробіли та табуляції, і додає відповідний відступ для CSS-правил і властивостей.

Як користуватися інструментом форматування CSS

Для використання інструменту форматування CSS виконайте ці прості кроки:

  1. Введіть ваш CSS-код у відведене поле.
  2. Натисніть кнопку "Форматувати". Інструмент форматує CSS-код для кращої читабельності.
  3. Скопіюйте відформатований CSS-код для використання у ваших проектах.

Приклад використання інструменту форматування CSS

Ось приклад CSS-коду до і після форматування: 


До форматування:
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

Після форматування:
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Часті запитання

В чому різниця між форматером CSS, мінімізатором та beautifier?

Форматер CSS (або beautifier) переписує компактний файл у версію з відступами та читабельну. Мінімізатор робить зворотне: він видаляє пробіли, переноси рядків і коментарі для зменшення розміру файлу, що обслуговується у виробництві. Наш інструмент зосереджується на форматуванні: він бере мінімізований або погано виділений CSS-файл і переформатовує його з узгодженими відступами, властивість за властивістю.

Чи зберігає форматування коментарі CSS?

Коментарі /* ... */ зберігаються як є за замовчуванням. Коментарі ліцензії на початку файлу (/*! ... */), а також корисні анотації (TODO, FIXME) залишаються незмінними на власному рядку. Якщо ви хочете їх видалити для виробничого файлу, скористайтеся спеціальним мінімізатором.

Чи обробляються вендорні префікси (-webkit-, -moz-)?

Так. Вендорні префікси обробляються як звичайні властивості: вони мають відступи та вирівнюються з рештою блоку. Форматер не генерує і не видаляє префікси: він лише форматує те, що надається. Для автоматичного додавання відсутніх префіксів використовуйте Autoprefixer у конвеєрі збірки.

Чи обробляє форматер media queries та вкладені правила?

Так. @media, @supports, @keyframes та інші at-rules мають відступи з вкладеними правилами всередині дужок. Нативне вкладення CSS (& у батьківському правилі) також розпізнається і правильно форматується, як і блоки SCSS або Less, сумісні зі стандартним синтаксисом CSS.

Чи можна форматувати SCSS, Less або Stylus?

Інструмент орієнтований на стандартний CSS. Розширені синтаксиси (mixins SCSS, змінні Less з @, синтаксис без дужок Stylus) не розуміються парсером і можуть виробляти погіршений результат. Для цих мов використовуйте натомість sass --style=expanded, lessc або спеціальний форматер, такий як Prettier з відповідним плагіном.

Чи перевіряє форматер синтаксис CSS?

Форматер виконує мінімальний синтаксичний аналіз: він виявляє блоки, селектори і декларації. Він повідомляє про грубі помилки (незакрита дужка, відсутня крапка з комою в кінці блоку), але не перевіряє назви властивостей чи значення. Для повної валідації використовуйте службу W3C CSS Validator.

Приклад запиту

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Схема вхідних даних

Поле Тип Обов'язкове За замовчуванням
input text ✓ –

Точки доступу

  • GET https://cdrn.fr/api/v1/tools - перелічує всі доступні інструменти
  • GET https://cdrn.fr/api/v1/tools/css-formatter - отримує схему цього інструменту
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - виконує цей інструмент з JSON-payload