Ilmainen CSS-muotoilutyökalu Verkossa
Muotoile tiivistetty tai sekava CSS heti — toimii selaimessa, ei latausta.
CSS-syöte
Muotoiltu CSS
Esimerkkejä CSS-muotoilusta
Tiivistetty CSS on vaikea lukea; muotoilu lisää sisennystä ja rivinvaihtoja. Esimerkki:
Kontti- ja painiketyylit
Tiivistetty syöte:
Muotoiltu tulos:
Napsauta yllä olevaa Esimerkki-painiketta ladataksesi tiivistetyn CSS:n editoriin.
Mikä on CSS-muotoilija?
CSS (Cascading Style Sheets) määrittää jokaisen verkkosivun ulkoasun. Tiivistetty tai huonosti muotoiltu CSS on vaikea lukea ja virheenkorjata. CSS-muotoilija lisää sisennystä ja rivinvaihtoja raakaan tai tiivistettyyn CSS:ään, jotta valitsimet, ominaisuudet ja sisäkkäisyys näkyvät selvästi. W3C:n CSS-määrittelyt määrittelevät kielen.
Työkalu jäsentää CSS:si ja muotoilee sen yhtenäisellä sisennyksellä. Se toimii kokonaan selaimessasi. Mitään ei lähetetä palvelimelle, joten sitä voi käyttää turvallisesti tuotannon tyylitiedostoihin. Tiivistämiseen CSS-tiivistin. Validointiin CSS-tarkistin.
Miten työkalua käytetään
Liitä tai lataa
Kopioi CSS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .css-tiedoston. Esimerkki lataa esimerkkidataa. Virheellinen CSS näyttää virheen.
Tarkista tulos
Oikea paneeli päivittyy automaattisesti. Kelvollinen CSS muotoillaan oikealla sisennyksellä. Käytä Tiivistä poistaaksesi tyhjän tilan ja saadaksesi kompaktin tuotantoversion.
Kopioi tai lataa
Käytä Kopioi kopioidaksesi tuloksen leikepöydälle tai Lataa tiedostona tallentaaksesi tiedoston. SCSS tai Less: käänä ensin SCSS CSS:ksi tai Less CSS:ksi.
Miten muotoilija toimii
Työkalu jäsentää CSS:si ja muotoilee sen yhtenäisellä sisennyksellä. Valitsimet, ominaisuudet ja säännöt tunnistetaan; aaltosulkeet ja puolipisteet säilytetään. W3C:n CSS-määrittelyt määrittelevät kielen. Muotoilu lisää rivinvaihtoja ja välilyöntejä luettavuuteen muuttamatta käyttäytymistä. At-säännöt kuten @media, @keyframes ja @import käsitellään. Käsittely tapahtuu selaimessasi — mitään ei lähetetä palvelimelle.
Build-työkalut kuten Vite, Webpack tai Parcel tuottavat usein tiivistettyä CSS:ää. Tuloksen liittäminen tähän tekee siitä luettavaa. SCSS- tai Less-lähteelle käänä ensin SCSS CSS:ksi tai Less CSS:ksi, sitten muotoile.
Milloin CSS-muotoilusta on hyötyä
Kehittäjät tarvitsevat usein muotoilijaa tuotantosivujen tyylejä tutkiessaan, kolmannen osapuolen CSS:ää debugatessaan tai build-työkalujen tiivistettyä tulosta tarkistaessaan. Pakatun CSS:n liittäminen tähän tekee valitsimet ja säännöt heti näkyviksi. Bootstrap- tai Tailwind-käännetty tuloste on usein tiivistetty — muotoilu paljastaa rakenteen. Voit käyttää Claudea tai ChatGPT:tä monimutkaisten asettelujen CSS:n luontiin ja muotoilla tuloksen täällä luettavaksi.
Muotoilu auttaa myös ennen tyylien jakamista tiimin kanssa tai pull request -katselmuksia. Vendor-etuliitteisiin CSS-etuliite. Inline-tyyleihin (esim. sähköposti) CSS inliniksi. Validointiin CSS-tarkistin.
Usein kysyttyä
Onko datani yksityinen?
Kyllä. Muotoilu tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Voit varmistaa avaamalla selaimen Verkko-välilehden.
Tukeeko se SCSS:ää tai Lessiä?
Työkalu muotoilee tavallista CSS:ää. SCSS:lle tai Lessille käänä ensin SCSS CSS:ksi tai Less CSS:ksi, sitten muotoile tulos.
Mitä Tiivistä tekee?
Se poistaa tyhjän tilan, rivinvaihdot ja kommentit muotoillusta tulosteesta ja antaa pienimmän tuotantoversion. On myös erillinen CSS-tiivistin-sivu.
Säilyttääkö se kommentit?
Muotoilu säilyttää kommentit. Tiivistäminen voi poistaa ne tiivistimen mukaan. Tarkista tulos ennen tuotantokäyttöä.
Entä CSS-mukautetut ominaisuudet?
CSS-muuttujat (--var-name) tuetaan. Muotoilija käsittelee modernin CSS-syntaksin mukaan lukien mukautetut ominaisuudet, @media ja @keyframes.