Форматиране и подреждане на CSS

Табло
Документация
API

форматира вашите CSS правила, за да бъдат четими и разбираеми, улеснявайки разработката и поддръжката

Защо да използвате CSS инструмент за форматиране?

Форматирането на CSS код е от съществено значение за разработчиците, за да поддържат чист и четим код. Този инструмент опростява процеса, като позволява CSS кодът да бъде форматиран бързо и точно, което прави поддръжката и сътрудничеството по проекти по-лесни.

Характеристики на инструмента за форматиране на CSS

Този инструмент за форматиране на CSS ви позволява да въвеждате CSS код и да го форматирате за по-добра четливост. Той премахва ненужните коментари, интервали и раздели и добавя правилен отстъп за CSS правила и свойства.

Как да използвате инструмента за форматиране на CSS

За да използвате инструмента за форматиране на CSS, следвайте тези прости стъпки:

Въведете вашия CSS код в предоставеното поле.
Щракнете върху бутона „Форматиране“. Инструментът ще форматира CSS кода за по-добра четливост.
Копирайте форматирания 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;}

Après le formatage:
тяло {
    семейство шрифтове: Arial, sans-serif;
    цвят на фона: #f0f0f0;
    марж: 0;
    подплата: 0;
}

.container {
    ширина: 80%;
    марж: 0 авто;
}

.header {
    цвят на фона: #333;
    цвят: #fff;
    подложка: 20px;
    подравняване на текст: център;
}

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

Каква е разликата между CSS форматиране, минификатор и разкрасител?

CSS форматиращ (или разкрасяващ) пренаписва компактен файл във версия с отстъп и за четене. Минификаторът прави обратното: той премахва интервали, нови редове и коментари, за да намали размера на файла, обслужван в производството. Нашият инструмент се фокусира върху форматирането: той взема минимизиран или слабо отстъпен CSS лист и го форматира отново с последователен отстъп, свойство по свойство.

Форматирането запазва ли CSS коментарите?

Коментарите /* ... */ се запазват както са по подразбиране. Коментарите за лиценза в горната част на файла (/*! ... */), както и поясненията към помощните програми (TODO, FIXME) остават непокътнати, на собствен ред. Ако искате да ги премахнете, за да създадете производствен файл, използвайте вместо това специален минификатор.

Поддържат ли се префикси на доставчици (-webkit-, -moz-)?

да Префиксите на доставчици се третират като обикновени свойства: те са отстъпени и подравнени с останалата част от блока. Форматиращият не генерира или премахва префикси: той просто форматира предоставеното. За автоматично добавяне на липсващи префикси използвайте Autoprefixer във вашия конвейер за изграждане.

Формататорът обработва ли медийни заявки и вложени правила?

да @media, @supports, @keyframes и други at-правила са с отстъп, като техните правила са вложени в скобите. Нативното CSS влагане (& в родителско правило) също се разпознава и форматира правилно, като SCSS или по-малко блокове, съвместими със стандартния CSS синтаксис.

Мога ли да форматирам SCSS, Less или Stylus?

Инструментът е насочен към стандартен CSS. Разширените синтаксиси (SCSS миксини, по-малко променливи с @, синтаксис без фигурни скоби) не се разбират от анализатора и могат да доведат до влошен резултат. За тези езици вместо това използвайте 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