Olika webbplatser inkluderar deras externa Cascading Style Sheets på olika sätt - antingen genom att använda @import-metoden eller genom att länka till den CSS-filen. Vad är skillnaden mellan @import och länk för CSS, och hur bestämde du vilken som är bättre för dig?
Skillnaden mellan @import och länk
Länkning är den första metoden för att inkludera ett externt stilark på dina webbsidor. Det är avsett att länka din sida till ditt stilark. Det läggs till huvudet på din HTML-dokument.
Genom att importera kan du importera ett formatmall till ett annat. Detta skiljer sig något från länkscenariot eftersom du kan importera formatmallar i ett länkat formatmall.
Ur en standardperspektiv är det ingen skillnad mellan att länka till ett externt formatmall eller importera det. Hur som helst är korrekt och i båda fall fungerar de i de flesta fall lika bra. Det finns dock några anledningar till att du kanske vill använda varandra.
Varför använda @import?
För många år sedan är den vanligaste anledningen till att använda @import istället (eller tillsammans med) att äldre webbläsare inte kände igen @import, så att du kunde dölja stilar från dem. Genom att importera dina stilark skulle du i huvudsak göra dem tillgängliga för modernare, standardkompatibla webbläsare medan du "gömmer" dem från
äldre webbläsarversioner.En annan användning för @import-metoden är att använda flera formatmallar på en sida, medan endast en enda länk ingår i dokumentets huvud. Till exempel kan ett företag ha ett globalt formatmall för varje sida på webbplatsen, med underavsnitt som har ytterligare stilar som endast gäller den underavsnittet. Genom att länka till underavsnittets stilark och importera de globala stilarna högst upp i den stilen du behöver inte ha ett gigantiskt formatmall med alla stilar för webbplatsen och alla underavsnitt. Det enda kravet är att alla @importregler måste komma före resten av dina stilregler. Arv kan fortfarande vara ett problem.
Varför använda Link?
Den främsta anledningen till att använda länkade stilark är att tillhandahålla alternativa stilark för dina kunder. Webbläsare som Firefox, Safari och Opera stöder attributet rel = "alternate stylesheet" och när det finns en sådan kan tittarna växla mellan dem. Du kan också använda en JavaScript-omkopplare för att växla mellan formatmallar i IE - oftast används med Zooma layouter för tillgänglighetsändamål.
En av nackdelarna med att använda @import är att om du har ett mycket enkelt huvud med bara @importregeln, kan dina sidor visa en "blixt av ostylat innehåll" när de laddas. En enkel lösning på detta är att se till att du har minst en ytterligare länk eller skriptelement i huvudet.
Vad sägs om medietypen?
Många författare hävdar att du kan använda medietypen för att dölja stilark från äldre webbläsare. Ofta nämner de denna idé som en fördel med att använda antingen @import eller, men du kan ställa in media skriv med endera metoden och äldre webbläsare som inte stöder mediatyper kommer inte att visa dem i någon av dem fall.
Så vilken metod ska du använda?
De flesta utvecklare använder idag länk och importerar sedan stilark till externa stilark. På det sättet har du bara en eller två rader kod att justera i dina HTML-dokument. Men kärnan är att det är upp till dig. Om du är mer bekväm med @import, välj det! Båda metoderna är kompatibla med standarder och om du inte planerar att stödja riktigt gamla webbläsare finns det ingen stark anledning att använda någon av dem.