Grupiranje višestrukih CSS izbora za poboljšanje brzine učitavanja
Učinkovitost je važan čimbenik uspješne web stranice. Ta web lokacija bi trebala biti učinkovita u načinu upotrebe slika na mreži . To će omogućiti da se web-lokacija izvrši dobro za posjetitelje i da se brzo učita na svojim uređajima. Učinkovitost također treba biti dio vašeg cjelokupnog procesa, što vam pomaže da zadržite napredak web mjesta na vrijeme i na proračun.
Na kraju, učinkovitost igra ulogu u svim aspektima stvaranja web stranice i dugoročnom uspjehu, uključujući stilove koji su napisani za CSS stranice tog web mjesta. Biti u stanju stvoriti slabije, čišće CSS datoteke je idealno, a jedan od načina na koji to možete postići grupiranjem više CSS selektora zajedno.
Odabiri za grupiranje
Kada grupirate CSS odabire , primjenjujete iste stilove na nekoliko različitih elemenata bez ponovljenih stilova u svojem listi stila. Umjesto da imate dva ili tri ili čak više pravila CSS-a, a sve to isto (primjerice, postavite boju nečega crvenom bojom), imate jedno pravilo CSS-a koje se ostvaruje za vašu stranicu.
Postoji niz razloga zašto ova "grupacija selektora" koristi stranicu. Prvo, vaš će list stila biti manji i učitati brže. Doduše, stilski listovi nisu jedan od glavnih krivaca kada je riječ o sporim mjestima učitavanja. CSS datoteke su tekstualne datoteke, tako da čak i jako dugi CSS listovi su sitni, veličine datoteke mudri, u usporedbi s neoptimiziranim slikama. Ipak, svako malo se broji, a ako možete obrijati neku veličinu svog CSS-a i učitati stranice puno brže, to je uvijek dobra stvar za napraviti.
Općenito, iznadprosječne brzine učitavanja za mjesta su manje od 3 sekunde; 3 do 7 sekundi je prosječno, a više od 7 sekundi je previše sporo. Ovi mali brojevi znače da, kako biste ih postigli s vašom web lokacijom, morate učiniti sve što možete! Zato možete pomoći da se vaša web-lokacija brže upotrebljava grupiranim CSS odabirima.
Kako odabrati grupne CSS izbornike
Da biste grupirali selektore CSS-a u svoj list stila, koristite zareze da biste razdvojili više grupiranih odabira u stilu. U primjeru u nastavku stil utječe na elemente p i div:
div, p {color: # f00; }Točka zapravo znači "i". Zato se ovaj selektor primjenjuje na sve stavke stavke i sve elemente podjele. Ako je zarez nedostajao, umjesto toga će biti svi elementi stavka koji su dijete podjele. To je vrlo drugačija vrsta selektora, tako da ova zareza stvarno mijenja značenje izbornika!
Bilo koji oblik selektor može se grupirati s bilo kojim drugim selektorom. U ovom primjeru, selektor klase grupiran je s ID selektorom:
p.red, #sub {boja: # f00; }Dakle, taj se stil primjenjuje na bilo koji stavak s klasičnim atributom "crveno" i bilo kojem elementu (budući da nismo naveli koja vrsta) koja ima ID atribut "pod".
Zajedno možete grupirati bilo koji broj selektora, uključujući odabire koji su pojedinačne riječi i selektori kompundiranja. Ovaj primjer uključuje četiri različita odabira:
p, .red, #sub, div a: link {boja: # f00; }Tako će se ovo pravilo CSS primijeniti na sljedeće:
- Bilo koji element stavka
- Svaki element s klasom "crvene"
- Svaki element s ID-om "pod"
- Pluta klasa "veze" sidrenih elemenata koji su pobornici podjele.
Taj zadnji selektor je spojni selektor. Možete vidjeti da se to jednostavno može kombinirati s ostalim selektorima u ovom pravilu CSS. S tim pravilom postavljamo boju # f00 (crveno) na tim 4 selektora, što je poželjno napisati 4 zasebna odabira za postizanje istog rezultata.
Još jedna prednost grupiranja selektora je da, ako trebate napraviti promjenu, možete urediti samo jedan CSS pravilo umjesto više. To znači da vam ovaj pristup štedi težinu i vrijeme stranice kada je u pitanju održavanje stranice u budućnosti.
Birač se može grupirati
Kao što možete vidjeti iz gore navedenih primjera, svaki valjni birač može se postaviti u grupu, a svi elementi u dokumentu koji odgovaraju svim grupiranim elementima imat će isti stil koji se temelji na tom entitetu stila.
Neki ljudi više vole popisati grupirane elemente na zasebnim crtama radi čitljivosti u kodu. Pojava na web stranici i brzina učitavanja ostaju ista. Na primjer, možete kombinirati stilove odvojene zarezima u jedan entitet stila u jednoj liniji koda:
th, td, p.red, div # firstred {boja: crvena; }
ili možete navesti stilove na pojedinačnim redcima radi jasnoće:
og,
td,
p.red,
div # firstred
{
boja: crvena;
}
Bilo koja metoda koju upotrebljavate za grupiranje više CSS odabira ubrzava vašu web-lokaciju i olakšava upravljanje stilovima dugoročno.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 18.05.17.