CDRN

Formatuoti ir įtraukti CSS

  • Skydelis
  • Dokumentacija
  • API
formatuoja jūsų CSS taisykles, kad jas būtų galima skaityti ir suprasti, palengvindamas kūrimą ir priežiūrą

Kodėl verta naudoti CSS formatavimo įrankį?

CSS kodo formatavimas yra būtinas, kad kūrėjai galėtų išlaikyti švarų ir skaitomą kodą. Šis įrankis supaprastina procesą, nes leidžia greitai ir tiksliai suformatuoti CSS kodą, todėl priežiūra ir bendradarbiavimas projektuose yra lengvesnis.

CSS formatavimo įrankio ypatybės

Šis CSS formatavimo įrankis leidžia įvesti CSS kodą ir suformatuoti jį, kad būtų geriau skaitoma. Tai pašalina nereikalingus komentarus, tarpus ir skirtukus bei prideda tinkamą įtrauką CSS taisyklėms ir ypatybėms.

Kaip naudotis CSS formatavimo įrankiu

Norėdami naudoti CSS formatavimo įrankį, atlikite šiuos paprastus veiksmus:

  1. Įveskite savo CSS kodą pateiktame lauke.
  2. Spustelėkite mygtuką „Formatuoti“. Įrankis suformatuos CSS kodą, kad būtų geriau skaitomas.
  3. Nukopijuokite suformatuotą CSS kodą, kurį naudosite savo projektuose.

CSS formatavimo įrankio naudojimo pavyzdys

Štai CSS kodo pavyzdys prieš ir po formatavimo: 


Prieš formatavimą:
kūno

Po formatavimo:
kūnas {
    šriftų šeima: Arial, sans-serif;
    fono spalva: #f0f0f0;
    paraštė: 0;
    paminkštinimas: 0;
}

.container {
    plotis: 80%;
    paraštė: 0 automatinis;
}

.header {
    fono spalva: #333;
    spalva: #fff;
    pamušalas: 20px;
    teksto lygiavimas: centre;
}

Dažnai užduodami klausimai

Kuo skiriasi CSS formatavimo priemonė, miniatiūra ir gražintuvas?

CSS formatuotojas (arba gražintuvas) perrašo kompaktišką failą į įtrauktą ir skaitomą versiją. Minifier veikia priešingai: pašalina tarpus, naujas eilutes ir komentarus, kad sumažintų gamyboje pateikiamo failo dydį. Mūsų įrankyje pagrindinis dėmesys skiriamas formatavimui: jis paima sumažintą arba prastai įtrauktą CSS lapą ir iš naujo suformatuoja jį nuosekliai įtraukiant, po savybę.

Ar formatuojant išsaugomi CSS komentarai?

/* ... */ komentarai išsaugomi tokie, kokie yra pagal numatytuosius nustatymus. Licencijos komentarai failo viršuje (/*! ... */) ir naudingumo komentarai (TODO, FIXME) lieka nepakitę savo eilutėje. Jei norite juos pašalinti, kad sukurtumėte gamybinį failą, naudokite tam skirtą miniatiūriklį.

Ar palaikomi tiekėjo priešdėliai (-webkit-, -moz-)?

Taip. Pardavėjo priešdėliai traktuojami kaip įprastos savybės: jie yra įtraukiami ir sulygiuoti su likusia bloko dalimi. Formatuotojas negeneruoja ir nepašalina priešdėlių: jis tiesiog formatuoja tai, kas pateikiama. Jei norite automatiškai pridėti trūkstamus priešdėlius, kūrimo konvejeryje naudokite Autoprefixer.

Ar formatuotojas apdoroja medijos užklausas ir įdėtas taisykles?

Taip. @media, @supports, @keyframes ir kitos at-taisyklės yra įtrauktos, o jų taisyklės yra įdėtos skliaustuose. Vietinis CSS įdėjimas (& pirminėje taisyklėje) taip pat atpažįstamas ir tinkamai suformatuotas, pavyzdžiui, SCSS arba Mažiau blokai, suderinami su standartine CSS sintaksė.

Ar galiu formatuoti SCSS, Less arba Stylus?

Įrankis skirtas standartiniam CSS. Išplėstinės sintaksės (SCSS maišytuvai, mažiau kintamųjų su @, sintaksė be rašiklio skliaustų) analizatoriaus nesupranta ir gali sukelti pablogintą rezultatą. Šioms kalboms vietoj to naudokite sass --style=expanded, lessc arba tam skirtą formatavimo priemonę, pvz., „Prettier“ su tinkamu papildiniu.

Ar formatavimo priemonė patvirtina CSS sintaksę?

Formatuotojas atlieka minimalią sintaksinę analizę: identifikuoja blokus, selektorius ir deklaracijas. Jis praneša apie dideles klaidas (neuždarytas skliaustas, trūksta kabliataškio bloko pabaigoje), bet nepatvirtina savybių pavadinimų ar verčių. Norėdami visiškai patvirtinti, naudokite W3C CSS Validator paslaugą.

Užklausos pavyzdys

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Įvesties schema

Laukas Tipas Privalomas Numatytasis
input text ✓ –

Galiniai taškai

  • GET https://cdrn.fr/api/v1/tools - išvardija visus galimus įrankius
  • GET https://cdrn.fr/api/v1/tools/css-formatter - gauna šio įrankio schemą
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - vykdo šį įrankį su JSON payload