Перейти до основного вмісту
LibraTool logoLibraTool

Форматувальник CSS — безкоштовно

Форматуйте мінімізований CSS з однаковими відступами або мінімізуйте його. Додаткове сортування властивостей за абеткою для передбачуваних відмінностей.

Працює офлайн після завантаження

Перетягніть файл сюди або натисніть, щоб вибрати

CSS · обробляється на вашому пристрої

або натисніть Ctrl+V, щоб вставити з буфера обміну

Вибрати файли
Відформатований CSS
Результат з'явиться тут…

Типові застосування

  • Відладка CSS виробництваПереглядайте мініміфіковану CSS з сайтів виробництва у читаному форматі, щоб знайти та зробити зворотний інжиніринг стилів.
  • Забезпечення стилю CSS командиЗапустіть CSS, надіслану командою, через послідовний beautifier, щоб diff був про вміст, а не форматування.
  • Форматування CSS з префіксом постачальникаCSS з префіксом постачальника (вихід autoprefixer) часто має багато варіантів -webkit-, -moz-, -ms-. Форматуйте для перевірки.
  • Вивчення професійного CSSВивчайте CSS із відомих систем дизайну, форматуючи їхні скомпільовані дані.
  • Форматування CSS для звітів про помилкиПід час подачі звітів про помилки CSS форматований CSS набагато легше читати та розуміти для рецензентів.

Як це працює

Інструмент форматує CSS власноруч написаним рекурсивним парсером, вбудованим прямо в сторінку, — без сторонніх бібліотек і звернень до сервера. Парсер проходить CSS символ за символом, правильно обробляючи рядки в лапках, значення url(), вкладені at-правила й коментарі, які заплутали б простіші підходи на регулярних виразах.

  1. 1
    Токенізація на рівні символів
    Функція walkCss сканує сире введення по одному символу, відстежуючи стан лапок і глибину дужок, тож крапки з комою чи фігурні дужки всередині url(), рядкових значень чи коментарів ніколи не сприймаються як структурні роздільники.
  2. 2
    Розділення блоків і оголошень
    Коли сканер знаходить відкривальну фігурну дужку верхнього рівня, він витягує прелюдію (селектор чи ключове слово at-правила) і рекурсивно обробляє тіло блоку — яке саме може містити вкладені правила (@media, @supports, нативне вкладення CSS), що обробляються на глибшому рівні рекурсії.
  3. 3
    Сортування властивостей і відступи
    Оголошення в кожному блоці збираються в групу, а потім за бажанням сортуються за алфавітом назв властивостей, перш ніж виводитися з вибраною шириною відступу (2 або 4 пробіли). Режим мініфікації повністю пропускає пробіли й прибирає коментарі.
  4. 4
    Миттєвий результат у браузері
    Результати з’являються під час введення через хук useMemo — нічого нікуди не надсилається. Відформатований чи мініфікований CSS можна скопіювати в буфер обміну або завантажити як файл .css, а панель показує різницю в розмірі порівняно з оригіналом.

Схожі інструменти

🌐

Форматувальник і мініфікатор HTML

Красиво форматуйте або мінімізуйте HTML із правильними відступами вкладеності. Зберігає вміст усередині блоків <pre>, <script>, <style>.

Спробувати
🗄️

Форматувальник SQL

Красиво форматуйте SQL-запити з правильними відступами, налаштовуваним регістром ключових слів та переносами на основних конструкціях. Працює з будь-яким діалектом SQL.

Спробувати
🗜️

Мініфікатор та форматувальник CSS

Мінімізуйте CSS для зменшення розміру файлу або форматуйте мінімізований CSS для читабельності. Миттєво, у вашому браузері.

Спробувати

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