Grupo Multoblaj CSS-Elektiloj por Plibonigi Ŝargi Rapidon
Efekto estas grava faktoro en prospera retejo. Tiu retejo devus esti efika en kiel ĝi uzas bildojn interrete . Ĉi tio helpos certigi, ke la retejo bone agas por vizitantoj kaj ŝarĝas rapide en iliaj aparatoj. Efektiveco ankaŭ devus esti parto de via entuta procezo, helpante vin konservi la progreson de la retejo laŭ tempo kaj sur buĝeto.
Al la fino, efikeco okupas rolon en ĉiuj aspektoj de kreado de retejo kaj longtempe sukceso, inkluzive en la stiloj kiuj estas skribitaj por la CSS-folioj de tiu retejo. Povi krei pli maldikajn, pli purajn CSS-dosierojn estas idealaj, kaj unu el la manieroj kiujn vi povas atingi ĉi tio estas grupigante plurajn CSS-elektilojn kune.
Grupoj Elektantoj
Kiam vi kolektas CSS-elektilojn , vi apliki la samajn stilojn al pluraj malsamaj elementoj sen ripeti la stilojn en via stilo-folio. Anstataŭ havi du aŭ tri aŭ eĉ pli da reguloj de CSS, ĉiuj kiuj faras la saman aferon (ekzemple, difini la koloron de io al ruĝa), vi havas unuopalan regulon, kiu plenumas vian paĝon.
Estas multaj kialoj, kial ĉi tiu "grupigo de elektiloj" pagas paĝon. Unua oficejo, via stilo-folio estos pli malgranda kaj ŝarĝos pli rapide. Konsentite, stilaj folioj ne estas unu el la ĉefaj kulpuloj kiam temas pri malrapidaj ŝarĝoj. CSS-dosieroj estas tekstaj dosieroj, do eĉ vere longaj CSS-folioj estas etaj, dosieroj-saĝaj, kompare al senprogramaj bildoj. Ankoraŭ tiel, ĉiu iom kalkulas, kaj se vi povas razi iun grandecon de via CSS kaj ŝarĝi la paĝojn multe pli rapide, tio estas ĉiam bona afero.
Ĝenerale, pli ol mezumo de ŝarĝaj rapidoj por retejoj estas malpli ol 3 sekundoj; 3 al 7 sekundoj estas proksimume mezume, kaj pli ol 7 sekundoj estas nur malrapida. Ĉi tiuj malaltaj nombroj signifas, ke por atingi ilin kun via retejo, vi devas fari ĉion, kion vi povas! Jen kial vi povas helpi teni vian retejon rapide per kolektitaj CSS-elektiloj.
Kiel grupigi CSS-Elektantojn
Por grupigi CSS-elektilojn kune en via stilo, vi uzas komojn por disigi multajn grupajn elektilojn en la stilo. En la sekva ekzemplo, la stilo influas la elementojn de p kaj div:
div, p {koloro: # f00; }La komo esence signifas "kaj". Do ĉi tiu elektilo aplikas al ĉiuj paragrafaj elementoj Kaj ĉiuj dividaj elementoj. Se la komo mankis, tio estus ĉiuj alineaj elementoj, kiuj estas infano de divido. Tio estas tre malsama speco, tial ĉi tiu komo vere ŝanĝas la signifon de la elektilo!
Ajna formo de elektilo povas esti grupigita kun iu ajn alia elektilo. En ĉi tiu ekzemplo, klaso-elektilo kolektas kun ID-elektilo:
p.red, #sub {koloro: # f00; }Do ĉi tiu stilo aplikas al iu ajn alineo kun la klasa atributo de "ruĝa", Kaj iu ajn elemento (ĉar ni ne specifis, kio speco), kiu havas identan atributon de "sub".
Vi povas kolekti iun ajn elektronon kune, inkluzive de elektiloj, kiuj estas simplaj vortoj kaj kompundaj elektiloj. Ĉi tiu ekzemplo inkluzivas kvar malsamajn elektilojn:
p, .red, #sub, div a: ligilo {koloro: # f00; }Do ĉi tiu CSS regulo apliki al la sekvaj:
- Ajna paragrafo
- Ajna elemento kun la klaso de "ruĝa"
- Ajna elemento kun ID de "sub"
- La "ligo" pseŭda klaso de la ankrumaj elementoj, kiuj estas decendantoj de divido.
Tiu lasta selector estas kompona elektilo. Vi povas vidi ĝin facile kombini kun la aliaj elektiloj en ĉi tiu CSS-regulo. Per tiu regulo ni fiksas la koloron de # f00 (kiu estas ruĝa) sur ĉi tiuj 4 elektiloj, kiu estas pli bone skribi 4 apartajn elektilojn por atingi la saman rezulton.
Alia avantaĝo de grupaj elektiloj estas, se vi bezonas ŝanĝi, vi povas redakti unu solan regulon anstataŭ plurajn. Ĉi tio signifas, ke ĉi tiu aliro ŝparas al vi paĝon pezon kaj tempon, kiam temas pri konservado de la retejo en la estonteco.
Ajna Elektanto povas esti grupigita
Kiel vi povas vidi el la supraj ekzemploj, iu valida elektilo povas esti metita en grupon, kaj ĉiuj elementoj en la dokumento, kiuj kunigas ĉiujn grupajn elementojn, havos la saman stilon bazitan sur tiu stilo.
Iuj homoj preferas listigi la grupajn elementojn sur apartaj linioj por legigebleco en la kodo. La apero en la retejo kaj la ŝarĝa rapido restas samaj. Ekzemple, vi povas kombini stilojn apartajn per komoj en unu stilon posedaĵon en unu linio de kodo:
th, td, p.red, div # unuared {koloro: ruĝa; }
aŭ vi povas listigi la stilojn en individuaj linioj por klareco:
th,
td,
p.red,
div # unuared
{
koloro: ruĝa;
}
Aŭ metodo, kiun vi uzas por kolekti multoblajn CSS-elektilojn, rapidigas vian retejon kaj faciligas administri stilojn longtempe.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 5/8/17.