Siirry pääsisältöön
LibraTool logoLibraTool

CSS-kaunistaja ilmaiseksi

Muotoile minifioitu CSS selkeästi tasaisella sisennyksellä tai minifioi se. Valinnainen ominaisuuksien aakkosjärjestys ennustettaviin diffeihin.

Toimii offline-tilassa kerran ladattuna

Pudota tiedosto tähän tai valitse napsauttamalla

CSS · käsitellään laitteellasi

tai liitä leikepöydältä painamalla Ctrl+V

Selaa tiedostoja
Muotoiltu CSS
Tulos näkyy tässä…

Yleiset käyttötavat

  • Tuotannollisen CSS:n virheenkorjausNäytä minimoidut CSS tuotantosivuilta luettavassa muodossa tyylien etsimiseksi ja käänteissuunnittelulle.
  • Ota käyttöön tiimin CSS-tyyliSuorita tiimin lähettämä CSS johdonmukaisen kaunistajan läpi, jotta diff-muutokset koskevat sisältöä, ei muotoilua.
  • Muotoile toimittajan etutunnus-CSSToimittajan etutunnuksella varustettu CSS (autoprefixer-tuotos) sisältää usein paljon -webkit-, -moz-, -ms- variantteja. Muotoile tarkistamista varten.
  • Opi Pro CSS:stäTutustu CSS:ään kuuluisista suunnittelujärjestelmistä muotoilemalla niiden käännetty tuotos.
  • Muotoile CSS virheraporteilleCSS-virheitä jätettäessä muotoiltu CSS on paljon helpompi lukea ja ymmärtää tarkastaville.

Miten se toimii

Tämä työkalu muotoilee CSS:ää käsin kirjoitetulla rekursiivisella jäsentimellä, joka on rakennettu suoraan sivuun — ei kolmannen osapuolen kirjastoa, ei palvelinkutsua. Jäsennin kulkee CSS:äsi läpi merkki kerrallaan, käsitellen oikein lainatut merkkijonot, url()-arvot, sisäkkäiset at-säännöt ja kommentit, jotka hämmentäisivät yksinkertaisempia säännöllisiin lausekkeisiin perustuvia lähestymistapoja.

  1. 1
    Merkkitason tokenisointi
    walkCss-funktio skannaa raakasyötteen yhden merkin kerrallaan, seuraten lainaustilaa ja sulkujen syvyyttä, jotta puolipisteitä tai aaltosulkeita url()-arvon, merkkijonoarvon tai kommentin sisällä ei koskaan sekoiteta rakenteellisiin erottimiin.
  2. 2
    Lohkon ja määrittelyn erottaminen
    Kun skanneri löytää ylimmän tason avaavan aaltosulkeen, se poimii esiosan (valitsimen tai at-säännön avainsanan) ja käsittelee rekursiivisesti lohkon rungon — joka voi itse sisältää sisäkkäisiä sääntöjä (@media, @supports, natiivi CSS-sisäkkäisyys) syvemmällä rekursiotasolla.
  3. 3
    Ominaisuuksien lajittelu ja sisennys
    Kunkin lohkon määrittelyt kootaan sarjaksi, sitten valinnaisesti lajitellaan aakkosjärjestykseen ominaisuuden nimen mukaan ennen kirjoittamista valitulla sisennysleveydellä (2 tai 4 välilyöntiä). Tiivistystila ohittaa välilyönnit kokonaan ja poistaa kommentit.
  4. 4
    Välitön tuloste selaimessa
    Tulokset ilmestyvät kirjoittaessasi useMemo-hookin kautta — mitään ei lähetetä minnekään. Muotoiltu tai tiivistetty CSS voidaan kopioida leikepöydälle tai ladata .css-tiedostona, ja paneeli näyttää kokoeron alkuperäiseen verrattuna.

Liittyvät työkalut

🌐

HTML-kaunistaja ja -pienentäjä

Muotoile tai pienennä HTML oikealla sisennyssyvyydellä. Säilyttää sisällön <pre>-, <script>- ja <style>-lohkojen sisällä.

Kokeile sitä
🗄️

SQL-muotoilija ja -kaunistaja

Muotoile SQL-kyselyt asianmukaisella sisennyksellä, konfiguroitavalla avainsanojen kirjainkoolla ja rivinvaihdoilla päälausekkeissa. Toimii minkä tahansa SQL-murteen kanssa.

Kokeile sitä
🗜️

CSS-pienentäjä ja -kaunistaja

Pienennä CSS tiedostokoon pienentämiseksi tai kaunista pienennetty CSS luettavuuden parantamiseksi. Välitön, selaimessasi.

Kokeile sitä

Usein kysytyt kysymykset