CSS-minifioija ja muotoilija

Mikä tämä työkalu on?

CSS-minifioija kirjoittaa tyylitiedoston uudelleen mahdollisimman pieneksi muuttamatta sen renderöitymistä: se poistaa kommentit ja tyhjät merkit, lyhentää väriarvot ja nolla-yksiköt turvallisissa tapauksissa, yhdistää päällekkäiset säännöt ja poistaa tarpeettomat puolipisteet.

Tämä työkalu perustuu clean-css-kirjastoon, CSS-optimoijaan joka oikeasti jäsentää tyylitiedoston AST-puuksi säännöllisten lausekkeiden sijaan, minkä ansiosta se pystyy turvallisesti käsittelemään reunatapauksia jotka rikkovat yksinkertaisia minifioijia — CSS-mukautetut ominaisuudet (--main-color: ...), merkkijonojen sisältö sekä monimutkaiset valitsimet ja media-kyselyt tulevat kaikki oikein.

Miksi käyttää sitä?

• AST-pohjainen minifiointi (clean-css), ei säännöllisiä lausekkeita — turvallinen mukautettujen ominaisuuksien, merkkijonojen ja sisäkkäisten media-kyselyjen kanssa.
• Tason 2 optimoinnit yhdistävät ja yksinkertaistavat sääntöjä lisäsäästöjen saamiseksi pelkän tyhjän tilan poiston lisäksi.
• Näe tarkalleen kuinka monta tavua ja kuinka monta prosenttia säästit.
• Muotoilutila muuttaa minifioidun tyylitiedoston takaisin luettavaksi CSS:ksi johdonmukaisella sisennyksellä.
• 100 % paikallinen käsittely — omistusoikeudelliset tai julkaisemattomat tyylit eivät koskaan poistu selaimestasi.

Käyttöohje

1. Liitä CSS syötekenttään, tai klikkaa "Lataa esimerkki" kokeillaksesi mallia jossa on mukautettu ominaisuus ja media-kysely.
2. Klikkaa "Minifioi" tiivistääksesi sen, tai "Muotoile" kaunistaaksesi sen 2 välilyönnin sisennyksellä.
3. Tarkista viesti laatikoiden alla — minifiointitila näyttää koon pienenemisen; virheellinen CSS näyttää selkeän virheilmoituksen sen sijaan että tuottaisi hiljaisesti rikkinäistä tulosta.
4. Klikkaa "Kopioi" napataksesi tuloksen.

Esimerkki

Syöte

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Tuloste

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Mukautettu ominaisuus, media-kysely ja kaskadijärjestys säilyvät kaikki — vain tyhjät merkit, kommentit ja tarpeettomat merkit poistetaan.

Käytännön vinkkejä

• Minifioi build- tai julkaisuvaiheessa, ei kehitysvaiheessa — muokkaa luettavaa lähdekoodia ja anna tämän työkalun (tai build-putken) tuottaa julkaistava versio.
• Jos selvität miksi sivu näyttää erilaiselta tuotannossa, minifioidun CSS:n muotoilu ensin tekee vertailusta lähdekoodiisi paljon helpomman lukea.
• Mukautetut ominaisuudet säilyvät minifioinnissa, joten suunnittelutokeneihin perustuvat tyylitiedostot (jotka käyttävät --spacing-, --color-* -tyyppisiä muuttujia) on turvallista ajaa tämän työkalun läpi.
• Yhdistä alla oleviin HTML- ja JS-minifioijiin, jos projektissasi pidetään kaikki erillisissä tiedostoissa ennen julkaisua.

Mihin tämä sopii oikeissa työnkuluissa

CSS on yksi suurimman hyödyn tarjoavista minifioitavista asioista, koska tyylitiedostot estävät oletuksena renderöinnin — jokainen tyylitiedostosta pois leikattu tavu voi hieman nopeuttaa ensimmäistä piirtoa, erityisesti hitaammilla yhteyksillä. Se on pienempi voitto kuin kuvien optimointi, mutta se on käytännössä ilmainen kun se on kerran liitetty build-vaiheeseen.

Muotoilu-suunta on hyödyllinen päinvastaiseen ongelmaan: kilpailijan tai vanhan tuotantoon julkaistun minifioidun tyylitiedoston tarkasteluun, jotta ymmärtää sen rakenteen ennen ohitustyylin tai uudelleensuunnittelun kirjoittamista.

→ HTML-tiivistäjä · JS-minifioija

Yleisiä käyttötapauksia

• Tyylitiedoston pienentäminen ennen staattisen sivuston tai laskeutumissivun julkaisua.
• Elävältä sivustolta poimitun minifioidun CSS-tiedoston uudelleenmuotoilu sen rakenteen tutkimiseksi.
• Suunnittelutyökalusta viedyn CSS:n siivoaminen, joka usein sisältää liiallisia kommentteja ja tyhjää tilaa.
• Nopea tarkistus siitä, jäsentyykö käsin kirjoitettu CSS-katkelma oikein, sillä virheellinen CSS näkyy selkeänä virheenä.

Usein kysytyt kysymykset