11 Användbara verktyg för att kontrollera, rengöra och optimera din CSS-fil

Minimering av filstorleken i CSS-stilarket har ansetts av många som ett bra sätt att öka hastigheten på din webbplats. Genom att minska CSS-filen med flera kilobytes kommer servern att ta en kortare tid att ladda och resultera i en snabbare webbsida.

Om dina artiklar träffade Diggs startsida kan det också vara en av de få avgörande faktorerna (det finns många fler) om din server kommer att krascha eller inte.

Några av de vanligaste metoderna som används för att minimera / optimera ett CSS-stilark innefattar att eliminera oanvända väljare, oönskad blankutrymme, flikar, kommentarer och ändra långvarig deklaration till stenografi noteringar.

Jag vet att några av er här inte är tekniskt kunniga för att redigera din egen CSS-kod, så här kommer jag att förse dig med några användbara verktyg som du kan använda för att optimera din CSS-kod, även om du inte vet CSS-kodning.

Kontrollera din CSS-kod

W3C CSS Validator

W3C CSS-valideraren är ett verktyg som du kan använda för att validera din CSS. Du kan antingen ladda ner Java-validatorn till din dator och använda den offline, eller använd formuläret online för att kontrollera din CSS-kod.

CSS Validator Firefox Add-On

För att göra det enklare för dig att validera din CSS-kod finns det här Firefox-tillägg - CSS Validator - som du kan installera i din webbläsare. När du har installerat kan du snabbt och snabbt kontrollera din kod med ett högerklick på musen.

CSSCheck

Även om din CSS-kod är validerad betyder det inte att det är felaktigt. Valideringen innebär bara att den överensstämmer med CSS-standarderna som fastställts av W3C. Om du vill validera och titta på några problem med webbläsarkompatibilitet med ditt stylesheet, är CSSCheck ett bra verktyg för dig.

CSS Analyzer

CSS Analyzer är ett användbart verktyg som låter dig validera ditt stylesheet mot W3Cs standard, utföra ett färgkontrasttest och ett test för att säkerställa att relevanta storlekar anges i relativa måttenheter.

Om du undrar, är färgkontrasttestet att kontrollera att förgrunds- och bakgrundsfärgkombinationerna ger tillräcklig kontrast när den ses av någon som har färgunderskott eller när den ses på en svartvitt skärm.

Rengör din CSS-kod

Dust-Me Selectors

Dust-Me Selectors är en Firefox-förlängning som hittar oanvända CSS-väljare på den sida du tittar på. När du testar efterföljande sidor av samma domän kryssrutas resultatet med tidigare data och alla valörer som stöttas överkorsas från listan. Du kan använda den för att testa enskilda sidor eller få den till spindel hela webbplatsen.

I slutet kommer du att få en rapport om de väljare som inte används någonstans på webbplatsen. Du kan sedan ta bort dessa väljare från ditt stilark (mindre kod betyder mindre filstorlek).

CSS Redundancy Checker

I likhet med Dust-Me Selectors kontrollerar detta verktyg din webbplats för oanvända och överflödiga CSS-väljare. Det enda som är annorlunda är att du måste manuellt ange URI för varje sida som du vill testa.

Optimera och komprimera din CSS-kod

När du har slutfört kontrollen av din CSS-validitet och rengörde onödig kod är det dags att optimera CSS-filen och minska den till minsta möjliga storlek.

CSS Tidy

CSS Tidy är en öppen källkodsprogramvara som du kan använda för att optimera och komprimera din CSS-fil. Den är tillgänglig i .exe-format (endast Windows) och ett zipped php-skriptformat (alla plattformar, för webbutvecklare). Vad CSS Tidy gör är främst att ta bort kommentaren, onödig blankutrymme och ändra en del av koden till stenografi. Under komprimering kan du välja mellan kodläsbarhet eller maximal komprimering. Beroende på längden på din kod kan du enkelt uppnå ett kompressionsförhållande på upp till 30% eller mer.

Eftersom CSS Tidy är ett open source-projekt har det funnits flera webbplatser som använder koden och gjorde det till ett onlineverktyg för människor att använda. Här är några av dem:

• CLEAN CSS
• Kod Beautifier
• CSS Formatter och Optimizer från CSS Portal

Andra CSS Optimizers

FlumpCakes CSS Optimizer

En enkel optimizer som levereras med flera alternativ för dig att välja mellan.

Robson CSS Kompressor

Medan det kan se ut som andra, har jag funnit att kompressionshastigheten för Robson CSS Compressor är den högsta bland dem alla. Även om det kommer med flera alternativ för att du ska finjustera inställningen, lämnar alla alternativa orörda (alla alternativa markerade) alltid ger det bästa resultatet.

CSS-enhet CSS-kompressor

CSS-kompressorn som erbjuds av CSS Drive kommer i två lägen som du kan använda: Regular och Advanced. I det vanliga läget behöver du bara välja vilken komprimeringsnivå du vill ha (Ljus, Normal eller Super Compact) och CSS Compressor gör resten. I det avancerade läget får du fler alternativ och en större fråga om hur du vill optimera ditt stylesheet.

CSS Optimizer

CSS Optimizer från mabblog.com är en kommandoradsapplikation för Mac och Linux. Den är avsedd för dem som är mer bekväma med terminalen än ett online-gränssnitt. Det finns också en enkel onlineversion tillgänglig för dem som vill snabbt få det över och gjort med.

Förhoppningsvis är de verktyg som listas här tillräckligt för att du ska tweak och optimera ditt CSS-stilark. Om du har använt andra verktyg som är mer användbara än de som nämnts ovan, dela dem med oss ​​i kommentarerna.

Utforska mer om: Webbdesign, webbutveckling, webbverktyg.