CDRN

Muotoile ja sisennä CSS

  • Hallintapaneeli
  • Dokumentaatio
  • API
muotoilee CSS-säännöt tehden niistä luettavia ja ymmärrettäviä, helpottaen kehitystä ja ylläpitoa

Miksi käyttää CSS-muotoilutyökalua?

CSS-koodin muotoilu on kehittäjille välttämätöntä puhtaan ja luettavan koodin ylläpitämiseksi. Tämä työkalu yksinkertaistaa prosessia sallimalla CSS-koodin nopean ja tarkan muotoilun, mikä helpottaa ylläpitoa ja yhteistyötä projekteissa.

CSS-muotoilutyökalun ominaisuudet

Tämän CSS-muotoilutyökalun avulla voit syöttää CSS-koodia ja muotoilla sen luettavuuden parantamiseksi. Se poistaa tarpeettomat kommentit, välilyönnit ja sarkaimet sekä lisää asianmukaisen sisennyksen CSS-säännöille ja -ominaisuuksille.

Miten käyttää CSS-muotoilutyökalua

Käytä CSS-muotoilutyökalua seuraamalla näitä yksinkertaisia vaiheita:

  1. Syötä CSS-koodisi sille varattuun kenttään.
  2. Napsauta "Muotoile"-painiketta. Työkalu muotoilee CSS-koodin luettavuuden parantamiseksi.
  3. Kopioi muotoiltu CSS-koodi käytettäväksi projekteissasi.

Esimerkki CSS-muotoilutyökalun käytöstä

Tässä on esimerkki CSS-koodista ennen ja jälkeen muotoilun: 


Ennen muotoilua:
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;}

Muotoilun jälkeen:
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;
}

Usein kysyttyjä kysymyksiä

Mitä eroa on CSS-muotoilijalla, minifioijalla ja beautifierilla?

CSS-muotoilija (tai beautifier) kirjoittaa tiiviin tiedoston uudelleen sisennettynä ja luettavana versiona. Minifioija tekee päinvastoin: se poistaa välilyönnit, rivinvaihdot ja kommentit pienentääkseen tuotannossa tarjottavan tiedoston kokoa. Työkalumme keskittyy muotoiluun: se ottaa minifioidun tai huonosti sisennetyn CSS-tiedoston ja muotoilee sen uudelleen johdonmukaisella sisennyksellä, ominaisuus ominaisuudelta.

Säilyttääkö muotoilu CSS-kommentit?

Kommentit /* ... */ säilytetään sellaisenaan oletusarvoisesti. Tiedoston alussa olevat lisenssikommentit (/*! ... */) sekä hyötyhuomautukset (TODO, FIXME) pysyvät koskemattomina omilla riveillään. Jos haluat poistaa ne tuotantotiedostoa varten, käytä mieluummin siihen tarkoitettua minifioijaa.

Käsitelläänkö valmistajakohtaiset etuliitteet (-webkit-, -moz-)?

Kyllä. Valmistajakohtaisia etuliitteitä käsitellään tavallisina ominaisuuksina: ne sisennetään ja kohdistetaan muun lohkon kanssa. Muotoilija ei luo eikä poista etuliitteitä: se vain muotoilee syötetyn koodin. Lisätäksesi puuttuvat etuliitteet automaattisesti, käytä Autoprifixeriä koontiputkessasi.

Käsitteleekö muotoilija mediakyselyt ja sisäkkäiset säännöt?

Kyllä. @media, @supports, @keyframes ja muut at-säännöt sisennetään sisäkkäisten sääntöjen kanssa aaltosulkujen sisään. Natiivi CSS-sisäkkäisyys (& ylätason säännössä) tunnistetaan ja muotoillaan myös oikein, kuten CSS-syntaksin kanssa yhteensopivat SCSS- tai Less-lohkot.

Voinko muotoilla SCSS-, Less- tai Stylus-koodia?

Työkalu on tarkoitettu standardi-CSS:lle. Laajennettuja syntakseja (SCSS-mixinit, Less-muuttujat @-merkillä, Stylus-syntaksi ilman aaltosulkuja) jäsennin ei ymmärrä, ja ne voivat tuottaa huonon lopputuloksen. Näille kielille kannattaa käyttää mieluummin komentoja sass --style=expanded, lessc tai erillistä muotoilijaa, kuten Prettieriä oikealla liitännäisellä.

Valvooko muotoilija CSS-syntaksia?

Muotoilija suorittaa minimaalisen syntaktisen analyysin: se tunnistaa lohkot, valitsimet ja määrittelyt. Se ilmoittaa selvistä virheistä (sulkeutumaton aaltosulku, puuttuva puolipiste lohkon lopussa), mutta ei vahvista ominaisuuksien nimiä tai arvoja. Täydellistä vahvistusta varten käytä W3C:n CSS Validator -palvelua.

Pyyntöesimerkki

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

Syöteskeema

Kenttä Tyyppi Pakollinen Oletus
input text ✓ –

Päätepisteet

  • GET https://cdrn.fr/api/v1/tools - listaa kaikki saatavilla olevat työkalut
  • GET https://cdrn.fr/api/v1/tools/css-formatter - hakee tämän työkalun skeeman
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - suorittaa tämän työkalun JSON-payloadilla