Taldeak CSS hautagailu anizkoitzak Kargatu abiadura hobetzeko
Eraginkortasuna arrakastatsua den webgune batean faktore garrantzitsua da. Webguneak irudiak nola erabiltzen dituen eraginkorra izan behar du. Horrek lagunduko du webgunea bisitariak ondo funtzionatzea eta gailuetan azkar kargatzea lortzea. Eraginkortasuna ere zure prozesu orokorraren zati izan beharko luke, denboraren eta aurrekontuaren garapenaren bat mantentzen laguntzeko.
Azkenean, eraginkortasuna web gunearen sorreran eta epe luzerako arrakasta izan duen alderdi guztietan eginkizun garrantzitsua du, gune horietako CSS orrietarako idatzitako estiloetan barne. CSS fitxategiak errazago eta garbiagoak sortzeko gai izatea egokia da, eta horrelako modu bat CSS hautagailu anitzak elkarrekin biltzen ditu.
Agrupatu hautagailuak
CSS hautatzaileak taldekatzean, estilo desberdinak hainbat estilo desberdinetan aplikatzen dira estilo-orrian estilo ez errepikatu gabe. Bi edo hiru edo are gehiago CSS arauak izan beharrean, hori guztia gauza bera egiten dute (adibidez, zerbait kolore gorria ezarri), CSS arau bakar bat duzu zure orriarentzat betetzeko.
Arrazoi ugari daude "hautatzaileen taldekatzeak" orrialde bat onartuz. Lehenengo taulan, zure estiloa txikiagoa izango da eta azkarrago kargatu. Admittedly, estilo-orriak ez dira kargu guneak moteltzen direnean errudun nagusietako bat. CSS fitxategiak testu-fitxategiak dira, beraz, CSS orriak oso txikiak dira, fitxategi tamaina jakintsuak, unoptimized irudiekin alderatuta. Hala eta guztiz ere, apur bakoitza zenbatzen da, eta zure CSS tamaina apur bat moztu eta askoz azkarrago duten orriak kargatu, hau da beti gauza ona.
Oro har, guneetako karga-abiadura gainetik batez beste 3 segundo baino gutxiago dago; 3 eta 7 segundotan batez bestekoa da eta 7 segundo baino gehiagokoa oso motela da. Zenbaki baxu hauei esker, zure webgunera heltzeko, behar duzun guztia egin behar duzu! Horregatik, zure webgunea azkar mantentzen laguntzen duzu CSS aukeratutako taldekatuak erabiliz.
Nola CSS hautagailuak taldea
CSS hautagailuak taldekatzeko, zure estilo-fitxan, komunak erabiltzen dituzu hautapen talde bat baino gehiago bereizteko . Beheko adibidean, estiloak p eta div elementuei eragiten die:
div, p {color: # f00; }Koma, funtsean, "eta" esan nahi du. Beraz, hautatzailea paragrafo-elementu guztiei eta zatiketa elementu guztiei aplikatzen zaie. Koma falta bada, zatiketa baten seme-alaba diren paragrafo-elementu guztiak izango lirateke. Hautapen mota oso desberdina da, beraz, koma honek hautagailuaren esanahia aldatzen du!
Edozein hautatzaile mota hauta daitekeen beste edozein taldek osatzen dute. Adibide honetan, klase hautatzailea ID hautatzailea da:
p.red, #sub {color: # f00; }Horrela, estilo honek "gorria" klasearen atributua duen edozein paragrafo aplikatzen du, eta "elementu" baten IDaren atributua duen edozein elementu (zer motatakoa ez den).
Aukeratutako hautagaien kopurua hauta dezakezu, hitz bakunak dituzten hautagailuak eta hautespen selektiboak barne. Adibide honetan lau hautagailu daude:
p, .red, #sub, div a: link {kolorea: # f00; }Beraz, CSS arau hau honako hau aplikatuko litzateke:
- Paragrafo elementua
- Edozein elementu "gorri" klasearekin
- Edozein elementu "azp" IDarekin
- "Zatiketa" baten aingura elementuen pseudo-klasearen "esteka".
Azken hautatzailea hautapen konposatua da. Ikus daiteke CSS arau honetan beste aukeratzaile batzuekin konbinatuta erraz. Arau horrekin, # f00 (hau da, gorria) kolorea ezartzen ari gara 4 hautagailu hauei esker, hau da 4 hautatutako hautagailuak idazteko hobe da emaitza bera lortzeko.
Aukeratutako taldekideen onurarako beste aukera bat da, aldaketak egin behar badituzu, CSS arau bakar bat editatu ahal izango duzu hainbat baino. Horrek esan nahi du hurbilketa horrek orrialde pisua eta denbora gordetzen dituela etorkizunean gunea mantentzeko orduan.
Aukeratzaile bat taldea daiteke
Goiko adibideetatik ikus daitekeen bezala, edozein baliozko hautatzailea talde batean jar daiteke, eta taldekatutako elementu guztiekin bat datozen dokumentu guztiek style style oinarritutako estiloa izango dute.
Jende askok taldekatutako elementuak zerrendako lerroetan zerrendatzea nahiago du kodea irakurgarri izateko. Webgunearen itxura eta karga-abiadura berdina izaten jarraitzen du. Adibidez, komaz banandutako estiloak estilo kode baten lerro batean lerrokatzeko konbinatu ditzakezu:
th, td, p.red, div # firstred {kolorea: gorria; }
edo lerro banakako estiloak zerrendatzeko argitasuna izateko:
garren,
td,
p.red,
div # firstred
{
kolorea: gorria;
}
CSS hautapen anitzetako talde bat erabiltzen duzun edozein metodo zure webgunearen abiadura azkartzen du eta epe luzerako estiloak errazago kudeatu.
Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 17/05/17.