Ajánlások a css, w3 oktatás teljesítményének növelésére
A legtöbb ember több fájlt használ a CSS létrehozásához különböző típusú eszközök (média típusok), például monitor képernyők, nyomtatók vagy PDA-k számára. Ebben az esetben a fájlok a weboldalhoz vagy a média attribútumhoz tartozó link elemekhez vannak csatolva. vagy egy @ importálás szabály segítségével, amely egy vagy több médiatípust határoz meg.
Nincs semmi baj abban, hogy a CSS-t több fájlba osztjuk és így csatoljuk őket (az írás idején ez hogyan történik a webhelyünkön), de két hátránya van: több HTTP-kérést eredményez a böngészőből a kiszolgálóhoz és Több CSS fájl tényleges állapotának támogatása egyszerre.
Egyesek a CSS-t több fájlra terjesztik, és nem csak a különböző médiatípusok miatt, hanem azért is, mert a webhelyszakaszokba vagy a megfelelő stíluslapok tartalmához (helymeghatározás, színek, tipográfia) tartoznak.
Szerencsére nekem és azoknak, akik ugyanazt csinálják, mint én, van egy módja annak, hogy az összes CSS-t egyetlen fájlba ágyazzuk.
Használja a @media szabályt
A @media szabály lehetővé teszi, hogy a CSS-szabályokat egy fájlba csoportosítsa, attól függően, hogy milyen eszközöket kíván használni. A @media szabályoktól eltérő szabályok érvényesek minden olyan eszközre, amelyre a CSS-fájlt maga alkalmazza.
Az alábbiakban egy olyan stíluslap, amely a @media szabályokat használja:
Mivel a fenti szabályok egy CSS-fájlban vannak, amelyet minden típusú eszközre alkalmaznak, a következő rendelkezések érvényesek:
- A képernyő- és vetítőmédia típusokhoz a szöveg sötétszürke lesz, a háttér pedig egy ismétlődő képből áll.
- Médiatípus nyomtatás esetén a szöveg fekete lesz, a háttér fehér lesz.
- A médiatípus kézi számítógépet használó felhasználók. sötétzöld színt alkalmazzon a szövegre, és a háttér fehér lesz.
- Minden más médiatípus esetében a szöveg sötétszürke lesz, a háttér fehér.
Használhatja ezt a módszert vagy sem, de azt tapasztaltuk, hogy csökkenti a redundanciát és csökkenti azt a kockázatot, hogy egy vagy több médiatípust átugornak a következő CSS szerkesztés során.