Forskellen mellem @import og link til CSS-filer

click fraud protection

Forskellige steder inkluderer deres eksterne Cascading Style Sheets på forskellige måder - enten ved at bruge @import-metoden eller ved at linke til den CSS-fil. Hvad er forskellen mellem @import og link til CSS, og hvordan besluttede du, hvilken der er bedre for dig?

Forskellen mellem @import og link

Linking er den første metode til at inkludere et eksternt stilark på dine websider. Det er beregnet til at linke din side med dit stilark. Det føjes til lederen af ​​din HTML-dokument.

Import giver dig mulighed for at importere et typografiark til et andet. Dette er lidt anderledes end linkscenariet, fordi du kan importere typografiark inde i et linket typografiark.

Fra et standard synspunkt er der ingen forskel mellem at linke til et eksternt typografiark eller importere det. Uanset hvad er korrekt, og begge måder fungerer i de fleste tilfælde lige så godt. Der er dog et par grunde til, at du måske vil bruge den ene frem for den anden.

Hvorfor bruge @import?

For mange år siden er den mest almindelige årsag, der blev brugt til at bruge @import i stedet (eller sammen med), fordi ældre browsere ikke genkendte @import, så du kunne skjule stilarter for dem. Ved at importere dine stilark vil du i det væsentlige stille dem til rådighed for mere moderne, standardkompatible browsere, mens du "skjuler" dem fra

instagram viewer
ældre browserversioner.

En anden anvendelse af @import-metoden er at bruge flere typografiark på en side, mens det kun inkluderer et enkelt link i dokumentets hoved. For eksempel kan et selskab have et globalt typografiark for hver side på webstedet med underafsnit, der har yderligere typografier, der kun gælder for det underafsnit. Ved at linke til underafsnitstypearket og importere de globale stilarter øverst i den stil ark, behøver du ikke vedligeholde et gigantisk typografiark med alle typografierne for webstedet og hver underafsnit. Det eneste krav er, at eventuelle @import-regler skal komme inden resten af ​​dine stilregler. Arv kan stadig være et problem.

Hvorfor bruge link?

Årsagen nr. 1 til at bruge sammenkædede stilark er at levere alternative stilark til dine kunder. Browsere som Firefox, Safari og Opera understøtter attributten rel = "alternate stylesheet", og når der er en tilgængelig, kan seerne skifte mellem dem. Du kan også bruge en JavaScript-switcher til at skifte mellem typografiark i IE - oftest brugt med Zoomlayouts af tilgængelighedsformål.

En af ulemperne ved at bruge @import er, at hvis du har et meget simpelt hoved med bare @import-reglen, kan dine sider muligvis vise et "flash af ustyleret indhold", mens de indlæses. En simpel løsning på dette er at sikre, at du har mindst et ekstra link eller scriptelement i dit hoved.

Hvad med medietypen?

Mange forfattere hævder, at du kan bruge medietypen til at skjule stilark fra ældre browsere. Ofte nævner de denne idé som en fordel ved at bruge enten @import eller, men du kan indstille medierne skriv med begge metoder, og ældre browsere, der ikke understøtter medietyper, kan ikke se dem i nogen af ​​dem sag.

Så hvilken metode skal du bruge?

De fleste udviklere bruger i dag link og importerer derefter stilark til eksterne stilark. På den måde har du kun en eller to linier kode til at justere i dine HTML-dokumenter. Men bundlinjen er, at det er op til dig. Hvis du er mere komfortabel med @import, så prøv det! Begge metoder overholder standarder, og medmindre du planlægger at støtte rigtig gamle browsere, er der ingen stærk grund til at bruge nogen af ​​dem.

instagram story viewer