10 najboljih alata za oblikovanje i optimizaciju CSS datoteka

Formatiranje i optimizacija CSS datoteka više nije glavobolja za web programere uz pomoć ovih ručno ubranih alata!


Od svog osnutka kaskadni su listovi stilova (CSS) naširoko korišteni za ocrtavanje vizualnih prikaza web stranica. Uključuju definiciju boja, izgleda, animaciju i fontova. Neovisno o HTML-u, CSS vam omogućuje jednostavno prilagođavanje prezentacije web stranica različitim tipovima uređaja s različitim veličinama zaslona bez potrebe za promjenom dijela sadržaja stranice.

CSS se naziva kaskadna tablica stilova zbog načina na koji se vrijednosti svojstava primjenjuju na hijerarhiju sadržaja. Podređeni elementi mogu naslijediti ili nadjačati vrijednosti svojstava iz svojih nadređenih elemenata. Te se sposobnosti pružaju putem modela temeljenog na hijerarhijskom opsegu učinka. Problem ovog modela je u tome što, ako se ne koristi pravilno, može ozbiljno utjecati na rad web stranice.

I nitko ne voli tromo web mjesto. Zbog toga je nastala potreba za CSS optimizacijom, zajedno s novom vrstom alata koji su izričito dizajnirani kako bi CSS datoteke bile što urednije i brže.

CSS optimizacija može se obaviti na više načina: CSS datoteke mogu se smanjiti u veličini, mogu se očistiti, testirati ili potvrditi za ispravnost, mogu se urediti, oblikovati da bi se razumio kôd i, općenito, bolje, mogu biti podešen kako bi omogućio bolje korisničko iskustvo. Za svaki od ovih zadataka napravili smo izbor najboljih alata.

# Alat za podešavanje CSS-a

CSS Minify

CSS Minify jednostavan je alat za minifikaciju CSS-a: postupak snimanja uljepšanog, čitljivog, dobro oblikovanog CSS-a i uklanjanja svih njegovih razmaka, uvlačenja, novih linija i komentara. Rezultirajući minificirani CSS može se uspješno koristiti bez tih elemenata. Također, minimiziranje čini CSS teže čitati, obeshrabrujući kradljivce kodova kako kradu vaše naporne tablice stilova.

Kad minifrirate svoj kôd, dobar je savjet da zadržite uljepšanu (neminificiranu) verziju jer ćete ga u budućnosti morati čitati u slučaju da ga budete trebali promijeniti.

Gornji sloj

Gornji sloj nije alat za optimizaciju vašeg CSS-a. Umjesto toga, riječ je o CSS biblioteci otvorenog koda dizajniranoj s brzinama. Potomak je Adobe dizajnerskog jezika razvijenog za Brackets, Edge Reflow.

Topcoat uključuje PSD i mnoge druge artefakte dizajna, zajedno s kolekcijom jednostavnih i čistih SVG ikona i stilskih vodiča. Također nudi alate za usporedbu i fantastičnu obitelj fontova Adobe Source Sans Pro.

Uljepšavanje koda

Uljepšavanje koda temelji se na CSS Tidyu, popularnom open-source CSS analizatoru i optimizatoru. Omogućuje vam da zalijepite CSS kôd za obradu u područje teksta ili ga dobijete iz URL-a. Nakon što obavi svoj posao, prikazuje optimizirani kôd, zajedno s popisom izvršenih promjena. Možete kopirati izmijenjeni kôd u međuspremnik ili ga spremiti u datoteku za kasniju upotrebu.

Alat nudi značajan i sveobuhvatan popis opcija pomoću kojih možete prilagoditi njegove rezultate u skladu s vašim željama. Na primjer, nudi pet opcija za kompresiju, u rasponu od niske kompresije do najviše kompresije. Ostale opcije omogućuju vam određivanje sortiranja, drugih oblika sažimanja, uklanjanja nepotrebnih predmeta između ostalog.

CSS Nano

Drugi CSS alat za minifier je CSS Nano. Ovaj se temelji na alatu stvorenom za transformiranje stilova pomoću JavaScript-a, koji se naziva PostCSS. Zahvaljujući arhitekturi dodataka ovog alata, tvorci CSS Nanoa uspjeli su ga izraditi iz malih modula s ograničenim funkcijama.

Prema zadanim postavkama, CSS Nano će preuzeti CSS datoteku koju dajete na obradu i na njoj raditi samo sigurne optimizacije. No, alat također nudi mogućnosti za potiskivanje kompresije do krajnjih granica. Rad CSS-a i dalje će biti isti, ali njegov nepotrebni bijeli prostor bit će uklonjen. Također, njegovi će se identifikatori stisnuti, a nepotrebne definicije u potpunosti će se pročistiti.

# CSS Alati za čišćenje

Prljava markup

Prljava markup radi upravo suprotno od minifiersa: uzima koji god kôd na koji ga nahranite i očisti, olakšavajući čitanje – sve dok je valjani CSS kôd. Rezultirajući kod savršeno je uljepšen.

Tvorci Dirty Markup-a kažu da je gotovo milijarda redaka koda (s obzirom na ne samo CSS, već i HTML i JavaScript) uljepšena pomoću njihovog alata.

Dust-Me Selektori

Dust-Me Selektori stvoren je za skeniranje web stranice i pronalaženje neiskorištenih CSS odabirača kako bi ih uklonili i smanjili veličinu koda. Radi kao dodatak za Firefox i Opera.

Dust-Me Selektori mogu raditi na pojedinoj stranici ili pretraživati ​​cijeli Sitemap pokazujući vam detalje svih tablica stilova i odabirača, organizirajući ih u korištene i neiskorištene. Verzija Firefoxa može skenirati stranice automatski dok pregledavate. Trebali biste uzeti u obzir samo to da događaji mutacije mogu pokrenuti dodatno skeniranje ako se stranica promijeni.

CSS Lint

CSS Lint nudi minimalističko sučelje: samo veliki tekstni okvir u koji zalijepite CSS kôd da biste ga “povezali”. Ne govori što će postupak povezivanja učiniti s vašim kodom, ali poruka upozorenja na vrhu stranice govori vam da će rezultati povrijediti vaše osjećaje – a također će vam pomoći da bolje kodirate.

CSS Lint potvrđuje sintaksu vašeg koda prema skupu unaprijed definiranih pravila. Radeći to otkriva potencijalne neučinkovitosti i pogreške. Uz malo prilagođavanja, CSS Lint vam daje mogućnost odabira skupa pravila koja želite primijeniti.

# CSS Alati za testiranje / provjeru

CSS test stresa

CSS test stresa djeluje kao bookmarklet (mali djelić JavaScript koda) koji primjenjuje stres testiranje na CSS bilo koje web stranice. Alat indeksira sve elemente u CSS kodu i njihove klase. Tada započinje test stresa uklanjanjem nastave jednu po jednu i određivanjem vremena koliko je potrebno za pomicanje po stranici.

Ako se vrijeme trajanja stranice za pomicanje znatno smanji kada uklonite selektor, tada taj selektor predstavlja problematično područje koje treba ukloniti ili ispraviti. Ovaj alat posebno djeluje s fantastičnim CSS3 kodom koji omogućava zaobljene kutove, neprozirnost, sjene teksta i sjene okvira. Svi ovi efekti mogu se izvesti u CSS3 bez upotrebe rezanja slika, posebnog skriptiranja ili dodavanja dodatnih elemenata.

No CSS3 može stvoriti probleme: jedno svojstvo može rezultirati vidljivim crtanjem i problemima s pomicanjem stranica. Tu nam može dobro doći CSS test stresa.

CSS usluga provjere valjanosti

CSS usluga provjere valjanosti potvrđuje kaskadne tablice stilova i (X) HTML sa tablicama stilova. Alat provjerava svojstva definirana u svim verzijama CSS-a. Da biste provjerili stranicu ili CSS datoteku, samo trebate unijeti njezin URI (jedinstveni identifikator resursa) i postaviti neke osnovne opcije, kao što su profil (vrsta CSS-a za provjeru), ciljni uređaj, upozorenja koja će se pokazati i što učiniti s proširenjima dobavljača. problemi u vezi (prikazuju pogreške ili upozorenja).

Nakon što ste spremni, pritisnete gumb Provjeri i čekate rezultate. Završno izvješće prikazat će vam sveobuhvatan popis pogrešaka i upozorenja gdje ćete naći nevažeće entitete, sintakse, nepoznata proširenja dobavljača između mnogih drugih problema koje biste trebali ispraviti u svom CSS-u kako biste ga prilagodili. Izvještaj će također prikazati sav važeći CSS kôd na vašoj stranici.

BackstopJS 3

BackstopJS 3 automatizira vizualno regresijsko testiranje internetskih korisničkih sučelja. To radi svoj posao uspoređujući niz DOM-ovih zaslona. Nudi uzbudljiv popis značajki: postoji izvješćivanje u pregledniku, također postavka izgleda za ispis i zaslon i neke druge specifične značajke, poput filtriranja zaslona i referentni / test / vizualni dif inspektor.

Koristeći skripte Puppeteer i ChromyJS, BackstopJS 3 može simulirati korisnikove interakcije te je u mogućnosti izvršavati testove s Chromeom bez glave. Kako bi se uklonili problemi s prikazivanjem između platformi, također ima integrirano prikazivanje dokera. Alat se može pokrenuti globalno ili lokalno kao samostalni paket, a lijepo se igra s CI i kontrolom izvora. BackstopJS 3 je vrlo jednostavan za korištenje: sa samo tri naredbe mogli biste prijeći prilično dug put.

Zaključak

Nadam se da vam gornji CSS alati pomažu u optimiziranju CSS datoteka vaše web aplikacije za bolje performanse. Ako ste zainteresirani za učenje naprednog CSS-a, provjerite ovo sjajan tečaj.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map