CSS-yhdistäjä
Yhdistä kaksi CSS-tiedostoa yhdeksi
CSS-tiedosto 1
CSS-tiedosto 2
Yhdistetty CSS
Esimerkkejä CSS:n yhdistämisestä
Liitä kaksi CSS-tiedostoa — yksi kumpaankin syöte-editoriin — ja työkalu yhdistää ne yhdeksi tyylitiedostoksi:
Reset/perusta + komponenttityylit
Napsauta Esimerkki ladataksesi esimerkki-CSS:n molempiin editoreihin ja nähdäksesi yhdistetyn tuloksen heti.
Mikä on CSS-yhdistäjä?
CSS-projektit jakavat usein tyylit useisiin tiedostoihin — reset, perusta, komponentit, apuluokat. CSS-yhdistäjä yhdistää ne yhdeksi tuotantotiedostoksi. Vähemmän HTTP-pyyntöjä tarkoittaa nopeampaa latausta. W3C:n CSS-määrittely määrittelee kielen; build-työkalut kuten Vite ja Webpack tekevät tämän build-vaiheessa. Tämä työkalu tarjoaa nopean kaksoiseditorin suoraan selaimessasi.
Liitä ensimmäinen CSS-tiedostosi vasempaan yläeditoriin ja toinen vasempaan alaeditoriin (tai käytä Lataa-painiketta kummassakin paneelissa). Oikea paneeli yhdistää molemmat syötteet automaattisesti. Kaikki toimii selaimessasi — mitään ei lähetetä palvelimelle. Tuloksen muotoiluun käytä CSS-muotoilijaa. Tiivistämiseen CSS-tiivistintä.
Miten työkalua käytetään
Liitä tai lataa CSS
Liitä ensimmäinen CSS-tiedostosi vasempaan yläeditoriin ja toinen tiedosto vasempaan alaeditoriin. Jokaisessa paneelissa on oma Lataa-painike .css-tiedostojen lataamiseen erikseen. Käytä Esimerkki ladataksesi esimerkkidataa molempiin editoreihin kerralla.
Tarkista yhdistetty tulos
Oikea paneeli yhdistää molemmat syötteet automaattisesti. Tiedosto 1 näkyy ensin, sen jälkeen tiedosto 2. Validointiin CSS-tarkistin. Vendor-etuliitteisiin CSS-etuliite.
Kopioi tai lataa
Käytä Kopioi tai Lataa tiedostona tallentaaksesi yhdistetyn CSS:n. Muunna ensin SCSS tai Less: SCSS CSS:ksi tai Less CSS:ksi.
Milloin CSS:n yhdistäminen auttaa
Vanhoissa projekteissa tai käsityönä tehdyillä sivuilla voi olla monta CSS-tiedostoa. Niiden yhdistäminen vähentää pyyntöjä ja yksinkertaistaa julkaisua. Bootstrap ja Tailwind käyttävät build-putkia; tämä työkalu tarjoaa nopean manuaalivaihtoehdon kahdella erillisellä syötepaneelilla. CSS:n poimimiseen HTML:stä käytä CSS-poimijaa.
Yhdistetyn tuloksen muotoiluun CSS-muotoilija. Inline-tyyleihin (esim. sähköposti) CSS inliniksi. Esikäsittelijöiden välillä: CSS SCSS:ksi tai CSS Lessiksi.
Usein kysyttyä
Onko datani yksityinen?
Kyllä. Yhdistäminen tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
Entä jos molemmissa tiedostoissa on sama valitsin?
Työkalu säilyttää molemmat sellaisinaan. Tämä on turvallista, koska CSS-kaskadin mukaan viimeinen sääntö voittaa, kun spesifisyys on sama — juuri niin selaimet käsittelevät useita tyylitiedostoja. Jos tarvitset edistynyttä duplikaattien poistoa, käytä build-työkaluja kuten cssnano tai PostCSS.
Entä @import?
Työkalu yhdistää tekstin sellaisenaan. Se ei ratkaise @import-URL-osoitteita. Sisällytä tai liitä tuotu sisältö tarvittaessa käsin.
Miten lataan tiedostoja?
Jokaisessa syötepaneelissa on oma Lataa-painike. Napsauta sitä valitaksesi .css-tiedoston kyseiselle paneelille. Tiedosto 1 menee vasempaan yläeditoriin, tiedosto 2 vasempaan alaeditoriin.
Onko tiedostojen järjestyksellä merkitystä?
Kyllä. Tiedosto 1 näkyy tuloksessa ensin, sitten tiedosto 2. Myöhemmät säännöt korvaavat aiemmat, kun spesifisyys on sama. Järjestä tiedostosi sen mukaisesti.