Formatēt un atkāpt CSS
- Vadības panelis
- Dokumentācija
- API
Kāpēc izmantot CSS formatēšanas rīku?
CSS koda formatēšana ir būtiska, lai izstrādātāji uzturētu tīru un lasāmu kodu. Šis rīks vienkāršo procesu, ļaujot ātri un precīzi formatēt CSS kodu, atvieglojot apkopi un sadarbību projektos.
CSS formatēšanas rīka funkcijas
Šis CSS formatēšanas rīks ļauj ievadīt CSS kodu un formatēt to labākai lasāmībai. Tas noņem nevajadzīgus komentārus, atstarpes un cilnes, kā arī pievieno pareizu atkāpi CSS kārtulām un rekvizītiem.
Kā lietot CSS formatēšanas rīku
Lai izmantotu CSS formatēšanas rīku, veiciet šīs vienkāršās darbības:
- Norādītajā laukā ievadiet savu CSS kodu.
- Noklikšķiniet uz pogas Formatēt. Rīks formatēs CSS kodu labākai lasāmībai.
- Nokopējiet formatēto CSS kodu, lai to izmantotu savos projektos.
CSS formatēšanas rīka izmantošanas piemērs
Šeit ir CSS koda piemērs pirms un pēc formatēšanas:
Pirms formatēšanas:
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;
Pēc formatēšanas:
body {
fontu saime: Arial, sans-serif;
fona krāsa: #f0f0f0;
piemale: 0;
polsterējums: 0;
}
.container {
platums: 80%;
piemale: 0 auto;
}
.header {
fona krāsa: #333;
krāsa: #fff;
polsterējums: 20 pikseļi;
teksta līdzināšana: centrs;
}
Bieži uzdotie jautājumi
Kāda ir atšķirība starp CSS formatētāju, minifikatoru un skaistumkopšanas līdzekli?
CSS formatētājs (vai izdaiļotājs) pārraksta kompaktu failu atkāpes un lasāmā versijā. Minifikators darbojas pretēji: tas noņem atstarpes, jaunas rindiņas un komentārus, lai samazinātu ražošanā rādītā faila lielumu. Mūsu rīks ir vērsts uz formatēšanu: tiek izmantota samazināta vai vāji ievilkta CSS lapa un atkārtoti formatēta tā ar konsekventu atkāpi pa rekvizītiem.
Vai formatējot tiek saglabāti CSS komentāri?
/* ... */ komentāri tiek saglabāti tādi, kādi tie ir pēc noklusējuma. Licences komentāri faila augšdaļā (/*! ... */), kā arī utilītu anotācijas (TODO, FIXME) paliek neskarti savā rindā. Ja vēlaties tos noņemt, lai izveidotu ražošanas failu, tā vietā izmantojiet īpašu miniatūru.
Vai tiek atbalstīti pakalpojumu sniedzēja prefiksi (-webkit-, -moz-)?
Jā. Pārdevēja prefiksi tiek uzskatīti par parastajiem rekvizītiem: tie ir ievilkti un saskaņoti ar pārējo bloku. Formatētājs neģenerē un nenoņem prefiksus: tas vienkārši formatē to, kas tiek nodrošināts. Lai automātiski pievienotu trūkstošos prefiksus, savā būvēšanas konveijerā izmantojiet Autoprefixer.
Vai formatētājs apstrādā multivides vaicājumus un ligzdotās kārtulas?
Jā. @media, @supports, @keyframes un citas at-kārtulas ir ievilktas ar atkāpi, un to kārtulas ir ligzdotas iekavās. Vietējā CSS ligzdošana (& vecākkārtulā) arī tiek atpazīta un pareizi formatēta, piemēram, SCSS vai Less bloki, kas ir saderīgi ar standarta CSS sintaksi.
Vai es varu formatēt SCSS, Less vai Stylus?
Rīka mērķis ir standarta CSS. Paplašinātās sintakses (SCSS mixins, mazāk mainīgo ar @, sintakse bez Stylus iekavām) parsētājs nesaprot un var radīt pasliktinātu rezultātu. Šīm valodām izmantojiet sass --style=expanded, lessc vai īpašu formatētāju, piemēram, Prettier ar pareizo spraudni.
Vai formatētājs apstiprina CSS sintaksi?
Formatētājs veic minimālu sintaktisko analīzi: identificē blokus, atlasītājus un deklarācijas. Tas ziņo par rupjām kļūdām (neaizvērta iekava, trūkst semikola bloka beigās), bet nepārbauda rekvizītu nosaukumus vai vērtības. Lai veiktu pilnīgu validāciju, izmantojiet W3C CSS Validator pakalpojumu.
Pieprasījuma piemērs
curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
-H "Content-Type: application/json" \
-d '{"input":"..."}'Ievades shēma
| Lauks | Tips | Obligāts | Noklusējums |
|---|---|---|---|
input |
text | ✓ | – |
Endpoint
GET https://cdrn.fr/api/v1/tools- uzskaita visus pieejamos rīkusGET https://cdrn.fr/api/v1/tools/css-formatter- iegūst šī rīka shēmuPOST https://cdrn.fr/api/v1/tools/css-formatter/execute- izpilda šo rīku ar JSON payload