CSS står for cascading stylesheets som er et vigtigt aspekt af moderne webdesign. Hvis du er webdesigner og ved, hvordan du designer WordPress-temaer eller blogger-skabeloner, kan du ikke ignorere CSS længere. Men hvis du har en blog og vil optimere CSS-filerne for bedre ydeevne og hurtigere indlæsning, er her alle de værktøjer, du har brug for.

Sådan finder du CSS-filen i din blogskabelon

Hvis din blog er på WordPress, placeres CSS-filen ideelt i temaermappen under wp-indhold / temaer / dintheme . For at kende det nøjagtige sted skal du åbne din blog og tjekke sidekilden. Du finder et link til CSS af dit tema som vist nedenfor

Hvis din blog er på Blogger, skal du åbne Blogger-dashboardet og gå til fanen "Layout". Vælg "Rediger HTML" og afkrydsningsfeltet "Udvid widget skabeloner". Derefter kopieres CSS-koden i en notesblokfil, der er defineret lige efter åbningskroppens tag.

Download en kopi af den pågældende fil og foretag de ændringer, der beskrives i denne vejledning. Det ville være bedre, hvis du tager en sikkerhedskopi af stilarket, hvis ting går galt, kan du gendanne dit websteds design ved at bruge backupen.

Optimer CSS-koden

Formater din CSS-kode

Det første skridt i retning af optimering af en hvilken som helst CSS-kode er korrekt formatering. Du skal omhyggeligt formatere stilelementer og attributter, så de er lette at forstå. Desuden skal koden skrives, så de ikke overlapper hinanden med andre klasser eller ID'er. Formatering af koden manuelt er et hårdt arbejde, og du kan bruge værktøjet Format CSS til at komme i gang.

Kopier stilarket, som du vil formatere og indsætte det i tekstboksen. Vælg derefter de foretrukne formateringsregler fra højre panel.

For eksempel: Du kan eventuelt indsætte en ny linje efter CSS-ejendommen for hver div-tag. Du kan også fjerne alle de hvide mellemrum, der er placeret efter et semikolon. Indstil alle de regler, som du vil have programmet til at udføre, og tryk derefter på knappen "Format CSS". Alle de angivne regler vil blive anvendt, og koden vil blive formateret som vist nedenfor:

Optimer CSS for at fjerne afskedigelser

Nu hvor du har formateret din kode til læsbarhed, er det tid til nogle optimeringer. Gå til Online CSS optimizer og indsæt hele koden i den angivne tekstboks. Du kan også indtaste webadressen til din CSS-fil, hvis du vil.

Dette værktøj kan bruges til følgende formål:

  • konvertere alle RGB farveværdier til hexadecimal og dermed reducere overhead og øge effektiviteten.
  • fjern alle kommentarer og hvide mellemrum.
  • optimer grænseværdierne til moderne beregninger. For eksempel: Attributets grænse: 2px 5px 2px 5px ændres til grænse: 2px 5px ;.
  • konvertere absolutte værdier til relative. For eksempel: Attributets skrifttypestørrelse: 18px; kan ændres til skrifttypestørrelse: 2em;
  • konverterer flere baggrund, skrifttype, margen, polstring, listattributter til en enkelt attribut.

Rengør din CSS-fil og reducer størrelse

Nu er det tid til at rense din CSS kode for fejl og reducere filstørrelsen. At reducere størrelsen på CSS er vigtig, da det påvirker belastningstiden på dine blogs sider. Gå til Clean CSS og indsæt CSS-koden, som du optimerede i det tidligere trin. Vælg komprimeringsfunktionen som højeste og vælg de viste muligheder

Clean CSS er baseret på CSS Tidy og kan bruges til at fusionere stenografiegenskaber, komprimere farver og skrifttypevægte. Et lignende værktøj til komprimering af CSS-kode til hurtigere indlæsning er CSS-drev.

Nogle tips

Følgende er nogle tips og tricks du bør huske på, mens du skriver CSS-koden til din blogs skabelon:

1. Brug altid eksterne stilark i stedet for at indsætte hele koden før mærket.

2. Brug universelle klasser for at undgå gentagelser. For eksempel: Du kan bruge en simpel klasse div.floatleft {float: left;} til at flyde ethvert element til venstre i stedet for at bruge samme attribut på flere klasser.

3. Brug browserspecifikke CSS-filer til at fastsætte fejl. Det betyder, at hvis du får øje på en fejl, der kun forekommer i en bestemt browser (normalt Internet Explorer 6 eller ældre versioner), skal du bruge et separat stilark til at rette fejlen. Dette holder dit hoved stilark rent og rent.

For WordPress-bloggere : Ud over at optimere CSS-koden, skal du tjekke, hvordan du reducerer blogs sideindlæsningstid, og hvordan du skal rydde op i WordPress-databasen.

Har du optimeret CSS til din blogskabel endnu? Hvad er dine yndlingsværktøjer til optimering af CSS-kode? Del dine ideer i kommentarfeltet.