Obstaja več načinov, kako lahko na spletno stran uporabite sloge CSS, vključno z zunanjimi listi slogov ali celo z inline slogi . Če uporabljate zunanji slogovni list, ki je priporočljiv način, da narekujete videz in videz dokumenta HTML, je eden od pristopov uporabljati @import.
Pravilo @import vam omogoča, da v dokumentu shranite pomembne zunanje liste slogov - bodisi v HTML strani ali celo v druge dokumente CSS. Razbijanje velikega števila slogov v številne manjše, ciljne datoteke (eno za postavitev, eno za tipografijo , eno za slike itd.) Lahko včasih olajša upravljanje teh datotek in različnih stilov, ki jih vsebujejo. Če želite izkoristiti to ugodnost, je treba uvoziti te različne datoteke, kar boste morali storiti, da bodo vsi delali za prikaz svoje spletne strani.
Uvažanje v HTML
Če želite uporabiti pravilo @import v vašem HTML-u, bi temu
dokumenta dodali naslednje::
@import url ("/ styles / default.css");
Ta koda zdaj uvaža ta slogovni list za uporabo na tej strani HTML in lahko upravljate vse svoje sloge v eni datoteki. Na spodnji strani pomembnih slogovnih slogov je, da ta metoda ne omogoča vzporednih prenosov. Stran mora prenesti celotno slogovno tabelo, preden se premakne na preostalo stran, vključno z vsemi drugimi datotekami CSS, ki jih uvozite po tej metodi. To bo imelo negativen učinek na hitrost vaše strani in učinkovitost prenosa. Glede na to, kako pomembna je uspešnost strani za današnji uspeh na spletnem mestu, je ta pomanjkljivost morda razlog, zakaj bi se radi izognili uporabi programa @import.
Alternativni pristop
Kot alternativo uporabi @import v vašem HTML-ju lahko povežete s to datoteko CSS, kot je ta:
To deluje zelo podobno kot @import, saj vam omogoča, da upravljate vse svoje CSS iz ene osrednje lokacije / datoteke, vendar je ta metoda bolj priporočljiva v pogledu prenosa. Če še vedno želite segmentirati različne vrste slogov v ločene datoteke, lahko to storite še naprej in uporabite funkcijo @import v glavni datoteki CSS. To pomeni, da se lahko vaše zunanje CSS datoteke še vedno upravljajo posamezno, toda ker se vsi uvažajo v en glavni CSS, se izboljša učinkovitost.
Uvažanje v CSS
Uporaba zgornjega primerka bi prinesla datoteko »default.css« na vaši HTML strani. V tej datoteki CSS boste imeli različne sloge strani. Na teh straneh lahko najdete vse te sloge, ali pa lahko uporabite @import, da jih razčlenite, da boste lažje upravljali. Recimo, da uporabljamo 4 ločene datoteke CSS - eno za postavitev, eno za tipografijo in eno za slike. Četrta datoteka je naša "master" datoteka, s katero povezujemo našo stran (za ta primer je to "default.css"). Na samem vrhu te glavne datoteke CSS lahko dodamo pravila, prikazana spodaj:
@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');
Upoštevajte, da morajo biti ta pravila pred vsemi ostalimi vsebinami v vaši datoteki CSS, da lahko delajo. Pred temi uvoznimi predpisi ne morete imeti drugih slogov CSS!
Pod temi uvoznimi pravili lahko dodate katere koli druge sloge CSS, ki jih želite imeti v privzetem listu. Ko je ta glavna datoteka CSS naložena, bo najprej uvozila te ločene datoteke in dodala svoje sloge na sam vrh sloga. Potem bo pod te uvožene tiste vse ostale sloge, ki bodo ustvarili celotno datoteko CSS, ki jo bo uporabil spletni brskalnik za prikaz vaše strani. Upravljate manjše, bolj osredotočene datoteke, medtem ko imate še vedno en sam stil, povezan s tem HTML-jem.
Uporaba »uvoza« za medijske poizvedbe
Ena stvar, ki jo lahko razmislite o tem, ločuje medijske poizvedbe svojega spletnega mesta za odzivne sloge spletnega mesta v ločeno datoteko. Ker so ti odzivni slogi lahko zmedeni, ko jih gledate skupaj z drugimi slognimi pravili vašega spletnega mesta, je njihova privlačnost v drugi datoteki lahko privlačna. Ena zaskrbljenost pri tem pristopu je, da mora biti vaša pravila za @import prva, to pomeni, da bodo vaše medijske poizvedbe naložene pred ostalimi slogi vašega spletnega mesta. Pri ustvarjanju prvega odzivnega spletnega mesta, ki se odziva na uspešnost, je verjetno, da bo to težava. Zato vam priporočamo, da ločeno odznačite odzivne sloge spletnega mesta in uporabite @import, da jih prinese na svojo spletno stran. Da, morda se zdi, da imajo koristi od tega, vendar pomanjkljivosti prevladajo nad temi koristmi.
Ali moram uporabiti »uvoz«?
Ne, ne. Mnoge strani preprosto prikazujejo vse svoje glavne sloge v eni datoteki in, kolikor je to velika datoteka, se to upravlja (to je, kako to storim v svojem delu). Če najdete pomoč @import, je lahko del vašega poteka dela. V nasprotnem primeru lahko varno izdelate spletne strani, ki svojo posamezno slogovno oznako vseh pravil CSS.
Podpora brskalnika
Zelo stari brskalniki imajo težave z nekaterimi od teh pravil @import, vendar ti brskalniki v teh dneh verjetno ne bodo problem. To še zlasti velja, ko je minilo konec roka za starejše različice Internet Explorerja. Končno, če se odločite za uporabo pravil @import v vašem HTML ali CSS, ne smete naleteti na težave z zapuščenimi različicami spletnih brskalnikov, razen če imate čudno potrebo po podpori neverjetno starejših različic IE.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard.