Skupina Več izbirnikov CSS za izboljšanje hitrosti obremenitve
Učinkovitost je pomemben dejavnik uspešne spletne strani. Ta stran mora biti učinkovita pri uporabi slik na spletu . S tem bo zagotovljeno, da se spletno mesto dobro obnese za obiskovalce in hitro naloži na svoje naprave. Učinkovitost mora biti tudi del vašega celotnega procesa, ki vam pomaga ohranjati napredek spletnega mesta pravočasno in v proračunu.
Na koncu učinkovitost igra vlogo pri vseh vidikih oblikovanja spletne strani in dolgoročnega uspeha, tudi v slogih, napisanih za liste CSS na tem spletnem mestu. Zmožnost ustvarjanja bolj čistih, čistejših CSS datotek je idealna in eden od načinov, kako to doseči, je združevanje več selektorjev CSS.
Izbirniki skupine
Ko združite izbirnike CSS , uporabite iste sloge v več različnih elementov, ne da bi ponovili sloge v vašem slogovnem listu. Namesto, da bi imeli dve ali tri ali več pravil CSS, ki vse naredijo isto stvar (na primer, določite barvo nečesa na rdečo), imate eno samo pravilo CSS, ki se doseže za vašo stran.
Obstaja več razlogov, zakaj ta "združevanje selektorjev" koristi stran. Prvi offt, vaš slogovni list bo manjši in obremenitve hitreje. Pravzaprav, listi slogov niso eden glavnih krivcev pri počasnih nakladalnih mestih. CSS datoteke so besedilne datoteke, zato so celo zelo dolgi listi CSS majhni, velikost datoteke je v primerjavi z neobčutljivimi slikami. Kljub vsemu se šteje vsaka malo in če lahko obrišete nekaj velikosti CSS in naložite strani, ki so veliko hitreje, je to vedno dobra stvar.
Na splošno so nadpovprečne hitrosti obremenitve za spletna mesta krajše od 3 sekunde; 3 do 7 sekund je približno povprečno, več kot 7 sekund pa je prepočasno. Te majhne številke pomenijo, da morate, da jih dosežete z vašo spletno stranjo, storiti vse, kar lahko! Zato lahko pomagate ohraniti spletno mesto hitro z uporabo združenih izbirnikov CSS.
Kako izbrati skupine CSS
Če želite skupino selekcij CSS združiti v svoj slogovni list, uporabite vejice, da v slogu ločite več skupinskih selektorjev . V spodnjem primeru slog vpliva na p in div elemente:
div, p {barva: # f00; }Z vejico v bistvu pomeni "in". Torej ta izbirnik velja za vse elemente odstavka in vse elemente razdelka. Če vejica manjka, bi bili namesto tega vsi elementi odstavka, ki so otroci delitve. To je zelo različna vrsta selektorja, zato ta vejica resnično spremeni pomen selektorja!
Vsako obliko izbirnika je mogoče združiti v katerikoli drug selektor. V tem primeru je izbirnik razreda združen z izbirnikom ID:
p.red, #sub {barva: # f00; }Torej, ta slog velja za kateri koli odstavek z atributom razreda »rdeča« in katerikoli element (ker nismo določili, katere vrste) ima atribut ID »pod«.
Skupino poljubno število selektorjev lahko združite, vključno z izbirniki, ki so enojne besede in izbirniki izbirnih elementov. Ta primer vključuje štiri različne selektorje:
p, .red, #sub, div a: povezava {color: # f00; }To pravilo CSS velja za naslednje:
- Vsak element odstavka
- Vsak element z razredom "rdeče"
- Vsak element z ID-jem "pod"
- "Povezava" psevdo razreda sidrnih elementov, ki so dekendenti delitve.
Zadnji izbirnik je sestavljen selektor. Vidite lahko, da je zlahka v kombinaciji z drugimi selektorji v tem pravilniku CSS. S tem pravilom nastavljamo barvo # f00 (kar je rdeča) na teh štirih selektorjih, kar je za pisanje 4 ločenih selektorjev prednost za enak rezultat.
Druga prednost združevanja selektorjev je, da če želite narediti spremembo, lahko uredite eno samo pravilo CSS namesto več. To pomeni, da s tem pristopom prihranite težo in čas strani, ko gre za ohranitev mesta v prihodnosti.
Vsak selektor je lahko združen
Kot je razvidno iz zgornjih primerov, lahko vsak veljaven izbirnik postavi v skupino in vsi elementi v dokumentu, ki se ujemajo z vsemi združenimi elementi, bodo imeli isti slog glede na to slogovno znamko.
Nekateri ljudje raje navedejo združene elemente v ločenih vrsticah za čitljivost v kodi. Videz na spletni strani in hitrost obremenitve ostajajo enaki. Na primer lahko v eni vrstici kode združite sloge, ločene z vejicami, v eno slogovno znamko:
th, td, p.red, div # firstred {barva: rdeča; }
ali pa lahko sloge na posameznih vrsticah navedete za jasnost:
th,
td,
p.red,
div # prvi
{
barva: rdeča;
}
Vsaka metoda, ki jo uporabljate za združevanje več izbirnikov CSS, pospeši vaše spletno mesto in olajša upravljanje stilov na dolgi rok.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 5/8/17.