Ulike nettsteder inkluderer deres eksterne Cascading Style Sheets på forskjellige måter — enten ved å bruke @import-tilnærmingen eller ved å koble til den CSS-filen. Hva er forskjellen mellom @import og link for CSS, og hvordan bestemte du deg for hvilken som er bedre for deg?
Forskjellen mellom @import og Link
Kobling er den første metoden for å inkludere et eksternt stilark på websidene dine. Det er ment å koble siden din til stilarket ditt. Det er lagt til hodet på din HTML-dokument.
Ved å importere kan du importere ett stilark til et annet. Dette er litt annerledes enn koblingsscenariet fordi du kan importere stilark i et koblet stilark.
Fra et standardperspektiv er det ingen forskjell mellom å koble til et eksternt stilark eller importere det. Uansett er riktig, og begge måter vil fungere like bra i de fleste tilfeller. Det er imidlertid noen grunner til at du kanskje vil bruke den ene over den andre.
Hvorfor bruke @import?
For mange år siden er den vanligste årsaken som ble gitt for å bruke @import i stedet (eller sammen med) fordi eldre nettlesere ikke kjente igjen @import, slik at du kunne skjule stiler for dem. Ved å importere stilarkene dine, vil du i hovedsak gjøre dem tilgjengelige for mer moderne, standardkompatible nettlesere mens du "skjuler" dem fra
eldre nettleserversjoner.En annen bruk for @import-metoden er å bruke flere stilark på en side, mens du bare inkluderer en enkelt lenke i dokumentets hode. For eksempel kan et selskap ha et globalt stilark for hver side på nettstedet, med underseksjoner som har flere stiler som bare gjelder den underdelen. Ved å koble til underseksjonens stilark og importere de globale stilene øverst i den stilen du trenger ikke å opprettholde et gigantisk stilark med alle stilene for nettstedet og alle underavsnitt. Det eneste kravet er at eventuelle @import-regler må komme før resten av stilreglene dine. Arv kan fortsatt være et problem.
Hvorfor bruke Link?
Årsaken nr. 1 til å bruke koblede stilark er å tilby alternative stilark til kundene dine. Nettlesere som Firefox, Safari og Opera støtter attributtet rel = "alternate stylesheet", og når det er en tilgjengelig, kan seerne bytte mellom dem. Du kan også bruke en JavaScript-bryter for å veksle mellom stilark i IE - ofte brukt med Zoom oppsett for tilgjengelighetsformål.
En av ulempene ved å bruke @import er at hvis du har et veldig enkelt hode med bare @importregelen i, kan sidene dine vise et "blits av ustylert innhold" mens de lastes inn. En enkel løsning på dette er å sørge for at du har minst en ekstra lenke eller skriptelement i hodet.
Hva med medietypen?
Mange forfattere hevder at du kan bruke medietypen til å skjule stilark fra eldre nettlesere. Ofte nevner de denne ideen som en fordel ved å bruke enten @import eller, men du kan stille inn media skriv med begge metodene, og eldre nettlesere som ikke støtter medietyper, vil ikke se dem i noen av dem sak.
Så hvilken metode bør du bruke?
De fleste utviklere bruker i dag lenke og importerer deretter stilark til eksterne stilark. På den måten har du bare en eller to kodelinjer å justere i HTML-dokumentene dine. Men poenget er at det er opp til deg. Hvis du er mer komfortabel med @import, så velg det! Begge metodene er kompatible med standarder, og med mindre du planlegger å støtte veldig gamle nettlesere, er det ingen sterk grunn til å bruke heller.