Diferite site-uri includ externele lor Foi de stil în cascadă în moduri diferite - fie utilizând abordarea @import, fie prin conectarea la acel fișier CSS. Care este diferența dintre @import și link pentru CSS și cum ați decis care dintre ele este mai bună pentru dvs.?
Diferența dintre @import și Link
Conectarea este prima metodă de includere a unei foi de stil externe pe paginile dvs. web. Este destinat conectării paginii cu foaia de stil. Se adaugă la capul tău Document HTML.
Importarea vă permite să importați o foaie de stil în alta. Acest lucru este ușor diferit de scenariul de legătură, deoarece puteți importa foi de stil într-o foaie de stil legată.
Din punct de vedere al standardelor, nu există nicio diferență între conectarea la o foaie de stil externă sau importarea acesteia. Oricare dintre ele este corect și oricare dintre ele va funcționa la fel de bine în majoritatea cazurilor. Cu toate acestea, există câteva motive pentru care ați putea dori să le folosiți una peste alta.
De ce să folosiți @import?
Cu mulți ani în urmă, cel mai frecvent motiv care a fost dat pentru utilizarea @import în loc (sau împreună cu) este pentru că browserele mai vechi nu recunosceau @import, astfel încât să le puteți ascunde stilurile. Importând foile de stil, le-ați pune în esență la dispoziția browserelor mai moderne, conforme cu standardele, în timp ce le „ascundeți” de versiuni mai vechi de browser.
O altă utilizare a metodei @import este de a utiliza mai multe foi de stil pe o pagină, incluzând doar un singur link în capul documentului. De exemplu, o corporație ar putea avea o foaie de stil globală pentru fiecare pagină de pe site, cu subsecțiuni care au stiluri suplimentare care se aplică numai acelei subsecțiuni. Prin conectarea la foaia de stil a sub-secțiunii și importarea stilurilor globale din partea de sus a stilului respectiv foaie, nu trebuie să mențineți o foaie de stil gigant cu toate stilurile pentru site și pentru fiecare subsecțiune. Singura cerință este ca orice regulă @import să apară înaintea celorlalte reguli de stil. Moştenire poate fi în continuare o problemă.
De ce să folosiți Link?
Motivul nr. 1 pentru utilizarea foilor de stil conectate este furnizarea de foi de stil alternative pentru clienții dvs. Browsere precum Firefox, Safari și Opera acceptă atributul rel = "alternative sheet" și, atunci când există unul, va permite spectatorilor să comute între ele. De asemenea, puteți utiliza un comutator JavaScript pentru a comuta între foile de stil din IE - cel mai des utilizate cu Planuri de zoom în scopuri de accesibilitate.
Unul dintre dezavantajele utilizării @import este că, dacă aveți un cap foarte simplu, cu doar regula @import, paginile dvs. pot afișa un „flash de conținut nestilat” pe măsură ce se încarcă. O soluție simplă la acest lucru este să vă asigurați că aveți cel puțin un link suplimentar sau un element de script în cap.
Ce zici de tipul media?
Mulți scriitori afirmă că puteți utiliza tipul media pentru a ascunde foile de stil de la browserele mai vechi. Adesea, menționează această idee ca un avantaj al utilizării fie a @import sau, dar puteți seta mass-media tastați cu oricare dintre metode, iar browserele mai vechi care nu acceptă tipurile media nu le vor vizualiza nici în caz.
Deci, ce metodă ar trebui să utilizați?
Majoritatea dezvoltatorilor folosesc astăzi link și apoi importă foi de stil în foi de stil externe. În acest fel, aveți doar una sau două linii de cod de ajustat în documentele dvs. HTML. Dar linia de jos este că depinde de tine. Dacă sunteți mai confortabil cu @import, atunci mergeți la el! Ambele metode sunt conforme cu standardele și, cu excepția cazului în care intenționați să acceptați browsere foarte vechi, nu există niciun motiv puternic pentru a utiliza niciuna dintre acestea.