Többszörös CSS választók csoportja a betöltési sebesség javításához
A hatékonyság fontos tényező a sikeres weboldalon. Az oldalnak hatékonynak kell lennie a képek online használatával kapcsolatban . Ez segít annak biztosításában, hogy a webhely jól teljesítsen a látogatók számára, és gyorsan töltse be eszközeiket. A hatékonyságnak az Ön átfogó folyamatának is része kell, hogy segítsen a webhely időbeni és költségkeretének fenntartásában.
Végül a hatékonyság szerepet játszik a weboldal létrehozásának és hosszú távú sikerének minden vonatkozásában, beleértve az adott webhely CSS lapjaira írt stílusokat is. A szebb, tisztább CSS fájlok létrehozása ideális, és az egyik módja ennek, ha több CSS szelektort csoportosít.
Csoportosító választók
Amikor csoportosítja a CSS szelektort , ugyanazokat a stílusokat alkalmazza több különböző elemre anélkül, hogy megismételné a stíluslap stílusait. Ahelyett, hogy két vagy három vagy akár több CSS-szabályt kapna, amelyek mindegyike ugyanazt csinálja (pl. Valami pirosra állítja be a színét), egy CSS-szabályod van, amely az Ön oldalára teljesít.
Számos oka van annak, hogy ez a "csoportosító szelektorok" előnyös egy oldalt. Először is, a stíluslap kisebb lesz, és gyorsabban töltődik be. Természetesen a stíluslapok nem a legfontosabb bűnösök, amikor a lassú rakodási helyekről van szó. A CSS-fájlok szöveges fájlok, így a valóban hosszú CSS-lapok apróak, fájlméretûek, összehasonlítva az optimális képekkel. Mégis, minden apróság számít, és ha meg tudja borotálni a CSS méretét és betölti az oldalakat, sokkal gyorsabb, ez mindig jó dolog.
Általánosságban elmondható, hogy az oldalak átlagos terhelési sebessége kevesebb, mint 3 másodperc; 3-7 másodperc átlagosan, és több mint 7 másodperc túl lassú. Ezek az alacsony számok azt jelentik, hogy ahhoz, hogy elérje webhelyét, mindent meg kell tennie, amire csak lehet! Ezért segíthet megőrizni webhelye gyors ütemezését csoportosított CSS-szelektorok használatával.
A CSS-választók csoportosítása
Ha CSS-szelektort szeretnénk csoportosítani a stíluslapunkon, akkor vesszővel vesszük össze a több csoportosított szelektort a stílusban. Az alábbi példában a stílus befolyásolja a p és div elemeket:
div, p {color: # f00; }A vessző lényegében azt jelenti, hogy "és". Tehát ez a választó minden bekezdéselemre és minden megosztási elemre érvényes. Ha a vessző hiányzik, akkor minden olyan bekezdéselem lenne, amely egy részleg gyermeke. Ez egy nagyon másfajta választó, tehát ez a vessző valóban megváltoztatja a választó jelentését!
Bármelyik választó bármely más szelektorral csoportosítható. Ebben a példában egy osztályválasztó egy ID-választóval van csoportosítva:
p.red, #sub {color: # f00; }Tehát ez a stílus a "piros" osztály attribútummal rendelkező bármely bekezdésre vonatkozik, és bármely olyan elemre (mivel nem adtuk meg, hogy melyik fajta), amelynek azonosítója az "al".
Csoportos számú szelektort csoportozhat, beleértve az egyes szavakat és a szelektorkészleteket is. Ez a példa négy különböző szelektort tartalmaz:
p, .red, #sub, div a: link {szín: # f00; }Tehát ez a CSS szabály a következőkre vonatkozna:
- Bármely bekezdéselem
- Bármely elem a "piros"
- Minden olyan elem, amelynek "al"
- A horgonyelemek "összekötő" pszeudosztálya, amelyek egy divízió lehajlói.
Az utolsó választó egy vegyes választó. Láthatja, hogy ez könnyen kombinálható a CSS szabály más szelektoraival. Ezzel a szabályzattal a # f00 (azaz piros szín) színét állítjuk be a 4 szelektorra, amely előnyösebb, ha 4 különálló szelektort írunk be, hogy ugyanazt az eredményt elérjük.
A szelektorképzés csoportosításának másik előnye az, hogy ha változtatni szeretne, akkor egyetlen CSS-szabályt is szerkeszthet a több helyett. Ez azt jelenti, hogy ez a megközelítés csökkenti az oldal súlyát és idejét, amikor fenntartja a webhelyet a jövőben.
Bármely választó csoportosítható
Amint a fenti példákból látható, minden érvényes kijelölő elhelyezhető egy csoportba, és a dokumentum összes olyan eleme, amely megfelel az összes csoportosított elemnek, ugyanazt a stílust fogja használni, mint a stílus tulajdonsága.
Vannak, akik inkább a csoportosított elemeket szeretnék felsorolni külön sorokban olvashatóság céljából a kódban. A weboldal megjelenése és a terhelési sebesség ugyanaz marad. Például a vesszőkkel elválasztott stílusokat egy kódsorban egy stílus tulajdonsággal kombinálhatja:
th, td, p.red, div # firstred {szín: piros; }
vagy az egyes sorok listáját a tisztaság érdekében felsorolhatja:
th,
td,
p.red,
div # firstred
{
piros szín;
}
Bármelyik módszer, amellyel több CSS-szelektor csoportosítása felgyorsítja webhelyét, és megkönnyíti a stílusok hosszú távú kezelését.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 18/5/17.