Minimering af filstørrelsen i CSS-stilarket er blevet betragtet af mange som en god måde at øge dit sidens indlæsningshastighed. Faktisk ved at reducere CSS-filen med flere kilobytes, vil serveren tage kortere tid til at indlæse og resultere i en hurtigere webside.
I tilfælde af at dine artikler rammer Digg-forsiden, kan dette også være en af de få afgørende faktorer (der er mange flere), om din server vil gå ned eller ej.
Nogle af de mest almindelige metoder, der bruges til at minimere / optimere et CSS stilark, indebærer eliminering af ubrugte vælgere, uønsket whitespace, faner, kommentarer og ændring af longhand-deklarationen til stenografi noteringer.
Jeg ved, at nogle af jer her ikke er tech-savvy nok til at redigere din egen CSS kode, så her vil jeg give dig nogle af de nyttige værktøjer, du kan bruge til at optimere din CSS kode, selvom du ikke har helt kendskab til CSS-kodning.
Tjek din CSS-kode
W3C CSS Validator
W3C CSS validatoren er et værktøj, som du kan bruge til at validere dit CSS. Du kan enten downloade Java-validatoren til din computer og bruge den offline eller bruge online-formularen til at kontrollere din CSS-kode.
CSS Validator Firefox-tilføjelse
For at gøre det lettere for dig at validere din CSS-kode, er der denne Firefox-udvidelse - CSS Validator - som du kan installere i din browser. Når du er installeret, kan du nemt og hurtigt tjekke din kode med et højre museklik.
CSSCheck
Selvom din CSS-kode er valideret, betyder det ikke, at den er fri for fejl. Valideringen betyder kun, at den overholder de CSS-standarder, der er fastsat af W3C. Hvis du vil validere såvel som kigger på nogle få browser kompatibilitetsproblemer med dit stylesheet, så er CSSCheck et godt værktøj til dig.
CSS Analyzer
CSS Analyzer er et nyttigt værktøj, der gør det muligt at validere dit stylesheet mod W3C's standard, udføre en farvekontrasttest og en test for at sikre, at relevante størrelser er angivet i relative måleenheder.
Hvis du undrer dig over, er farvekontrasttesten at kontrollere, at forgrunds- og baggrundsfarvekombinationerne giver tilstrækkelig kontrast, når du ser på dem, der har farveunderskud eller vises på en sort / hvid skærm.
Opret din CSS-kode op
Dust-Me Selectors
Dust-Me Selectors er en Firefox-udvidelse, der finder ubrugte CSS-selektorer på den side, du ser. Når du tester efterfølgende sider af det samme domæne, krydses resultatet med de tidligere data, og eventuelle valgte selekter krydses fra listen. Du kan bruge den til at teste individuelle sider eller få det til at spider hele webstedet.
I sidste ende får du en rapport om de selektorer, der ikke bruges overalt på webstedet. Du kan så fjerne disse selektorer fra dit stylesheet (mindre kode betyder mindre filstørrelse).
CSS Redundancy Checker
I lighed med Dust-Me Selectors kontrollerer dette værktøj dit websted for ubrugte og overflødige CSS-selektorer. Det eneste der er anderledes er, at du skal manuelt indtaste URI'en for hver side, du vil teste.
Optimer og komprimer din CSS kode
Når du har gennemført kontrol af gyldigheden af din CSS og renset for unødvendig kode, er det på tide at optimere CSS-filen og reducere den til den mindste mulige størrelse.
CSS Tidy
CSS Tidy er en open source-software, som du kan bruge til at optimere og komprimere din CSS-fil. Den er tilgængelig i .exe-format (kun Windows) og et zip-format for php-script (alle platforme, til webudviklere). Hvad CSS Tidy gør, fjerner hovedsagelig kommentaren, unødvendig hvide rum og ændrer nogle af koden til stenografi. Under kompression kan du vælge mellem kodelæsbarhed eller maksimal komprimering. Afhængigt af længden af din kode kan du nemt opnå et kompressionsforhold på op til 30% eller mere.
Da CSS Tidy er et open source-projekt, har der været flere hjemmesider, der bruger koden og gjort det til et online værktøj til folk at bruge. Her er nogle af dem:
- REN CSS
- Kode Beautifier
- CSS Formatter og Optimizer fra CSS Portal
Andre CSS Optimizers
FlumpCakes CSS Optimizer
En simpel optimizer, der leveres med flere muligheder, som du kan vælge imellem.
Robson CSS Kompressor
Selvom det kan se ud som andre, har jeg fundet kompressionshastigheden for Robson CSS Compressor til at være den højeste blandt dem alle. Selv om det kommer med flere muligheder for at tilpasse indstillingen, efterlader alle mulighederne uberørt (alle indstillede muligheder) altid producerer det bedste resultat.
CSS-drev CSS kompressor
CSS-kompressoren, der tilbydes af CSS Drive, kommer i to tilstande, som du kan bruge: Regular og Advanced. I den almindelige tilstand skal du kun vælge hvilket komprimeringsniveau du vil have (Lys, Normal eller Super Compact), og CSS Compressor vil gøre resten. I avanceret tilstand får du flere muligheder og et større eksempel på, hvordan du vil have dit stylesheet optimeret.
CSS Optimizer
CSS Optimizer fra mabblog.com er en kommandolinjeapplikation til Mac og Linux. Det er beregnet til dem, der er mere komfortable med terminalen end en online-grænseflade. Der er også en simpel online version tilgængelig for dem, der hurtigt vil få det over og færdige med.
Forhåbent er de værktøjer, der er angivet her, nok til at tilpasse og optimere dit CSS stilark. Hvis du har brugt andre værktøjer, der er mere nyttige end dem, der er nævnt ovenfor, kan du dele dem med os i kommentarerne.