11 Nyttige verktøy for å sjekke, rydde og optimalisere CSS-filen

Minimering av filstørrelsen til CSS-stilarket har blitt betraktet av mange som en god måte å øke lastingshastigheten til nettstedet ditt. Faktisk, ved å redusere CSS-filen med flere kilobytes, vil serveren ta en kortere tid å laste og resultere i en raskere nettside.

I tilfelle at artiklene dine rammer Digg-forsiden, kan dette også være en av de få avgjørende faktorene (det er mange flere) om serveren din vil krasje eller ikke.

Noen av de vanligste metodene som brukes for å minimere / optimalisere et CSS-stilark, innebærer eliminering av ubrukte valgorer, uønsket hvitt plass, faner, kommentarer og endring av langvarig deklarasjon til korte notater.

Jeg vet at noen av dere her ikke er teknisk kunnskapsrike nok til å redigere din egen CSS-kode, så her vil jeg gi deg noen nyttige verktøy som du kan bruke til å optimalisere CSS-koden, selv om du ikke har full kjennskap til CSS-koding.

Sjekk din CSS-kode

W3C CSS Validator

W3C CSS validator er et verktøy som du kan bruke til å validere CSS. Du kan enten laste ned Java-validatoren til datamaskinen din og bruke den offline, eller bruk skjemaet for å sjekke CSS-koden din.

CSS Validator Firefox Add-On

For å gjøre det enklere for deg å validere CSS-koden, er det denne Firefox-utvidelsen - CSS Validator - som du kan installere i nettleseren din. Når du er installert, kan du enkelt og raskt sjekke koden med et høyreklikk på musen.

CSSCheck

Selv om CSS-koden din er validert, betyr det ikke at den er fri for feil. Valideringen betyr bare at den overholder de CSS-standardene som er angitt av W3C. Hvis du vil validere, så vel som å se på noen problemer med nettleserkompatibilitet med stilarket, er CSSCheck et godt verktøy for deg..

CSS Analyzer

CSS Analyzer er et nyttig verktøy som lar deg validere stilarket ditt mot W3Cs standard, utføre en fargekontrasttest og en test for å sikre at relevante størrelser er spesifisert i relative måleenheter.

Hvis du lurer på, er fargekontrast-testen å kontrollere at forgrunns- og bakgrunnsfargekombinasjonene gir tilstrekkelig kontrast når de vises av noen som har fargeunderskudd, eller når de vises på en svart og hvit skjerm.

Ryd opp CSS-koden din

Dust-Me Selectors

Dust-Me Selectors er en Firefox-utvidelse som finner ubrukte CSS selectors på siden du ser. Når du tester på etterfølgende sider av samme domene, krysses resultatet med de forrige dataene, og eventuelle valgorer som blir møtt, krysses av fra listen. Du kan bruke den til å teste individuelle sider eller få den til å spinne hele nettstedet.

Til slutt vil du få en rapport om selektorer som ikke brukes hvor som helst på nettstedet. Du kan da fjerne disse valgene fra stilarket ditt (mindre kode betyr mindre filstørrelse).

CSS Redundancy Checker

I likhet med Dust-Me Selectors sjekker dette verktøyet ditt for ubrukte og overflødige CSS-seleksorer. Det eneste som er annerledes er at du må manuelt skrive inn URI for hver side du vil teste.

Optimaliser og komprimer CSS-koden din

Når du har fullført kontrollen av validiteten til CSS og renset unødvendig kode, er det på tide å optimalisere CSS-filen og redusere den til minste mulig størrelse.

CSS Tidy

CSS Tidy er en åpen kildekode programvare som du kan bruke til å optimalisere og komprimere CSS-filen. Den er tilgjengelig i .exe-format (kun Windows) og et zip-format for php-skript (alle plattformer, for webutviklere). Hva CSS Tidy gjør, fjerner hovedsakelig kommentaren, unødvendig hvite plass og endrer noe av koden til kortskrift. Under komprimering kan du velge mellom kodelesbarhet eller maksimal komprimering. Avhengig av lengden på koden, kan du enkelt oppnå et kompresjonsforhold på opptil 30% eller mer.

Siden CSS Tidy er et åpen kildekode-prosjekt, har det vært flere nettsteder som bruker koden og gjort det til et online verktøy for folk å bruke. Her er noen av dem:

• REN CSS
• Kode Beautifier
• CSS Formatter og Optimizer fra CSS Portal

Andre CSS Optimizers

FlumpCakes CSS Optimizer

En enkel optimizer som kommer med flere alternativer for deg å velge mellom.

Robson CSS Kompressor

Selv om det kan se ut som andre, har jeg funnet kompresjonsgraden for Robson CSS Compressor til å være den høyeste blant dem alle. Selv om det kommer med flere alternativer for å tilpasse innstillingen, gir alle alternativene uberørt (alle valgene som er merket) alltid det beste resultatet.

CSS-stasjon CSS kompressor

CSS-kompressoren som tilbys av CSS Drive, kommer i to moduser som du kan bruke: Vanlig og Avansert. I vanlig modus, trenger du bare å velge hvilket nivå av komprimering du vil ha (Lys, Normal eller Super Compact) og CSS Compressor vil gjøre resten. I avansert modus får du flere alternativer, og et større eksempel på hvordan du vil at stilarket skal optimaliseres.

CSS Optimizer

CSS Optimizer fra mabblog.com er en kommandolinjeprogram for Mac og Linux. Det er ment for de som er mer komfortable med terminalen enn et nettgrensesnitt. Det er også en enkel elektronisk versjon tilgjengelig for de som vil raskt få det over og ferdig med.

Forhåpentligvis er verktøyene som er oppført her, nok til å tilpasse og optimalisere CSS stilark. Hvis du har brukt andre verktøy som er mer nyttige enn de nevnte ovenfor, kan du dele dem med oss ​​i kommentarene.

Utforsk mer om: Webdesign, webutvikling, verktøy for nettredaktører.