Agħżel Multiple CSS Selectors biex Ittejjeb il-Veloċità tat-Tagħbija
L-effiċjenza hija fattur importanti f'suġġett ta 'suċċess. Dak is-sit għandu jkun effiċjenti fl- użu tal-immaġni onlajn . Dan jgħin biex jiżgura li s-sit iwettaq tajjeb għall-viżitaturi u jgħabbi malajr fuq it-tagħmir tagħhom. L-effiċjenza għandha wkoll tkun parti mill-proċess ġenerali tiegħek, u tgħinek iżżomm il-progress ta 'sit fil-ħin u fuq il-baġit.
Fl-aħħar, l-effiċjenza għandha rwol fl-aspetti kollha tal-ħolqien ta 'websajt u s-suċċess fit-tul, inkluż fl-istili li huma miktuba għal-folji CSS ta' dak is-sit. Li tkun tista 'toħloq fajls CSS aktar sempliċi u aktar nodfa hija ideali, u wieħed mill-modi kif tista' tikseb dan huwa billi jgħaqqad seletturi multipli tas-CSS flimkien.
Seletturi tal-Grupp
Meta tagħżel seletturi CSS , tapplika l-istess stili għal diversi elementi differenti mingħajr ma tirrepeti l-istili fil-folja tal-istil tiegħek. Minflok ma jkollu żewġ jew tliet jew aktar regoli tas-CSS, li kollha jagħmlu l-istess ħaġa (eżempju, issettja l-kulur ta 'xi ħaġa għal aħmar), għandek regola CSS waħda li twettaq għall-paġna tiegħek.
Hemm numru ta 'raġunijiet għaliex dan il- "grupp ta' seletturi" jibbenefika minn paġna. L-ewwel ta 'fuq, il-karta tal-istil tiegħek tkun iżgħar u titgħabba aktar malajr. Ċertament, il-folji ta 'l-istil mhumiex waħda mill-ħatja prinċipali meta wieħed iqis is-siti tat-tagħbija bil-mod. Il-fajls tas-CSS huma fajls tat-test, għalhekk anki l-folji tas-CSS huma verament twal, b'għerf ta 'daqs tal-fajl, meta mqabbla ma' immaġini mhux ottimizzati. Still, kull ftit jgħodd, u jekk tista 'tqaxxar xi daqs tas-CSS tiegħek u tagħbija l-paġni li ħafna aktar malajr, dan huwa dejjem ħaġa tajba li tagħmel.
B'mod ġenerali, veloċitajiet ogħla mill-medja tat-tagħbija għas-siti huma inqas minn 3 sekondi; 3 sa 7 sekondi hija madwar il-medja, u aktar minn 7 sekondi hija ftit wisq bil-mod. Dawn in-numri baxxi jfissru li, biex jintlaħqu bis-sit tiegħek, għandek bżonn tagħmel dak kollu li tista '! Dan hu għaliex tista 'tgħin biex iżżomm is-sit tiegħek malajr billi tuża seletturi CSS miġbura.
Kif tiġbor is-CSS Selectors
Biex tgħaqqad is-seletturi tas-CSS flimkien fil-karta tal-istil tiegħek, tuża l-virgoli biex tissepara r-raggruppamenti multipli fi stil. Fl-eżempju ta 'hawn taħt, l-istil jaffettwa l-elementi p u div:
div, p {kulur: # f00; }Il-virgola bażikament tfisser "u". Allura dan is-selettur japplika għall-elementi kollha tal-paragrafu u l-elementi kollha tad-diviżjoni. Jekk il-virgola kienet nieqsa, minflok tkun l-elementi kollha tal-paragrafu li huma tifel ta 'diviżjoni. Dan huwa tip differenti ħafna ta 'selettur, għalhekk din il-virgola tassew tbiddel it-tifsira tas-selettur!
Kwalunkwe forma ta 'selettur tista' tiġi raggruppata ma 'kwalunkwe selettur ieħor. F'dan l-eżempju, selettur tal-klassi huwa raggruppat b'settur tal-ID:
p.red, #sub (kulur: # f00; }Allura dan l-istil japplika għal kwalunkwe paragrafu bl-attribut tal-klassi ta '"aħmar", U kwalunkwe element (peress li ma speċifikax liema tip) li għandu attribut ta' "sub".
Tista 'tiġbor flimkien kwalunkwe numru ta' seletturi flimkien, inklużi seletturi li huma kliem waħdieni u seletturi tal-komput. Dan l-eżempju jinkludi erba 'seletturi differenti:
p, .red, #sub, div a: link {kulur: # f00; }Allura din ir-regola CSS tapplika għal dawn li ġejjin:
- Kwalunkwe element ta 'paragrafu
- Kull element bil-klassi ta '"aħmar"
- Kull element b'ID ta '"sub"
- Is-psewdo klassi "rabta" tal-elementi tal-ankri li huma decendents ta 'diviżjoni.
Dak l-aħħar selettur huwa selettur kompost. Tista 'tara li hija kombinata faċilment ma' seletturi oħra f'din ir-regola tas-CSS. B'dik ir-regola, qed niffissaw il-kulur ta '# f00 (li huwa aħmar) fuq dawn l-erba' seletturi, li huwa preferibbli li tikteb 4 seletturi separati biex tikseb l-istess riżultat.
Benefiċċju ieħor ta 'seletturi ta' raggruppament huwa li, jekk għandek bżonn tagħmel bidla, tista 'tbiddel regola CSS waħda minflok dawk multipli. Dan ifisser li dan l-approċċ jiffranka l-piż tal-paġna u l-ħin meta niġu biex iżomm is-sit fil-futur.
Kull selettur jista 'jiġi raggruppat
Kif tistgħu taraw mill-eżempji ta 'hawn fuq, kull selettur validu jista' jitqiegħed fi grupp, u l-elementi kollha fid-dokument li jaqblu mal-elementi kollha raggruppati jkollhom l-istess stil ibbażat fuq dik il-proprjetà stil.
Xi nies jippreferu jelenkaw l-elementi raggruppati fuq linji separati għal leġibilità fil-kodiċi. Id-dehra fuq il-websajt u l-veloċità tat-tagħbija tibqa 'l-istess. Pereżempju, tista 'tgħaqqad stili separati b'komas fi proprjetà ta' stil wieħed f'linja waħda tal-kodiċi:
th, td, p.red, div # firstred {kulur: aħmar; }
jew tista 'telenka l-istili fuq il-linji individwali għaċ-ċarezza:
th,
td,
p.red,
div # firstred
{
kulur: aħmar;
}
Jew il-metodu li tuża biex raggruppa seletturi multipli tas-CSS tħaffef is-sit tiegħek u tagħmilha aktar faċli biex timmaniġġja stili fit-tul.
Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard fit-8/17/17.