Verwijder alle CSS-stijlen in het HTML-bestand. Stijlen opnieuw instellen met behulp van CSS Reset

Groeten aan alle lezers van het huidige artikel, evenals aan abonnees van mijn educatieve blog. U bent waarschijnlijk meer dan eens een probleem tegengekomen wanneer de stijlopmaak perfect is uitgevoerd, maar desondanks zijn de pagina's enigszins anders. Om dit te voorkomen, zal ik je vertellen wat het is css opruimen stijlen.

Na het lezen deze publicatie, leert u de geschiedenis van deze technologie kennen, analyseert u verschillende soorten stijlopschoning en kunt u uw nieuwe kennis ook consolideren door codevoorbeelden te analyseren. Laten we nu aan de slag gaan!

Hoe CSS Reset-technologie verscheen en hoe deze te gebruiken

CSS-reset is een lijst met trapsgewijze eigenschappen stijlbladen, waarmee de geprogrammeerde standaarden in browsers naar de standaardwaarden worden teruggezet.

Met deze techniek kunt u een universele webservice maken die er hoe dan ook hetzelfde uitziet en die u helpt ongebruikte stijlen te verwijderen.

Tegenwoordig zijn er veel opties voor het implementeren van reset-bibliotheken, of ze kunnen ook raamwerken worden genoemd.

Ik ben van mening dat elke zichzelf respecterende ontwikkelaar van webapplicaties een op zichzelf afgestemd resetframework zou moeten hebben. Dit kan een kant-en-klaar bestand zijn, of misschien uw eigen, persoonlijk gemaakte resetbestand.

Wat de geschiedenis betreft, voor de eerste keer vergelijkbare technologie werd in 2004 gebruikt door Crespanis Andrew. In zijn technische publicaties adviseerde hij lay-outontwerpers om dit te gebruiken universele keuzeschakelaar, d.w.z. *, en daarin de objectinspringingen resetten die standaard in elke browser zijn ingesteld.

De software-implementatie van deze techniek ziet er als volgt uit:

Een voorbeeld van hoe de aanpak van E. Crespanis werkt

Als u het voorbeeld uitvoert, ziet u dat het blok zich dicht bij de linkerbovenhoek bevindt.

Zoals ik al zei, zijn er veel oplossingen voor het opnieuw instellen van trapsgewijze stijlbladen die in browsers zijn geschreven. De eerste methode heb ik hierboven al beschreven. Er zijn nog twee eenvoudige reset-opties die slechts in een paar extra eigenschappen verschillen van de oplossing van Crespanis.

Een van de benaderingen maakt dus gebruik van extra nulstelling van alle grenzen van webobjecten (het toevoegen van de lijn rand: 0;), en in de andere - het resetten van de parameters van de randen en externe contouren van de elementen (toegevoegd aan de eerste optie overzicht: 0; rand: 0;).

Ze hebben echter allemaal een aantal nadelen. Omdat dit de allereerste versies van browserstijlcontrole zijn, zijn ze niet perfect. Neem zelfs een tekst met alinea's. Wanneer u de eerste implementatie van reset gebruikt, verdwijnen de streepjes tussen paragrafen. In dit geval zal de CSS-opmaak elke keer aangepast moeten worden.

Daarom bleven veel webgoeroes en IT-professionals de nieuwe richting verbeteren. Dus voerde Eric Meyer een reeks onderzoeken uit, bestudeerde veel werken die in die tijd waren geschreven en creëerde krachtig hulpmiddel genaamd CSS-reset.

Voorzichtig! Webmaffia! Zal elke browserstijlstandaard vernietigen!

Dus wat hebben we met CSS Reset? Deze beslissing gebruikt geen universele selector, maar stelt stijlmarkeringen in via tags. Tegelijkertijd zorgt de code voor de verwerking van “probleemgebieden”, zoals het samenvouwen van de randen, wat in sommige browsers niet goed werkt.

Ik zou een belangrijk detail willen opmerken: het opnieuw instellen van de stijlmarkering moet worden gedaan voordat andere eigenschappen worden ingesteld, aangezien CSS stijlregels op volgorde verwerkt en de waarden overschrijft van parameters die meerdere keren zijn opgegeven voor dezelfde tags.

Laten we teruggaan naar Eric Meyer en zijn CSS Reset. In zijn oplossing schrijft hij voor vrijwel alle elementen regels voor CSS-taal, beginnend bij containers en eindigend met kleine tags als strong, var, mark en andere. Hier is de officiële tweede versie van dit document: http://meyerweb.com/eric/tools/css/reset/index.html

Na het verschijnen van de hierboven beschreven optie voor het aanpassen van het site-ontwerp “one size fits all” in alle browsers, hebben veel grote bedrijven hun eigen aanpassingen gemaakt.

Yahoo! heeft een YUI CSS Reset gemaakt, die ze gratis beschikbaar hebben gesteld (je kunt deze bekijken via deze link: http://yui.github.io/yui2/#start).

Chris Poteet en gelijkgestemde mensen ontwikkelden Siolon`s CSS Browser Reset ( http://www.siolon.com/blog/browser-reset-css/). En dit kan nog heel lang doorgaan.

Hier wil ik er enkele opnoemen belangrijke regels en aanbevelingen met behulp van CSS Opnieuw instellen:

1. Zoals ik al zei, is het eerste dat zou moeten werken in de CSS-code het resetten van de parameters. Hoewel dit intuïtief is, struikelen beginners en ervaren ontwikkelaars vaak over deze fout;
2. Het wordt als een goede gewoonte beschouwd om een ​​afzonderlijk CSS-document te gebruiken voor CSS Reset. Bovendien wordt een dergelijk bestand universeel gereedschap ontwikkelaar en kan worden gebruikt in verschillende webprojecten;
3. Wees niet bang om persoonlijke aanpassingen door te voeren of uw eigen resetframeworks te creëren;
4. Probeer niet blindelings te gebruiken kant-en-klare oplossingen om stijlen opnieuw in te stellen en vervolgens enkele parameters opnieuw te definiëren. Dit bedreigt coderedundantie. En IT-mensen houden hier niet van. Daarom, in het geval van Yahoo CSS Reset, als je uitlijning in het midden nodig hebt en niet links in deze eigenschappen: caption, th (text-align: left;), voel je dan vrij om te schrijven trefwoord centrum.

Wat mij betreft, ik gebruik mijn CSS Reset, die de basis bevat algemene regels sjablonen en mijn amendementen.

Hiermee wordt het artikel afgesloten. Ik zou het op prijs stellen als u mijn werk waardeert en zich ook bij mijn abonnees voegt. Vergeet niet de link naar mijn blog te delen met je vrienden en collega's. Succes!

Tot ziens!

Met vriendelijke groet, Roman Chueshov

Lezen: 114 keer

Van de auteur: Het is nogal moeilijk om over monolithische stijlen te praten, omdat CSS-bestanden meestal vaak opgeblazen zijn. Het verwijderen van ongebruikte CSS-stijlen zou de zaken onder controle moeten krijgen. Voordat we op zoek gaan naar ongebruikte stijlen, is het de moeite waard om op te merken dat er veel andere strategieën zijn voor het schrijven van onderhoudbare stijlen. Onze stijlen kunnen worden onderverdeeld in logische delen (pagina-indeling, knoppen, rasters, widgets, etc.) en worden gebruikt duidelijk systeem naamgeving (bijvoorbeeld BEM). Meestal doen ontwikkelaars dit voordat ze zelfs maar naar ongebruikte regels zoeken. Ik denk dat dit juist is, omdat stijlen een impact op de lange termijn hebben.

Een andere reden waarom regels niet vaak worden aangepast, is dat het eenvoudigweg lastig is om ongebruikte stijlen te vinden en te verwijderen in iets dat groter is dan een klein webproject. Als de inhoud niet statisch is, hoe weet je dan welke regels worden gebruikt en waar?

Chrome-ontwikkelaarstool

Het blijkt dat in de tools Chrome-ontwikkelaar er is al een ingebouwde functie. Ik heb het getest op een site waarvan ik wist dat er veel stijlen waren die konden worden verwijderd. De gevoelens waren gemengd. De toetredingsdrempel is erg laag, vooral voor ontwikkelaars die al met het Chrome Developer Panel hebben gewerkt. Je hoeft niets te installeren, het is leuk.

Wat u moet doen om de stijlen op de site te controleren:

Open de site waarin u geïnteresseerd bent

Open het ontwikkelaarspaneel

Ga naar het tabblad audits

Selecteer een optie Webpagina Prestaties en rennen

Sommige resultaten zullen zeggen: "Verwijder ongebruikte CSS-regels". Als dit niet het geval is, hebt u geen ongebruikte stijlen. Gefeliciteerd! De resultaten zijn onderverdeeld naar stijl. De uitsplitsing vindt niet alleen plaats naar bestanden, maar ook naar stijlblokken. Echt nuttige functie, omdat we alleen de stijlen nodig hebben die we hebben geschreven. Door ten minste, binnen de reikwijdte van dit artikel.

Is dit goed?

Ik vond het niet geweldig eenvoudige manier exporteer het resultaat vanuit Chrome. Je kunt rechtstreeks vanuit een blok kopiëren, maar je moet het eerst uitbreiden. Dit maakt het analyseren van de resultaten een beetje lastig. Door de test in de browser uit te voeren, raken we verder weg van het werken met de code, wat ertoe kan leiden dat we vergeten de site te testen.

Conclusie: Handig voor starters, maar geen oplossing voor de lange termijn.

UnCSS

U kunt opdrachtregelhulpmiddelen gebruiken om ongebruikte stijlen te vinden. UnCSS is een interessant voorbeeld. Het haalt de pagina door phantomJS en vangt de stijlen op die via JS zijn ingevoegd. Ik wilde deze tool heel graag proberen omdat het mijn probleem oploste, aangezien de Chrome Developer Toolbar helemaal niet over het bewerken van code gaat. Met UnCSS kan het resultaat direct in een bestand worden opgeslagen, ideaal.

Installatie

Ik kon npm install uncss niet uitvoeren op Ubuntu. Niets ernstigs, het blijkt dat ik een paar afhankelijkheden ben vergeten. Installatie-opdrachten ontbrekende bibliotheken die ik heb uitgevoerd:

sudo apt-get update sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get install libfontconfig1 libfontconfig1-dev

UnCSS kan worden geïntegreerd in het bouwproces, maar dat slaan we voorlopig over. Ik denk dat het niet de beste manier is om het in het bouwproces in te voegen goed idee. Addy Osmani heeft een goed artikel over dit onderwerp. Idealiter zouden we ongebruikte stijlen rechtstreeks uit de code willen verwijderen, in plaats van ze alleen maar te filteren op het eindproduct.

Misschien, beste uitweg- doe beide. Voer het eerst uit als een prebuild-stap om de code te optimaliseren. Ten tweede voert u een build-stap uit om stijlen te optimaliseren waarover u geen controle heeft.

De opdrachtregel gebruiken

uncss http://uw-site.foo/ > ongebruikte-stijlen.css

Het resultaat wordt opgesplitst in your-site.com-sitestijlen en Chrome-browser, maar worden in één bestand opgeslagen. Mijn site heeft een geweldig lettertype en alle pictogrammen die niet worden gebruikt startpagina, belandde in de UnCSS-uitvoer. Het maakt mij nu niet uit. Ze kunnen worden verborgen door de opdracht opnieuw uit te voeren en negeerSheets op te geven.

Houd er rekening mee dat negeerSheets een tekenreeks kan accepteren (de volledige URL van de stijl die moet worden genegeerd) of reguliere expressie. Het is gemakkelijker met een reguliere expressie, omdat er minder tekens zijn en deze dekt mogelijke veranderingen in het pad naar het bestand.

IgnoreSheets /.*font-awesome.min.css/

Dit is de foutmelding die verschijnt wanneer de pagina een time-out heeft. De time-out kan worden verhoogd met -t N, waarbij N het aantal milliseconden is (stel niet –t 360 in en vraag je dan af waarom de code niet 5 minuten heeft gewacht).

Conclusie: UnCSS is handiger omdat het dichter bij de plaats ligt waar ik stijlen bewerk. Het uitvoerbestand is handig bij het elimineren van onnodige stijlen. Ik zie het nut ervan vanwege de optie –includeSheets, die automatisch alles negeert wat onder de reguliere expressie valt. Handig voor bijvoorbeeld WordPress-sites, waar diverse plugins hun stijlen kunnen aanpassen, maar de ontwikkelaar alleen de themastijlen style.css nodig heeft etc.

Welk hulpmiddel moet ik gebruiken?

In eerste instantie koos ik voor UnCSS en handig opdrachtregel. Terwijl ik dit artikel aan het schrijven was, probeerde ik ze echter op nog een paar sites en kreeg minder veelbelovende resultaten. In het bijzonder heb ik verschillende sites die een paar jaar geleden zijn gemaakt en die een raamwerk gebruiken waar permanent commentaar bij betrokken is /*!*…*/. Ze werken niet goed met PostCSS en daarom ook niet goed met UnCSS. Ik heb me nog niet in het probleem verdiept, maar misschien wel meer nieuwe versie PostCSS vergeeft dergelijke opmerkingen. Op dit moment is dit echter een nieuwe barrière geworden en ik kan UnCSS niet volledig in mijn werk gebruiken.

Vroeg of laat wordt elke front-end (layoutontwerper) geconfronteerd met de taak om de hele site te controleren op ongebruikte CSS-regels. Het eerste dat in je opkomt is om te googlen en een dienst of programma te vinden dat al het vuile werk voor ons zal doen.

Kortom, ik zweette en vond de volgende oplossingen:

• betaalde dienst ongebruikt-css.com
• DustMe-kiezers - FireBug-extensie voor Mozilla
• CSS-gebruik - FireBug-extensie voor Mozilla

Wat de betaalde service betreft, gaat u naar de site, voert u het siteadres in ter verificatie en klikt u op OK. Ze zullen u schrijven dat het resultaat per e-mail zal komen, uiteindelijk binnen een dag er komt een brief, dat er al een resultaat is en dat dit kan worden gedownload via de link (ga naar en u wordt gevraagd een betaling te doen om het testresultaat te downloaden). Maar wij zijn niet op zoek naar makkelijk betaalde manieren, en willen alles zelf kunnen doen, dus laten we het betaalde resultaat aan iemand anders over.

Dus laten we beginnen met wat software we zullen het nodig hebben. Allereerst hebben we nodig Mozilla Firefox. Nadat Firefox is geïnstalleerd, implementeren we de FireBug-add-on erin.

Dust Me-kiezers

De add-on Dust Me Selectors staat niet in de officiële catalogus met browser-add-ons; u kunt deze installeren door de link te volgen en op de knop Nu installeren te klikken (u moet de link uiteraard openen met FireFox). We hebben de add-on geïnstalleerd, de browser opnieuw opgestart en er verschijnt een roze bezempictogram in de rechter benedenhoek.

Nadat de extensie de pagina heeft gescand, wordt een venster geopend met drie tabbladen Ongebruikte selectors (ongebruikte regels), Gebruikte selectors (regels die worden gebruikt) en Spider log (spider - sitescannen). Er zijn twee knoppen onderaan: sla het document op en wis het scanresultaat.

Nu iets meer over Spiderlog. U moet het siteadres of het sitemapadres invoeren en op de GO! In theorie is alles duidelijk en zou alles moeten werken, maar hoe graag ik het resultaat ook wilde, het resultaat werkte niet, of beter gezegd, het lukte me een paar pagina's te scannen en de toevoeging bleef hangen, wat erg triest was, Kortom, een soort mislukking. De auteur beweert dat je de add-on nodig hebt om te werken Mozilla-versies 1.5 en hoger (dit is ook oplichting [hee] ik heb het geïnstalleerd, ja alles werkt, maar nog steeds niet zoals het zou moeten zijn). In principe is dit het enige negatieve en belangrijkste, omdat het nodig was om de hele site te controleren, maar het duurt behoorlijk lang om te controleren (ik heb een halve dag verspild aan deze onzin). Het meest positieve is dat als u de naam van de site invoert, de add-on een sitemap zal bouwen, en deze hebben we nodig voor de volgende add-on CSS-gebruik, dus zorg ervoor dat u de sitemap opslaat.

Als u één pagina moet controleren, zal deze extensie u in principe veel helpen, ik zal nog een minpunt opmerken dat elke keer dat u de add-on opent, de pagina de hele tijd wordt gescand, kortom de extensie beheren is niet erg handig, dus ik gaf het op.

CSS-gebruik

De CSS Usage-add-on in de officiële catalogus vindt u hier. Tot voor kort moest je de extensie installeren om deze te laten werken Firefox-versie 3.6.25, en op het moment dat het artikel werd geschreven, leek de auteur wakker te zijn geworden of tot bezinning te zijn gekomen en de toevoeging te hebben bijgewerkt, dus daar kun je op wedden nieuwste versie Mozill's. Nadat u deze add-on heeft geïnstalleerd en uw browser opnieuw heeft opgestart, kunt u naar de site gaan die u wilt controleren en zodra de pagina is geladen, kunt u op de F12-knop drukken (het FireBug-venster wordt geopend) en daar ziet u CSS-tabblad Gebruik:

Om de pagina te controleren op ongebruikte regels, klikt u op de knop Scannen (het scannen duurt 30 seconden of zelfs minder). Op het eerste gezicht lijkt het erop dat deze extensie slechts één pagina scant; je vraagt ​​wat je met de overige pagina's moet doen. Vergeet niet dat we de sitemap hebben opgeslagen met de Dust Me Selectors-extensie. Als de site die u controleert echter een HTML-sitemap heeft, is het beter om deze te gebruiken, maar als deze niet bestaat, maakt u er een. nieuwe pagina site en voeg een sitemap in vanuit de Dust Me Selectors-extensie (als het niet mogelijk is om deze te maken nieuwe pagina daarover hieronder meer).

Nu zal ik de reeks acties voor het scannen beschrijven:

1. open de html-sitemap
2. druk op F12 - FireBug wordt geopend
3. ga naar het tabblad CSS-gebruik
4. druk op de AutoScan-knop
5. ververs de pagina (druk op F5)

Als gevolg hiervan ontvingen we de eerste gescande pagina. U kunt het resultaat opslaan of doorgaan met scannen. Ik stel voor dat u doorgaat. Het is gemakkelijk om door te gaan met scannen, we hoeven niets te selecteren (aangezien we gekozen hebben voor automatisch scannen van pagina's), maar volg gewoon de eerste link in het siteoverzicht (het is niet nodig om de link in een nieuw venster te openen, alle acties moeten in één venster plaatsvinden).

Helemaal aan het begin van de gescande pagina worden de volgende symbolen aangegeven:

• Lijn - regellijn
• CSS-kiezer - CSS-regel
• Gezien - CSS-regel gebruikt (in lichtgroen)
• Eerder gezien - CSS-regels die eerder werden gebruikt (in donkergroen)
• Ongezien - ongebruikte CSS regels (in rood)
• :hover - CSS-regels voor elementen die focus hebben gekregen (grijs weergegeven)
• (2 scans) - toont het aantal scans (als u één pagina hebt gescand, is het aantal 1)
• export opgeschoonde css - sla het scanresultaat op

U kunt doorgaan met scannen, al moet u wel terugkeren naar de sitemap (het eerste minpuntje). U hoeft niet te haasten om te klikken, het is belangrijk dat de pagina volledig wordt geladen, u ziet de automatische scanbewerking (dat wil zeggen dat het scanresultaat wordt weergegeven in het FireBug-venster).

De extensie controleert alle opgenomen stijlbestanden. Als er veel CSS-regels op de site staan, moet u aan het wiel scrollen om het scanresultaat te zien:

Dit resultaat wordt na elk stijlbestand uitgevoerd, als er meer dan één is.

Wanneer alle pagina's zijn gescand, klikt u op de export opgeschoonde css-link, het resultaat wordt geopend in een nieuw tabblad, selecteert alles en slaat het op in een bestand met de .css-extensie, de UNUSED-tag wordt vóór elke ongebruikte regel aangegeven:

Het tweede nadeel van deze scanmethode is dat deze uitbreiding scant geen pop-up (modale) vensters van de site, het is jammer, dus je zult de CSS-regels voor modale vensters moeten kopiëren.

Ondanks twee nadelen is dit naar mijn mening de coolste een methode om een ​​stylesheetbestand te controleren op ongebruikte CSS-regels, die vandaag de dag bestaat.

Ik gebruikte het om twee stijlbestanden te optimaliseren met een totaalgewicht van 360Kb - 18.000 regels. Ik was geschokt toen ik het zag. Na alle bewerkingen met deze methode was het resultaat één stijlbestand - 90 KB en 1100 regels. Iedereen was blij met het resultaat, en ik ook. Toegegeven, het heeft lang geduurd om een ​​oplossing te vinden, de volgende keer zal alles veel sneller gaan, wat erg prettig is.

Ik was het bijna vergeten. Wat te doen als het niet mogelijk is om een ​​pagina met een sitemap te maken? In dit geval moet u elke link uit de sitemap handmatig in de adresbalk invoegen en alles zal goed werken.

En trouwens, als je voor het WordPress-sitebeheersysteem hebt gekozen, dan kun je in dit artikel leren hoe je er een sitemap voor kunt maken.

Ik merk ook op dat de betaalde service het scanresultaat binnen 24 uur verzendt, en als uw site (bron) sjablonen van 10 of 20 pagina's heeft, zal uw cheque veel minder tijd in beslag nemen dan u zult besteden aan het wachten op het resultaat ervan. Maar als het op de site staat enorme hoeveelheid pagina's en er worden verschillende sjablonen voor gebruikt, het is uiteraard aan te raden om voor zo'n service zo'n $ 25 te betalen.

Ik hoop dat je deze methode om je stijlbestand te controleren nuttig vindt.

Hallo, beste lezers van de blogsite. Dit is een kleine opmerking uit de serie 'als aandenken'. Het idee ontstond om extra regels uit het stijlenbestand te verwijderen. In de zeven jaar dat de blog bestaat, zijn er veel dingen veranderd, maar de regels in het STYLE.CSS-bestand zijn gebleven (voor het geval dat, anders vergat ik ze gewoon te verwijderen). Nu leek het mij dat het te veel begon te wegen, en daarom ontstond het idee om het schoon te maken.

Dit handmatig doen is behoorlijk moeilijk en het is niet nodig. Er zijn manieren dit proces automatiseren. Sommige werkten niet voor mij, voor sommige moest betaald worden en ik vond het niet nodig. Uiteindelijk heb ik een semi-automatische methode gebruikt, waarover ik in de volgende paar paragrafen zal schrijven. Vooruitkijkend, zal ik zeggen dat we de omvang moeten verkleinen CSS-bestand Het lukte mij bijna twee keer, wat mij zelfs enigszins verbaasde.

Opties voor het vinden van CSS-stijlen die niet nodig zijn voor de website

Het vervangen van het stijlenbestand (de inhoud ervan - ik heb de oude verwijderd en de nieuwe ingevoegd, waarna ik de wijzigingen via Filezilla heb opgeslagen) door een nieuwe (beschadigde) veroorzaakte geen zichtbare wijzigingen op de site (nog niet, tenminste , niet onthuld). Over het algemeen ben ik zeer tevreden en raad ik aan het te proberen. Snel, eenvoudig en handig (en ook nog eens gratis).

Veel geluk voor jou! Tot binnenkort op de pagina's van de blogsite

Je kunt meer video's bekijken door naar te gaan

Misschien ben je geïnteresseerd

Hoe u de laadsnelheid van de website kunt maximaliseren en de serverbelasting kunt optimaliseren
CSS - wat is het, hoe trapsgewijze stijlbladen zijn verbonden met HTML-code met behulp van Stijl en Link
Optimalisatie en CSS-compressie in Paginasnelheid - hoe uit te schakelen externe bestanden stijlen en combineer ze tot één om het laden te versnellen Rotatie instellen achtergrondkleur rijen met tabellen, lijsten en andere HTML-elementen op de website met behulp van de pseudo-klasse nth-child
Waarom heb je CSS nodig, hoe sluit je het aan? trapsgewijze tafels stijlen aan HTML-document en de basissyntaxis van deze taal
Lijststijl (type, afbeelding, positie) - CSS-regels voor maatwerk verschijning lijsten binnen HTML-code
Hoe u een snelle website kunt krijgen - optimalisatie (compressie) van afbeeldingen en scripts, en vermindering van het aantal Http-verzoeken

De gemaakte site zal voortdurend uitbreiden en op een dag zul je beseffen hoe moeilijk het is om de CSS ervan te begrijpen.

Als je het al bent tegengekomen soortgelijk probleem, dan is het tijd om uw CSS-code te controleren en te optimaliseren. We hebben 15 tools geselecteerd om u daarbij te helpen. Sommigen van hen zullen de CSS-bestandsgrootte helpen verkleinen, andere zullen de paginaprestaties verbeteren.

1. Type-o-Matic

Type-o-matic is een Firebug-plug-in die de lettertypen kan analyseren die op webpagina's worden gebruikt. Deze plug-in geeft een rapport weer in de vorm van een tabel met informatie over de eigenschappen van de gebruikte lettertypen ( familie, maat, kleur en meer).

Hoewel het rapport in tabelvorm wordt gepresenteerd, kunt u deze lijst eenvoudig bewerken door lettertypen met een vergelijkbare stijl te combineren of te verwijderen.

2.CSSCSS

De tool analyseert uw CSS-bestanden op duplicaten. Dit zal de grootte van de CSS verkleinen en het veel handiger maken om er in de toekomst mee te werken. De tool is heel eenvoudig te installeren: het is geïmplementeerd als een uitbreidingspakket voor Ruby en wordt gestart vanaf de opdrachtregel.

3. CSS-lint

Met deze tool kunt u problemen in uw CSS-code identificeren. De tool controleert de basissyntaxis van stijlen en past ook een reeks regels toe op verdachte code. Alle regels zijn plugbaar, dus je kunt ze eenvoudig wijzigen.

4. CSS-kleurbescherming

Vaak kom je klanten tegen die kleuren willen gebruiken waarvan je niet eens wist dat ze bestonden. CSS Colorguard helpt u bij het creëren van het nodige kleurenschema's en waarschuwt u als u twee identieke kleuren gebruikt.

5. CSS-graven

CSS Dig is een lokaal uitgevoerd Python-script waarmee u de CSS-eigenschappen en -waarden van vrijwel elke site kunt analyseren, ongeacht of de stijlen zich in apart bestand of in de paginacode. De tool helpt u ook bij het aanpassen, standaardiseren en optimaliseren van uw CSS-code.

6. Stof mij af

Dust-Me is een plug-in voor Firefox en Opera die ongebruikte selectors uit het stylesheet verwijdert. Gereedschap neemt allemaal CSS uw site en laat zien welke selectors worden gebruikt en welke niet nodig zijn.

7. Devilo.us

Devilo.us is een geavanceerde engine voor het comprimeren en optimaliseren van CSS-code, die nu CSS3 ondersteunt.

8. Zuiver CSS

De tool helpt u ongebruikte CSS-stijlen op websitepagina's of webapplicaties te verwijderen. Het is in staat zelfs dynamisch geladen CSS-selectors in JavaScript-code te detecteren en de grootte van stijlbestanden aanzienlijk te comprimeren.

9. Atomaire CSS

Atomic CSS helpt u uw CSS-bestanden kleiner te maken. Hiermee kunt u de laadsnelheid van de pagina optimaliseren, afhankelijkheden elimineren en nog veel meer doen.

10. Maak CSS schoon

CleanCSS is een multifunctionele CSS-optimalisatie. De tool neemt uw CSS-code en maakt deze schoner en kleiner. U kunt de geschreven code optimaliseren verschillende talen: javascript, json, python, html, enz.

11. PubCSS

De tool maakt het eenvoudig om CSS-code op te maken voor pagina's met wetenschappelijke publicaties. Dit is een bibliotheek met CSS-stijlen voor het opmaken van documenten voor afdrukken en publiceren op internet.

12. CSSO

CSSO (CSS Optimizer) is een tool die structurele optimalisatie van uw CSS-bestanden uitvoert.

13. Helium

Helium is een hulpmiddel voor het identificeren van ongebruikte CSS-eigenschappen op alle pagina's van een website. Het is gebaseerd op Javascript en draait rechtstreeks in de browser. Helium neemt een lijst met URL's van sitesecties en ontleedt vervolgens elke pagina om een ​​lijst met alle stijlen te produceren. Vervolgens worden ongebruikte CSS-eigenschappen geïdentificeerd.

14. Reacties verwijderen

Strip CSS-opmerkingen vereenvoudigt de volgende taken aanzienlijk: het verwijderen van opmerkingen uit CSS-bestanden, het verkleinen van de bestandsgrootte. Het is ook beschikbaar als plug-in voor gulp/grunt/broccoli.

15. CSS krimpt

Met de tool kunt u eenvoudig CSS-bestanden optimaliseren, terwijl de consistentie en het formaat van de opmaak behouden blijven. Het heeft verschillende hulpmiddelen waarmee u spaties en opmerkingen uit een document kunt verwijderen.

Heeft u nog andere nuttige CSS-tools in gedachten? Deel ze alsjeblieft in de reacties!

Vertaling van het artikel “ 15 CSS-hulpmiddelen om uw CSS-code te controleren en te optimaliseren” werd voorbereid door het vriendelijke projectteam