Grupi Zgjedhës të shumëfishtë CSS për të përmirësuar shpejtësinë e ngarkesës
Efikasiteti është një faktor i rëndësishëm në një faqe interneti të suksesshme. Kjo faqe duhet të jetë efikase në mënyrën se si përdor imazhe në internet . Kjo do të ndihmojë që faqja të kryejë mirë për vizitorët dhe të ngarkojë shpejt në pajisjet e tyre. Efikasiteti duhet gjithashtu të jetë pjesë e procesit tuaj të përgjithshëm, duke ju ndihmuar të mbani përparimin e një faqe në kohë dhe në buxhet.
Në fund, efikasiteti luan një rol në të gjitha aspektet e krijimit të një faqeje interneti dhe suksesin afatgjatë, duke përfshirë në stilet që janë të shkruara për fletët CSS të atij siti. Të jesh në gjendje të krijosh fotografi më të lehta dhe më të pastra CSS është ideale, dhe një nga mënyrat për të arritur këtë është grupimi i përzgjedhësve të shumëfishta CSS së bashku.
Grupimi i zgjedhësve
Kur gruponi përzgjedhësit e CSS , i aplikoni të njëjtat stile në disa elementë të ndryshëm pa përsëritur stilet në fletën tuaj të stilit. Në vend që të keni dy ose tre ose më shumë rregulla CSS, të gjitha të cilat bëjnë të njëjtën gjë (shembull, vendosni ngjyrën e diçkaje në të kuqe), keni një rregull të vetëm CSS që përmbushni për faqen tuaj.
Ka një numër arsyesh pse ky "grupim i përzgjedhësve" përfiton një faqe. Së pari, fleta juaj e stilit do të jetë më e vogël dhe ngarkesa më shpejt. Sigurisht, fletët e stilit nuk janë një nga fajtorët kryesorë kur bëhet fjalë për vendet e ngadalshme të ngarkimit. Skedarët CSS janë skedarë teksti, kështu që edhe fletët e CSS me të vërtetë të gjatë janë të vogla, madhësia e skedarit është e mençur kur krahasohet me imazhet e pa optimizuara. Gjithsesi, çdo numër i vogël llogaritet, dhe nëse mund të rruhni disa madhësi të CSS tuaj dhe të ngarkoni faqet që shumë më shpejt, kjo është gjithmonë një gjë e mirë për të bërë.
Në përgjithësi, shpejtësitë mesatare të ngarkesës për vendet janë më pak se 3 sekonda; 3 deri në 7 sekonda është rreth mesatares, dhe më shumë se 7 sekonda është shumë e ngadaltë. Këto numra të ulët të thotë se, për të arritur ato me faqen tuaj, ju duhet të bëni gjithçka që ju mund të! Kjo është arsyeja pse ju mund të ndihmoni të mbani faqen tuaj të shpejtë duke përdorur CSS përzgjedhës të grupuar.
Si të Grupit CSS Selectors
Për të grupuar së bashku përzgjedhësit e CSS në fletën tuaj të stilit, përdorni kometa për të ndarë më shumë përzgjedhës të grupuar në stilin. Në shembullin më poshtë, stili ndikon në elementët p dhe div:
div, p {color: # f00; }Paragrafi në thelb do të thotë "dhe". Pra, ky përzgjedhës vlen për të gjitha elementët e paragrafit dhe të gjitha elementët e ndarjes. Nëse do të mungonte presja, do të ishin të gjitha elementët e paragrafit që janë një fëmijë i një ndarjeje. Ky është një lloj përzgjedhës shumë i ndryshëm, prandaj kjo presje me të vërtetë ndryshon kuptimin e përzgjedhësit!
Çdo formë përzgjedhës mund të grupohet me ndonjë përzgjedhës tjetër. Në këtë shembull, një përzgjedhës i klasës grupohet me një përzgjedhës ID:
p.red, #sub {color: # f00; }Pra, ky stil vlen për çdo paragraf me atributin e klasës "të kuqe" dhe çdo element (meqë nuk e kemi specifikuar se cili lloj) që ka një atribut ID të "nënës".
Ju mund të gruponi çdo numër të përzgjedhësve së bashku, duke përfshirë përzgjedhësit që janë fjalë të vetme dhe përzgjedhës të kompozuar. Ky shembull përfshin katër përzgjedhës të ndryshëm:
p, .red, #sub, div a: lidhje {color: # f00; }Pra, ky rregull i CSS do të zbatohej për sa vijon:
- Çdo element paragrafi
- Çdo element me klasën e "kuqe"
- Çdo element me një ID të "nën"
- Klasa pseudo e "lidhjes" e elementeve ankoruese që janë decendentë të një ndarjeje.
Ky përzgjedhës i fundit është përzgjedhës kompleks. Ju mund të shihni se është e lehtë të kombinuar me selectors të tjera në këtë rregull CSS. Me këtë rregull, ne po vendosim ngjyrën e # f00 (e cila është e kuqe) në këto 4 përzgjedhësa, e cila është e preferueshme për të shkruar 4 përzgjedhës të veçantë për të arritur rezultatin e njëjtë.
Një përfitim tjetër i përzgjedhësve të grupimit është se, nëse keni nevojë të bëni një ndryshim, mund të redaktoni një rregull të vetëm CSS në vend të atyre të shumëfishta. Kjo do të thotë se kjo qasje ju kursen peshën e faqes dhe kohën kur është fjala për mirëmbajtjen e sitit në të ardhmen.
Çdo përzgjedhës mund të grupohet
Siç mund ta shihni nga shembujt e mësipërm, çdo përzgjedhës i vlefshëm mund të vendoset në një grup dhe të gjitha elementet në dokument që përputhen me të gjithë elementët e grupuar do të kenë të njëjtin stil të bazuar në atë stil të pronës.
Disa njerëz preferojnë të rendisin elementet e grupuara në linja të veçanta për lexueshmërinë në kodin. Shfaqja në faqen e internetit dhe shpejtësia e ngarkesës mbeten të njëjta. Për shembull, mund të kombinoni stilet e ndara me presje në një pronë stilesh në një rresht të kodit:
th, td, p.red, div # firstred {ngjyra: e kuqe; }
ose ju mund të listoni stilet në linja individuale për qartësi:
th,
td,
p.red,
div # firstred
{
ngjyra: e kuqe;
}
Secili metodë që përdorni për grupimin e përzgjedhësve të shumëfishta CSS shpejton faqen tuaj dhe e lehtëson menaxhimin e stilet afatgjata.
Artikulli origjinal nga Jennifer Krynin. Redaktuar prej Jeremy Girard më 5/8/17.