CSS Formatter

Форматування чи мінімізація CSS, сортування властивостей і переведення px у rem — просто в браузері.

Про CSS Formatter

Що це

CSS Formatter робить таблицю стилів читабельною або компактною. Він розставляє відступи, може сортувати властивості за абеткою чи в порядку box model, переводить значення px у rem і зводить усі кольори до одного формату. Під час роботи інструмент ще й перевіряє CSS і зупиняється на незбалансованих дужках чи зламаному оголошенні, а не видає хибний результат.

Основні можливості

  • Форматування з відступом у 2 чи 4 пробіли або мінімізація в один рядок.
  • Сортування властивостей: за абеткою або логічне, у порядку box model.
  • px → rem із власним базовим розміром шрифту.
  • Усі кольори в одному форматі: HEX, RGB/RGBA чи HSL.
  • Фільтр за селектором, що лишає лише потрібні блоки.
  • Помилки для незбалансованих фігурних дужок, оголошення без «властивість: значення» та порожнього значення.

Як користуватися

  1. Вставте CSS у редактор, відкрийте файл .css або натисніть «Приклад».
  2. Оберіть «Форматувати» чи «Мінімізувати» та відступ.
  3. За потреби задайте сортування властивостей, px → rem і формат кольорів.
  4. Скопіюйте результат або надішліть його в інший інструмент.

Коли корисно

  • Прочитати мінімізований CSS сайту чи бібліотеки.
  • Упорядкувати таблицю стилів перед code review.
  • Перевести дизайн із px у rem за один раз.

Конфіденційність та обмеження

Ваші дані

Ваш CSS обробляється в браузері й не надсилається на сервер — сайт отримує лише анонімну подію «інструмент відкрито», без вмісту. Результат, надісланий в інший інструмент, зберігається на цьому пристрої 24 години в «Останніх діях». Посилання «Поділитися» містить CSS у самій адресі, тож надсилайте його лише тим, кому довіряєте.

Обмеження

  • Інструмент працює зі звичайним CSS; SCSS, Less та інші препроцесори не підтримуються.
  • Помилка зупиняє результат: виправте місце, на яке вона вказує, і результат з'явиться знову.

Поширені запитання

Що робить логічне сортування?

Групує властивості в сталому порядку: спершу позиціонування, далі display, розміри, margin і padding, потім типографіка, кольори, фон і рамки, а анімації — наприкінці. Пов'язані властивості опиняються поруч.

Як px переводиться в rem?

Кожне значення px ділиться на базовий розмір шрифту — типово 16, тож 24px стає 1.5rem. Змініть базовий розмір, якщо кореневий шрифт у вас інший.

Чому замість відформатованого CSS з'являється помилка?

Інструмент знайшов те, що не може безпечно прочитати, — пропущену дужку, оголошення без двокрапки чи властивість без значення. Виправлення в цьому місці дасть правильний результат, а не здогад.