Skip to content

Mietitkö, mikä ero on CSS: n ”@IMPORT” ja ”LINK” välillä?

20 de maaliskuu de 2021

Eri sivustot sisältävät ulkoiset CSS-tyylitaulukonsa eri tavoin – joko käyttämällä @import-lähestymistapaa tai linkittämällä kyseiseen CSS-tiedostoon. Mitä eroa on @importin ja CSS-linkin välillä, ja miten päätit, mikä niistä on sinulle parempi?

Ero @importin ja välillä

Linkittäminen on ensimmäinen tapa sisällyttää ulkoinen tyylisivu verkkosivuillesi. Sen on tarkoitus linkittää sivusi tyylisivullesi. Se lisätään HTML-dokumenttisi päähän.

Tuonnin avulla voit tuoda yhden tyylisivun toiseen. Tämä on hieman erilainen kuin linkkiskenaario, koska voit tuoda tyylitaulukoita linkitetyn tyylitaulukon sisään.

Standardin näkökulmasta ei ole eroa ulkoisen tyylisivun linkittämisen tai sen tuomisen välillä. Kumpikin tapa on oikea ja kumpi tahansa toimii yhtä hyvin useimmissa tapauksissa. On kuitenkin olemassa muutama syy, miksi haluat ehkä käyttää toisiaan.

Miksi käyttää @importia?

Monta vuotta sitten yleisin syy, joka annettiin käyttämään @importia (tai yhdessä sen kanssa) , johtuu siitä, että vanhemmat selaimet eivät tunnistaneet @importia, joten voit piilottaa tyylit niistä. Tuo tyylisivut tuodaan ne olennaisesti saataville nykyaikaisemmille, standardeja noudattaville selaimille samalla, kun ”piilotat” ne vanhemmista selainversioista.

Toinen tapa käyttää @import -menetelmää on käyttää useita tyylitaulukoita sivulla samalla, kun sisällytät vain yhden linkin asiakirjan päähän. Esimerkiksi yrityksellä voi olla yleinen tyylitaulukko jokaiselle sivuston sivulle, ja alaosioilla on ylimääräisiä tyylejä, jotka koskevat vain kyseistä alaosaa. Linkittämällä alaosaston tyylitaulukkoon ja tuomalla yleiset tyylit kyseisen tyylisivun yläosaan sinun ei tarvitse ylläpitää jättimäistä tyylitaulukkoa, jossa on kaikki sivuston ja jokaisen alaosuuden tyylit. Ainoa vaatimus on, että kaikkien @import-sääntöjen on oltava ennen muita tyylisääntöjäsi. Perintö voi silti olla ongelma.

Miksi käyttää ?

Syy linkitettyjen tyylitaulukoiden käyttöön on tarjota vaihtoehtoisia tyylitaulukoita asiakkaillesi. Selaimet, kuten Firefox, Safari ja Opera, tukevat rel = ”vaihtoehtoinen tyylitaulukko” -määritettä, ja kun sellainen on käytettävissä, katsojat voivat vaihtaa niiden välillä. Voit myös vaihtaa tyylisivun välillä IE: ssä JavaScript-kytkimellä – useimmiten sitä käytetään Zoom Layoutsin kanssa esteettömyystarkoituksiin.

Yksi haittoista @importin käyttämisessä on, että jos sinulla on hyvin yksinkertainen pää, jossa on vain @import -sääntö, sivuillasi saattaa näkyä ”tyylittömän sisällön salama” ladattaessa. Yksinkertainen korjaus tähän on varmistaa, että sinulla on ainakin yksi ylimääräinen linkki tai komentosarjaelementti päässäsi.

Entä mediatyyppi?

Monet kirjoittajat väittävät, että mediatyypin avulla voit piilottaa tyylisivut vanhemmilta selaimilta. Usein he mainitsevat tämän idean eduksi joko @import- tai -toiminnolle, mutta voit asettaa mediatyypin jommallakummalla tavalla, ja vanhemmat selaimet, jotka eivät tue mediatyyppejä, eivät näe niitä kummassakaan tapauksessa.

Joten mitä menetelmää sinun pitäisi käyttää?

Useimmat kehittäjät käyttävät nykyään linkki- ja tuontityyliarkkeja ulkoisiin tyylilehtiin. Tällä tavalla sinulla on vain yksi tai kaksi koodiriviä muokattavaksi HTML-asiakirjoissasi. Mutta viimeinen asia on, että se on sinun tehtäväsi. Jos olet mukavampi @importin kanssa, jatka sitä! Molemmat menetelmät ovat standardien mukaisia, ja ellet aio tukea todella vanhoja selaimia, kummallekaan ei ole vahvaa syytä.