Skupinové výbery CSS na zlepšenie rýchlosti načítania
Efektívnosť je dôležitým faktorom úspešnej webovej stránky. Táto stránka by mala byť efektívna v tom, ako používa obrázky online . To pomôže zabezpečiť, aby stránky fungovali dobre pre návštevníkov a rýchlo sa načítavali na svojich zariadeniach. Účinnosť by mala byť súčasťou vášho celkového procesu, čo vám pomôže udržať pokrok v čase a rozpočte.
Nakoniec efektívnosť hrá úlohu vo všetkých aspektoch vytvárania webových stránok a dlhodobého úspechu, a to aj v štýloch, ktoré sú písané pre CSS listy tejto stránky. Umožniť vytvoriť štíhlejšie a čistejšie súbory CSS je ideálne a jeden zo spôsobov, ako to dosiahnuť, je zoskupenie viacerých prepínačov CSS dohromady.
Skupinové výbery
Keď zoskupíte výbery CSS , použijete rovnaké štýly na niekoľko rôznych prvkov bez toho, aby ste opakovali štýly v štýle štýlov. Namiesto toho, aby ste mali dve alebo tri alebo dokonca viac pravidiel CSS, z ktorých všetky robia to isté (napríklad nastavte farbu niečoho na červenú), máte jediné pravidlo CSS, ktoré dosiahne vašu stránku.
Existuje niekoľko dôvodov, prečo toto "zoskupenie selektorov" prináša prospech na stránku. Najskôr bude váš štýl štýlu menší a rýchlejšie načítať. Je pravda, že štýlové listy nie sú jedným z hlavných vinníkov, pokiaľ ide o pomalé nakladanie stránok. Súbory CSS sú textové súbory, takže aj naozaj dlhé listy CSS sú nepodstatné, veľkosť súborov múdre, v porovnaní s neoptimalizovanými obrázkami. Napriek tomu sa každý kúsok počíta, a ak môžete oholiť určitú veľkosť vášho CSS a načítať stránky oveľa rýchlejšie, to je vždy dobré urobiť.
Všeobecne platí, že nadpriemerné rýchlosti zaťaženia pre lokality sú menej ako 3 sekundy; 3 až 7 sekúnd je priemerný a viac ako 7 sekúnd je príliš pomalý. Tieto nízke čísla znamenajú, že na ich dosiahnutie s vašimi stránkami musíte urobiť všetko, čo je možné! To je dôvod, prečo môžete pomôcť udržať vaše stránky rýchle pomocou skupinových voličov CSS.
Ako Skupinové výbery CSS
Ak chcete zoskupiť prepínače CSS do vášho štýlu, používajte čiarky na oddelenie viacerých zoskupených voličov v štýle. V nižšie uvedenom príklade štýl ovplyvňuje prvky p a div:
div, p {farba: # f00; }Čiarka v podstate znamená "a". Tento volič sa teda vzťahuje na všetky prvky odseku a všetky prvky rozdelenia. Ak by čiarka chýbala, namiesto toho by boli všetky odstavcové prvky, ktoré sú dieťaťom rozdelenia. To je veľmi odlišný druh selektora, takže táto čiarka skutočne mení význam selektora!
Každá forma selektora môže byť zoskupená s akýmkoľvek iným voličom. V tomto príklade je volič triedy zoskupený pomocou voliča ID:
p.red, #sub {farba: # f00; }Takže tento štýl sa vzťahuje na akýkoľvek odsek s atribútom triedy "červená" a akýkoľvek prvok (pretože sme neurčili, ktorý druh), ktorý má atribút ID "sub".
Môžete zoskupiť ľubovoľný počet voličov dohromady vrátane voličov, ktoré sú samostatnými slovami a výberovými jednotkami. Tento príklad obsahuje štyri rôzne voľby:
p, .red, #sub, div a: odkaz {farba: # f00; }Toto pravidlo CSS by sa teda vzťahovalo na nasledujúce:
- Každý prvok odseku
- Každý prvok s triedou "červená"
- Každý prvok s ID "sub"
- Pseudotrieda "spojenia" prvkov kotvy, ktoré sú dekadentmi rozdelenia.
Tento posledný selektor je zložený selektor. Môžete vidieť, že je jednoducho kombinované s ostatnými selektormi v tomto pravidle CSS. S týmto pravidlom nastavujeme farbu # f00 (ktorá je červená) na týchto 4 voličoch, čo je lepšie ako písanie 4 samostatných selektorov na dosiahnutie toho istého výsledku.
Ďalšou výhodou skupinových výberov je, že ak potrebujete vykonať zmenu, môžete upraviť jedno jediné pravidlo CSS namiesto viacerých. To znamená, že tento prístup vám ušetrí váhu stránky a čas, pokiaľ ide o udržiavanie stránky v budúcnosti.
Každý výber môže byť zoskupený
Ako vidíte z vyššie uvedených príkladov, akýkoľvek platný výber môže byť umiestnený do skupiny a všetky prvky dokumentu, ktoré zodpovedajú všetkým zoskupeným prvkom, budú mať rovnaký štýl založený na vlastnosti štýlu.
Niektorí ľudia dávajú prednosť tomu, aby sa zoskupené prvky na samostatných riadkoch zobrazovali v čitateľnosti. Vzhľad na webových stránkach a rýchlosť nakladania zostávajú rovnaké. Môžete napríklad kombinovať štýly oddelené čiarkami do jedného štýlu v jednom riadku kódu:
th, td, p.red, div # prvé {farba: červená; }
alebo môžete pre jednoduchosť zobraziť štýly na jednotlivých riadkoch:
th,
td,
p.red,
div # firstred
{
farba: červená;
}
Každá metóda, ktorú používate na zoskupenie viacerých výberov CSS, urýchľuje vaše stránky a uľahčuje dlhodobú správu štýlov.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 5/8/17.