Към основното съдържание
LibraTool logoLibraTool

Разкрасяване на CSS — безплатно

Форматирайте минимизиран CSS с последователни отстъпи или го минимизирайте. По избор сортиране на свойствата по азбучен ред за предвидими разлики.

Работи офлайн след зареждане

Пуснете файл тук или щракнете, за да изберете

CSS · обработва се на вашето устройство

или натиснете Ctrl+V, за да поставите от клипборда

Преглед на файлове
Форматиран CSS
Изходът ще се появи тук…

Често срещани употреби

  • Отстранявляне на грешки CSS производствоПреглед минифицирани CSS от производни уеб сайтове в четив формат, за да намерите и обратен-инженер оформление.
  • Налагане на CSS стил на екипаУправлявайте CSS предложен от екипа чрез последователен обичайник, за да са различията в съдържанието, а не форматирането.
  • Форматирайте CSS с префикс на доставчикаCSS с префикс на доставчика (autoprefixer изход) често има много -webkit-, -moz-, -ms- варианти. Форматирайте, за да проверите.
  • Научете от Pro 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 за четимост. Мигновено, в браузъра ви.

Опитайте

Често задавани въпроси