CSS-muotoilija ja -minifoija

Sisennä sekava CSS helposti luettavaksi tai minifoi se julkaisua varten – mukana turvallinen tila, joka säilyttää sääntöjen järjestyksen.

Sisennys
Pakkaus
Liitä tai kirjoita CSS-koodia muotoillaksesi tai minifoidaksesi sen.

CSS-koodisi muotoillaan ja minifoidaan suoraan selaimessasi. Mitään tietoja ei lähetetä BroBroGo-palvelimelle.

UKK

Mitä eroa on muotoilulla (beautify) ja minifoinnilla (minify)?

Muotoilu (beautify) sisentää ja jaksottaa tyylitiedostosi niin, että sitä on helppo lukea ja muokata. Minifointi (minify) tekee päinvastoin: se poistaa tyhjät välit ja kommentit, joita selain ei tarvitse, ja lyhentää arvoja (kuten värikoodeja), jolloin tiedostosta tulee pienempi ja se latautuu nopeammin. Muotoile koodia kehityksen aikana, minifoi se ennen julkaisua.

Mitä Safe- ja Optimized-pakkausasetukset tekevät?

Turvallinen (Safe) poistaa vain tyhjät välit ja kommentit sekä lyhentää arvoja, jolloin jokainen sääntö säilyy täsmälleen alkuperäisellä paikallaan. Optimoitu (Optimized) menee pidemmälle ja yhdistää päällekkäiset valitsimet ja säännöt tiedostokoon minimoimiseksi. Se saattaa muuttaa sääntöjen järjestystä, joten sääntöjärjestyksestä riippuvaiset tyylitiedostot kannattaa tarkistaa nopeasti ennen julkaisua. Kommentit muodossa /*! … */ säilytetään kummassakin tilassa.

Muuttaako minifointi sivuni ulkoasua?

Turvallisessa (Safe) tilassa eivät muutu – tyylisi renderöityvät täsmälleen samalla tavalla. Tila poistaa ylimääräiset välilyönnit, tavalliset kommentit ja kirjoittaa arvot lyhyempään vastaavaan muotoon (kuten #ffffff muodossa #fff). Se ei koskaan muuta valmistajakohtaisia etuliitteitä (vendor prefixes) tai nykyaikaista syntaksia. Optimoitu (Optimized) tila myös yhdistää sääntöjä, mikä näyttää identtiseltä lähes kaikilla sivustoilla, mutta koodi on hyvä varmistaa, jos tyylisi riippuvat sääntöjen tarkasta järjestyksestä.

HTML-muotoilija ja -minifoijaSisennä sekava HTML helposti luettavaksi tai minifoi se julkaisua varten – mukana valinnainen rikkinäisten tagien tarkistus.SVG-optimoijaPuhdista SVG-koodi ja pienennä tiedostokokoa muuttamatta kuvan ulkoasua.JavaScript-muotoilija ja -minifoijaSisennä minifoitu tai hämärretty JavaScript luettavaksi tai minifoi oma koodisi tiedostokoon pienentämiseksi.CSS clamp() -laskuriSyötä koko pienille ja suurille näytöille ja saat joustavan clamp()-arvon, joka skaalautuu sujuvasti niiden välillä – sopii fonttikoille, sisällyksille tai väleille.Liukuväri-generaattoriLuo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.Box Shadow -generaattoriSäädä laatikon varjoa liukusäätimillä, pinoa tasoja syvyyden luomiseksi ja kopioi valmis CSS-koodi heti.VärimuunninMuunna värejä muotojen HEX, RGB, HSL, HSV, CMYK ja LAB välillä – muokkaa mitä tahansa kenttää ja muut päivittyvät reaaliajassa.JSON-muotoilijaMuotoile, validoi ja minifoi JSON-tietoja hetkessä.