11 Handige tools om uw CSS-bestand te controleren, op te ruimen en te optimaliseren

Het minimaliseren van de bestandsgrootte van de CSS-stylesheet is door velen gezien als een goede manier om de laadsnelheid van uw site te verhogen. Inderdaad, door het CSS-bestand met enkele kilobytes te verkleinen, zal de server een kortere tijd nodig hebben om te laden en resulteren in een snellere webpagina.

In het geval dat uw artikelen de voorpagina van Digg raken, kan dit ook een van de weinige beslissende factoren zijn (er zijn er veel meer) of uw server crasht of niet.

Enkele van de meest gebruikte methoden om een ​​CSS-stylesheet te minimaliseren / optimaliseren, zijn het elimineren van ongebruikte selectors, ongewenste witruimte, tabbladen, opmerkingen en het wijzigen van de lange-afstandsverklaring in steno-notaties.

Ik weet dat sommigen van jullie hier niet technisch onderlegd zijn om je eigen CSS-code te bewerken, dus hier zal ik je enkele van de nuttige hulpmiddelen bieden die je kunt gebruiken om je CSS-code te optimaliseren, zelfs als je helemaal geen kennis hebt van CSS-codering.

Controleer uw CSS-code

W3C CSS Validator

De W3C CSS-validator is een hulpmiddel dat u kunt gebruiken om uw CSS te valideren. U kunt de Java-validator downloaden naar uw computer en deze offline gebruiken, of het online formulier gebruiken om uw CSS-code te controleren.

CSS Validator Firefox-add-on

Om het voor u gemakkelijker te maken om uw CSS-code te valideren, is er deze Firefox-extensie - CSS Validator - die u in uw browser kunt installeren. Na installatie kunt u eenvoudig en snel uw code controleren met een rechtermuisknop.

CSSCheck

Hoewel uw CSS-code is gevalideerd, betekent dit niet dat deze geen fouten bevat. De validatie betekent alleen dat het voldoet aan de CSS-standaarden die zijn ingesteld door de W3C. Als je wilt valideren en een paar problemen met browsercompatibiliteit met je stylesheet wilt bekijken, dan is CSSCheck een goed hulpmiddel voor jou.

CSS Analyzer

CSS Analyzer is een handig hulpmiddel waarmee u uw stylesheet kunt valideren aan de hand van de W3C-norm, een kleurcontrasttest kunt uitvoeren en een test kunt uitvoeren om ervoor te zorgen dat relevante groottes worden gespecificeerd in relatieve maateenheden..

In het geval dat je je afvraagt, is de kleurcontrastentest om te controleren of de voorgrond- en achtergrondkleurencombinaties voldoende contrast bieden wanneer ze worden bekeken door iemand met kleurenstoornissen, of wanneer ze worden bekeken op een zwart-wit scherm.

Ruim je CSS-code op

Dust-Me Selectors

Dust-Me Selectors is een Firefox-extensie die ongebruikte CSS-kiezers op de pagina die u bekijkt vindt. Terwijl u de volgende pagina's van hetzelfde domein test, wordt het resultaat vergeleken met de vorige gegevens en worden alle aanwezige selectors uit de lijst verwijderd. Je kunt het gebruiken om afzonderlijke pagina's te testen of om het de hele site te laten spinnen.

Uiteindelijk krijg je een rapport over de selectors die nergens op de site worden gebruikt. U kunt vervolgens die selectors uit uw stylesheet verwijderen (kleinere code betekent kleinere bestandsgrootte).

CSS Redundancy Checker

Vergelijkbaar met Dust-Me Selectors, controleert dit hulpprogramma uw site op ongebruikte en overtollige CSS-kiezers. Het enige dat anders is, is dat u de URI handmatig moet invoeren voor elke pagina die u wilt testen.

Optimaliseer en comprimeer uw CSS-code

Nadat u de geldigheid van uw CSS hebt gecontroleerd en onnodige code hebt opgeschoond, wordt het tijd om het CSS-bestand te optimaliseren en het zo klein mogelijk te maken..

CSS Tidy

CSS Tidy is een open source-software die u kunt gebruiken om uw CSS-bestand te optimaliseren en te comprimeren. Het is beschikbaar in .exe-indeling (alleen Windows) en een gecomprimeerde php-scriptindeling (alle platforms, voor webontwikkelaars). Wat CSS Tidy doet, is vooral de opmerking verwijderen, onnodige witruimte en een deel van de code in steno veranderen. Tijdens compressie kunt u kiezen tussen leesbaarheid van de code of maximale compressie. Afhankelijk van de lengte van uw code, kunt u eenvoudig een compressieverhouding van maximaal 30% of meer bereiken.

Omdat CSS Tidy een open source-project is, zijn er verschillende websites die de code gebruiken en deze hebben omgezet in een online tool die mensen kunnen gebruiken. Hier zijn er een paar:

• SCHONE CSS
• Code Beautifier
• CSS Formatter en Optimizer van CSS Portal

Andere CSS-optimalisatoren

FlumpCakes CSS Optimizer

Een eenvoudige optimizer met verschillende opties waaruit u kunt kiezen.

Robson CSS-compressor

Hoewel het er hetzelfde uit kan zien als andere, heb ik de compressieratio voor Robson CSS Compressor als het hoogste van allemaal gevonden. Hoewel het wordt geleverd met verschillende opties om de instelling te wijzigen, blijven alle opties onaangetast (alle opties aangevinkt) levert altijd het beste resultaat op.

CSS Drive CSS-compressor

De CSS Compressor aangeboden door CSS Drive wordt geleverd in twee modi die u kunt gebruiken: Normaal en Geavanceerd. In de normale modus hoeft u alleen maar te selecteren welk compressieniveau u wilt (Light, Normal of Super Compact) en de CSS Compressor doet de rest. In de geavanceerde modus krijgt u meer opties en meer zeggenschap over hoe u uw stylesheet wilt optimaliseren.

CSS Optimizer

De CSS Optimizer van mabblog.com is een opdrachtregeltoepassing voor Mac en Linux. Het is bedoeld voor diegenen die meer vertrouwd zijn met de terminal in plaats van een online interface. Er is ook een eenvoudige online versie beschikbaar voor diegenen die het snel willen overnemen en klaar zijn.

Hopelijk zijn de hier genoemde hulpmiddelen voldoende om uw CSS-stylesheet aan te passen en te optimaliseren. Als u andere hulpmiddelen heeft gebruikt die nuttiger zijn dan de hierboven genoemde, deel deze dan met ons in de opmerkingen.

Meer informatie over: Webontwerp, Webontwikkeling, Webmasterhulpprogramma's.