Különböző webhelyek tartalmazzák a külső Lépcsőzetes stíluslapok különböző módon - vagy az @import megközelítés használatával, vagy az adott CSS-fájlra történő hivatkozással. Mi a különbség az @import és a CSS közötti link között, és hogyan döntötted el, melyik a jobb neked?
A @import és a Link közötti különbség
A linkelés az első módszer egy külső stíluslap weblapokra történő felvételére. Célja az oldal és a stíluslap összekapcsolása. Hozzáadódik a fejedhez HTML dokumentum.
Az importálás lehetővé teszi az egyik stíluslap importálását a másikba. Ez kissé eltér a link forgatókönyvétől, mert stíluslapokat importálhat egy összekapcsolt stíluslapon belül.
Szabványos szempontból nincs különbség a külső stíluslapra történő hivatkozás vagy az importálás között. Bármelyik út helyes, és a legtöbb esetben ugyanolyan jól fog működni. Van azonban néhány oka annak, hogy érdemes használni az egyiket.
Miért érdemes használni az @import szolgáltatást?
Sok évvel ezelőtt a @import helyett (vagy azzal együtt) történő használat okának leggyakoribb oka az, hogy a régebbi böngészők nem ismerték fel az @import alkalmazást, így elrejthette a stílusokat előlük. A stíluslapok importálásával lényegében elérhetőbbé tenné azokat a modernebb, szabványoknak megfelelő böngészők számára, miközben "elrejti" őket a
régebbi böngészőverziók.A @import metódus másik célja több stíluslap használata egy oldalon, miközben csak egyetlen linket tartalmaz a dokumentum fejében. Például egy vállalatnak lehet egy globális stíluslapja a webhely minden oldalához, az alszakaszok pedig további stílusokkal rendelkeznek, amelyek csak az adott alszakaszra vonatkoznak. Az alszakasz stíluslapjára való hivatkozással és a stílus tetején található globális stílusok importálásával lapot, nem kell gigantikus stíluslapot fenntartania, amely tartalmazza a webhely és minden stílus stílusát alszakasz. Az egyetlen követelmény, hogy minden @import szabálynak meg kell felelnie a többi stílusszabálynak. Öröklés még mindig probléma lehet.
Miért érdemes használni a Linket?
Az összekapcsolt stíluslapok használatának első számú oka az, hogy alternatív stíluslapokat nyújtson ügyfeleinek. Az olyan böngészők, mint a Firefox, a Safari és az Opera, támogatják a rel = "alternate stylesheet" attribútumot, és ha van ilyen, akkor a nézők válthatnak közöttük. Az IE stíluslapjai közötti váltáshoz JavaScript váltót is használhat - leggyakrabban ezzel együtt használják Zoom elrendezések akadálymentesség céljából.
A @import használatának egyik hátránya, hogy ha nagyon egyszerű fejed van, és csak az @import szabály van benne, akkor az oldalaid betöltés közben megjelenhetnek egy "stílus nélküli tartalom villanása". Ennek egyszerű javítása annak biztosítása, hogy legalább egy további link vagy szkriptelem legyen a fejében.
Mi a helyzet a média típusával?
Sok író azt állítja, hogy a médiatípus segítségével elrejtheti a stíluslapokat a régebbi böngészők elől. Gyakran emlegetik ezt az ötletet az @import vagy a használat előnyeként, de beállíthatja a médiát írja be bármelyik módszerrel, és a régebbi böngészők, amelyek nem támogatják a médiatípusokat, egyikben sem fogják megtekinteni őket ügy.
Tehát melyik módszert használja?
A legtöbb fejlesztő manapság linket használ, majd a stíluslapokat külső stíluslapokba importálja. Így csak egy vagy két sornyi kódot kell beállítania a HTML-dokumentumokban. De a lényeg az, hogy rajtad múlik. Ha jobban érzi magát az @import, akkor hajrá! Mindkét módszer megfelel a szabványoknak, és hacsak nem a valóban régi böngészők támogatását tervezi, nincs erős ok egyikük használatára sem.