У чым розніца паміж @import і спасылкі на CSS?

Калі вы зірнулі вакол Web і праглядаць код розных вэб-старонак, адна рэч, якую вы, магчыма, заўважылі, што розныя сайты ўключаюць у свае знешнія CSS файлы рознымі спосабамі - альбо з дапамогай @import падыходу або спасылкі на якія CSS файл. У чым розніца паміж @import і спасылкі на CSS і як вы вырашылі, які з іх лепш для вас? Давайце паглядзім!

Розніца паміж & # 64; імпарт і & LT; спасылка & GT;

Перш чым вырашыць, які метад выкарыстаць для ўключэння табліцы стыляў, вы павінны разумець, што гэтыя два метаду былі прызначаныя для выкарыстання.

<Спасылка> - Linking з'яўляецца першым спосабам , уключаючы знешнюю табліцу стыляў на вэб - старонках. Ён прызначаны, каб звязаць разам ваш вэб-старонку з табліцай стыляў. Ён дадаецца ў вашай HTML-дакумента, як гэта:

<Спасылка HREF = "styles.css" отн = "Табліца стыляў">

@import - Імпарт дазваляе імпартаваць адну табліцу стыляў у іншы. Гэта крыху адрозніваецца ад сцэнара сувязі, таму што вы можаце імпартаваць табліцы стыляў ўнутры сувязных стыляў. Калі вы ўключылі @import ў галаве вашага HTML-дакуменце, напісана так:

<Тып стыль = "тэкст / CSS"> @ імпарт URL ( "styles.css");

З пункту гледжання стандартаў, няма ніякай розніцы паміж спасылкамі на знешнюю табліцу стыляў або імпартаваць яго. У любым выпадку гэта правільна і ў любым выпадку будзе аднолькава добра працаваць (у большасці выпадкаў). Тым не менш, ёсць некалькі прычын, вы можаце выкарыстоўваць адзін над іншым.

Навошта выкарыстоўваць & # 64; імпарт?

Шмат гадоў таму, найбольш распаўсюджанай прычынай таго, што было дадзена для выкарыстання @import замест (або разам з) <спасылка> таму, што старыя браўзэры не прызнаюць @import, так што вы можаце схаваць стылі ад іх. Пры імпарце табліцы стыляў, вы па сутнасці будзе зрабіць іх даступнымі для больш сучасных стандартаў, сумяшчальных браўзэраў у той час як «хаваецца» іх ад старых версій браўзэраў.

Іншае прымяненне метаду @import заключаецца ў выкарыстанні некалькіх табліц стыляў на старонцы, у той час як толькі уключаючы адну спасылку ў вашым дакуменце . Напрыклад, карпарацыя можа мець глабальныя табліцы стыляў для кожнай старонкі на сайце, з падраздзелаў, якія маюць дадатковыя стылямі, якія прымяняюцца толькі да гэтага падраздзела. Звязваючы з падраздзелаў стыляў і імпартуючы глабальныя стылі ў верхняй частцы гэтай табліцы стыляў, вы не павінны падтрымліваць гіганцкую табліцу стыляў з усімі стылямі для сайта і кожнага падраздзела. Адзінае патрабаванне складаецца ў тым, што любыя правілы @import павінна прыйсці да канца сваіх правілаў стылю. Акрамя таго , абавязкова памятаць , што ўспадкоўванне па- ранейшаму можа быць праблемай.

Навошта выкарыстоўваць & Lt; & спасылку GT;?

Нумар адзін прычына для выкарыстання звязаных табліц стыляў, каб забяспечыць альтэрнатыўныя табліцы стыляў для вашых кліентаў. Такія браўзэры як Firefox, Safari і Opera падтрымліваюць отн = атрыбут «альтэрнатыўны» табліцы стыляў і калі ёсць адзін даступны дазволіць гледачам перамыкацца паміж імі. Вы можаце таксама выкарыстоўваць перамыкач JavaScript, каб пераключацца паміж табліцамі стыляў у IE. Гэта найбольш часта выкарыстоўваецца зум макетаў для мэтаў даступнасці.

Адным з недахопаў выкарыстання @import з'яўляецца тое, што калі ў вас ёсць вельмі просты толькі з правілам @import ў ім, старонкі могуць паказвацца «ўспышка кантэнту без стыляў» (FOUC), як яны загружаюцца. Гэта можа быць страсенне да вашых гледачам. Простае выпраўленне да гэтага, каб пераканацца, у вас ёсць па меншай меры адзін дадатковы <спасылка> або элемент