CSS formatuotojas ir minimizatorius

Kaip formatuoti ar minimizuoti CSS

1. Įklijuok savo stilių lapą arba spustelėk Atidaryti failą, kad įkeltum .css failą (iki 10 MB).
2. Pasirink Įtrauka (2 tarpai, 4 tarpai ar tabuliacija) ir ar nori Tuščia eilutė tarp taisyklių.
3. Spustelėk Formatuoti, kad gautum skaitomą kodą, arba Minimizuoti, kad gautum mažiausią versiją.
4. Minimizuojant palik pažymėtą Sujungti taisykles minimizuojant, kad rezultatas būtų geriausias, ir Palikti /*! komentarus */, kad išsaugotum licencijų antraštes.
5. Nukopijuok arba atsisiųsk rezultatą. Būsenos eilutė rodo dydį prieš ir po baitais bei sutaupytą procentą.

Jei trūksta skliausto, įrankis sustoja ir parodo, kurioje eilutėje yra neuždarytas { arba perteklinis }, o ne sukuria sugadintą rezultatą.

Formatavimas: skaitomas, nuoseklus CSS

Formatuoti naudoja js-beautify – formatuotoją, esantį daugelyje kodo redaktorių. Jis kiekvieną deklaraciją deda į atskirą eilutę, įtraukia kiekvienos taisyklės ir tokių at-taisyklių kaip @media bei @supports turinį, kiekvieną grupės selektorių rašo atskiroje eilutėje ir po kiekvienos deklaracijos dvitaškio prideda tarpą. Esamos tuščios eilutės paliekamos (ne daugiau nei viena iš eilės), todėl loginės failo dalys lieka matomos. Formatuotojas niekada nekeičia reikšmių, taisyklių tvarkos ar selektorių prasmės: jis keičia tik tarpus.

Tai naudinga skaitant minimizuotą svetainės CSS, peržiūrint įrankio sugeneruotą stilių lapą ar sutvarkant failą, kurį redagavo keli žmonės su skirtingais įpročiais.

Minimizavimas: mažesnis CSS su csso

Minimizuoti naudoja csso (CSS Optimizer) – struktūrinį minimizatorių. Be tarpų ir komentarų šalinimo, jis perrašo stilių lapą į lygiavertę trumpesnę formą:

• spalvos trumpinamos (#ff0000 virsta red, #ffffff – #fff);
• vienetai ir nuliai supaprastinami (0px virsta 0, 0.5em – .5em);
• pasikartojančios deklaracijos šalinamos, o sutrumpintos savybės sujungiamos, kai tai saugu;
• su Sujungti taisykles minimizuojant taisyklės su vienodomis deklaracijomis sugrupuojamos (a{color:red} b{color:red} virsta a,b{color:red}), o perrašytos deklaracijos pašalinamos.

Pertvarkymas įprastiems stilių lapams yra saugus, bet deklaracijas perkelia. Jei tavo CSS remiasi labai konkrečia kaskados tvarka, pavyzdžiui, naršyklių apėjimais (hack), atžymėk parinktį: tada csso tik suspaus kiekvieną taisyklę jos vietoje.

Komentarai pašalinami, išskyrus „svarbius“ komentarus, prasidedančius /*!, kurie dažnai naudojami licencijoms. Atžymėk Palikti /*! komentarus */, jei nori pašalinti ir juos.

Dydis prieš ir po

Būsenos eilutė palygina įvesties ir rezultato dydį UTF-8 baitais. Suformatuotas kodas paprastai didesnis už originalą; minimizuotas rankomis rašytas CSS dažniausiai sutaupo nuo 20 iki 50 %. Atsimink, kad serveriai failus dar suspaudžia gzip ar Brotli, todėl perdavimo sutaupymas mažesnis už neapdorotą skaičių, bet minimizavimas vis tiek sutrumpina analizės laiką ir talpykloje laikomų failų dydį.