Groep Multiple CSS-Selektor om Load-Speed te ferbetterjen
Efficiency is in wichtige faktor op in suksesfolle webside. Dat side moat effisjint wêze yn hoe't it online wurdt brûkt . Dit soarget derfoar dat de side goed foar besikers is en folslein op har apparaten lade . Efficiency moat ek in diel fan jo algemiene proses wêze, wat jo helpe om de tiid foarút en budzjet fan 'e foarútgong te bewarjen.
Op it lêst spilet de effisjinsje in rol yn alle aspekten fan in skepping fan in webside en lange termyn súkses, ynklusyf yn 'e stilen dy't skreaun binne foar de CSS blêden fan' e side. As jo leaner meitsje kinne, skjinner CSS-bestannen is ideaal, en ien fan 'e wizen dy jo dit berikke kinne wurde troch gearwurking fan meardere CSS-seleksjes te kombinearjen.
Groepen fan seleksjes
As jo CSS-seleksjes groeie, brûke jo deselde stilen oan ferskillende eleminten sûnder dat de stilen yn jo stylblêd werhelje. Ynstee fan twa of trije of noch mear CSS-regels, allegear dy't itselde ding dwaan (bygelyks de kleur fan wat oant read), hawwe jo in unike CSS-regel dy't jo foar jo side meitsje.
Der binne in oantal reden wêrom't dizze "groepen fan seleksjes" in side foarkomt. Earst offert, jo stylblêd sil lytser wêze en leare flugger. Fansels, stylblêden binne net ien fan 'e wichtichste skuldners as it giet om stadige laden lokaasjes. CSS-bestannen binne teksttriemmen, dus sels langer CSS-blêden binne winzig, triemgrutte wiis, as ferlike mei unoptimisearre ôfbyldings. Noch altyd elke lyts bytsje, en as jo in pear grutte fan jo CSS skine kinne en de siden lade dy't folle flugger is, dat is altyd in goeie ding te dwaan.
Yn 't algemien binne binnen de trochsneed Load-speeds foar plakken minder as 3 sekonden; 3 oant 7 sekonden giet oer gemiddelde, en mear dan 7 sekonden is krekt te langer. Dizze leechnûmers betsjutte dat, om har mei jo side te realisearjen, moatte jo alles dwaan wat jo kinne! Dêrom kinne jo jo bepaalde side bewarje mei help fan groepsgrutte CSS-seleksjes.
Hoe kinne jo CSS Selektor groepke
Om CSS-seleksjes tegearre te kombinearjen yn jo stylblêd, brûk jo kommas om meardere groepen selektearren te ûnderskieden yn 'e styl. Yn it hjirboppe foarbyld hat de styl ynfloed op de p en div-eleminten:
div, p {color: # f00; }De komma betsjuttet benammen "en". Dat dizze selektor jildt foar alle paragraafeleminten AND alle divyzje-eleminten. As de komma ferdwûn is, dan soe it alle paragrafen eleminten wêze dy't in bern fan in divyzje binne. Dat is in hiel oare soarte selektor, dus kin dizze komma de sin fan 'e selector feroarje!
Elke foarm fan seleksje kin groepearje mei elke oare selector. Yn dit foarbyld is in klasse seleksje keppele mei in ID-seleksje:
p.red, #sub {color: # f00; }Dit styl jildt foar elk lid mei de klasse-attribút fan "read", en elke elemint (omdat wy gjin soarte opjaan hawwe) dy't in id-attribút fan "sub" hat.
Jo kinne elke tal selektors gearjeare, lykas seleksjes dy't inkeld wurden binne en komplekse seleksjes. Dit foarbyld befettet fjouwer ferskate selektors:
p, .red, # sub, div a: link {color: # f00; }Sa soe dit CSS-regel tapast wurde foar de neikommende:
- Elke lid elemint
- Elk elemint mei de klasse fan "read"
- Elke elemint mei in ID fan "sub"
- De "keppeling" pseudo-klasse fan 'e anker-eleminten dy't decentinten fan in divyzje binne.
Dat lêste seleksje is in ferbiningselektor. Jo kinne sjen dat it maklik kombinearret mei de oare seleksjes yn dizze CSS-regel. Mei dizze regel pleatse wy de kleur fan # f00 (wat is read) op dizze 4 seleksjes, dy't it befoardere is om 4 getal seleksjes te skriuwen om deselde resultaat te kommen.
In oare foardiel fan seleksje fan seleksje is dat, as jo in wiziging meitsje moatte, kinne jo in inkele CSS-regel ynstelle fan meardere. Dit betsjut dat dizze oanpak bewarret jo side gewicht en tiid as it komt om de side yn 'e takomst te behâlden.
Elke Selector kin groepeard wurde
As jo fan 'e boppeneamde foarbylden sjogge, kinne alle jildige selektor yn in groep pleatst wurde, en alle eleminten yn it dokumint dat alle groepige eleminten oerienkomme, sil deselde styl hawwe basearre op dy styl eigendom.
Guon minsken leaver de groepde eleminten op ferskillende rigels te lizzen foar legibility yn 'e koade. It ferskinen op 'e webside en de laden snelheid bliuw itselde. Bygelyks kinne jo stilen kombinearje troch skieden yn ien styl-eigendom yn ien line fan koade:
th, td, p.red, div # firstred {kleur: read; }
of jo kinne de stilen opdielige op ienige linen foar dúdlikens:
th,
td,
p.red,
div # firstred
{
kleur: read;
}
Elke metoade dy't jo brûke om meardere CSS-seleksjes te groepearjen makket jo webstee en makket it makliker om langstyl te stjoeren.
Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 5/8/17.