Ако сте погледали око Веба и гледали код различитих веб страница, једна ствар коју сте приметили јесте да различити сајтови садрже своје спољне ЦСС датотеке на различите начине - било кориштењем @импорт приступа или повезивањем с тим ЦСС датотека. Каква је разлика између @импорта и линк-а за ЦСС и како сте одлучили који је бољи за вас? Хајде да погледамо!
Разлика између & # 64; импорт и & лт; линк & гт;
Пре него што одлучите који метод користити за укључивање ваших стилских листова, требате разумјети за шта су намијењена два метода.
<линк> - Повезивање је први метод за укључивање спољашњег стила на веб странице. Намењен је повезати вашу Веб страницу са вашим листом стилова. Додаје се у <хеад> вашег ХТМЛ документа овако:
<линк хреф = "стилес.цсс" рел = "стилесхеет">@импорт - Увоз вам омогућава да увезете један стилски лист у други. Ово је мало другачије од сценарија везе, јер можете увести листе стилова унутар повезаног стила. Ако укључите @импорт у главу вашег ХТМЛ документа, пише овако:
<стиле типе = "тект / цсс"> @ импорт урл ("стилес.цсс");Са становишта становишта, нема разлике између повезивања са вањским листом стилова или увоза. У сваком случају је тачно и било који начин ће радити једнако добро (у већини случајева). Међутим, постоји неколико разлога због којих бисте могли да користите један од другог.
Зашто користити & # 64; импортирати?
Прије много година, најчешћи разлог који је дат за коришћење @импорт умјесто (или заједно са) <линк> је то што старији претраживачи нису препознали @импорт, тако да можете сакрити стилове од њих. Увозом ваших листова стилова, у суштини ћете их стављати на располагање модернијим претраживачима који одговарају стандардима док их "скривају" од старијих верзија претраживача.
Друга употреба за @импорт метод је кориштење више листова стилова на страници, док само укључује само једну везу у <хеад> документу. На пример, корпорација може имати глобални стилски стил за сваку страницу на сајту, са подсекцијама које имају додатне стилове који се односе само на тај потез. Ако се повежете на стилски ставак подсектора и увозите глобалне стилове на врху тог стила, не морате да одржавате гигантски стилски стил са свим стиловима за сајт и сваки под-одељак. Једини услов је да било која правила @импорта треба да дођу пре остатка правила стила. Такође, обавезно запамтите да наслеђивање и даље може бити проблем.
Зашто користити & лт; линк & гт ;?
Први разлог за кориштење повезаних стилских листова је пружање алтернативних стилских листова за ваше купце. Бровсери као што су Фирефок, Сафари и Опера подржавају атрибут рел = "алтернате стилесхеет" и када постоји једна доступна, омогућити ће гледаоци да се пребаце између њих. Такође можете да користите ЈаваСцрипт прекидач за пребацивање између листа стилова у ИЕ. Ово се најчешће користи са Зоом Лаиоутс-има ради приступа.
Један од недостатака коришћења @импорт-а је да ако имате једноставну <хеад> само правило @импорт у њему, ваше странице могу приказати "блиц необрађеног садржаја" (ФОУЦ) док се учитавају. Ово може бити узбудљиво за ваше гледаоце. Једноставно решење за ово је да бисте били сигурни да имате најмање један додатни <линк> или <сцрипт> елемент у својој <хеад>.
Шта се ради о медијима?
Многи писци дају изјаву да можете користити врсту медија да сакријете стилове стила из старијих прегледача. Често то помињу као користи за коришћење @импорт или <линк>, али истина је да можете подесити врсту медија било којим методом, а старији претраживачи који не подржавају типове медија неће их видети у оба случаја .
Који метод треба да користите?
Лично, више волим да користим <линк>, а затим импорт листова стилова у моје спољне стил листе, као и већина веб дизајнера данас. На тај начин имам само 1 или 2 линије кода за прилагођавање у мојим ХТМЛ документима. Али, у основи, то је на теби. Ако вам је удобније са @импорт-ом, онда идите на то! Обе методе су усклађене са стандардима и осим ако нисте планирали да подржите стварно старе прегледаче, нема ни јаких разлога за њихово коришћење.
Исправио / ла Јереми Гирард дана 2/7/17