Best Practices: Arbeta med CSS
Sätt Stylesheets på Top
Om du vill ha en sida att ladda successivt, det vill säga vi vill att webbläsaren ska visa allt innehåll har så snart som möjligt, placera CSS längst upp på sidan i dokumentet HEAD. Detta gör sidor verkar vara lastning snabbare, eftersom detta underlättar progressiva avbild av sidan. Detta är särskilt viktigt för sidor med mycket innehåll och för användare på långsamma Internet-anslutningar.
Det är ett dokumenterat faktum att för att förbättra användarupplevelsen är det viktigt att ge resultatindikatorer och visuella återkopplingar. För att slippa att rita delar av sidan, i fallet om deras stilar förändring, vissa webbläsare, inklusive IE, blockerar återgivning av sidan tills CSS är fullastad. På grund av detta, att användaren är får se en tom vit sida.
De W3 HTML-specifikation "anges också att CSS ska jag ta med i HEAD delen av HTML-sidan. at the bottom of the page, so it's best not to use it. Observera också att, i IE @import fungerar på samma sätt som med <link> längst ner på sidan, så det är bäst att inte använda den.
Undvik att använda Browser Särdrag
Filter: Användning av filter ökar minnet konsumtion och tillämpas per element, inte per bild, så problemet multipliceras. Dessutom Filter är IE Proprietary, kommer därför inte att fungera som avsett i andra webbläsare. Om du vill ha genomskinliga eller övertoning bakgrunder, använd 1Pixel med bilder.
Uttryck: CSS uttryck är en trevlig funktion att ha i CSS, men fortfarande är IE särdrag. Det är också viktigt att notera att dessa uttryck är utvärderas när sidan återges och storlek, rullas och även när användaren flyttar muspekaren över sidan. Självfallet kan detta påverka prestanda på din sida. Därmed i enkla ord, undvik att använda CSS uttryck, om du inte känner sina för "väger mer än cons"
Externalisera man CSS
Använda extern CSS kommer att resultera i snabbare laddning av sidor eftersom JavaScript och CSS-filer cachelagras av webbläsaren. Inline CSS i HTML-dokument blir laddas varje gång HTML-dokumentet begärs. Detta kan faktiskt minska antalet HTTP gjort förfrågningar, men det senare ökar storleken på HTML-dokumentet. Extern CSS cachelagras av webbläsaren, storleken på HTML-dokumentet minskar utan att öka antalet HTTP-förfrågningar.
Observera att om användarna på din webbplats har flera sidvisningar per session och många av dina sidor återanvända samma skript och stilmallar, finns det en större risk nytta cachade externa filer.
Packa din CSS-fil
Förpackning eller knastrande din CSS är det praxis att ta bort onödiga tecken från koden för att minska dess storlek och därmed förbättra laddningstider.
CSS kan jag knastrade genom att ta bort alla kommentarer och eventuella oönskade tecken som vita utrymmen, nyradstecken etc.
