Web-arakatzaileek webguneak izan dituzte. Izan ere, nabigatzaileek esperientzia edo jendea zure gunea ikusten duten funtsezko osagai dira, baina ez dira nabigatzaile guztiak berdin sortzen. Oso posible da (eta benetan nahiko) bezeroek zure webguneak oso zaharragoak diren nabigazio-orriak ikustean eta nabigatzaile modernoagoetan dauden funtzioak falta ez izatea. Horrek arazo larriak sor ditzake webguneen diseinuan eta garapenean azken aurrerapenak aprobetxatzen dituzten webguneak garatzeko . Norbait zure webgunera bidaltzen badu, zaharkituta dauden arakatzaile horietako bat erabiltzen baduzu eta zure azken teknologia aurreratuak ez badira beraiekin lan egiten, eskarmentu eskasa izan daiteke orokorrean. Hobekuntza progresiboa nabigatzaile desberdinetarako web orrien diseinua kudeatzeko estrategia da, hau da, laguntza modernoan falta diren nabigatzaile zaharrak.
Hobekuntza progresiboa web orrialdeak diseinatzeko modu bat da, beraz, erabiltzaileen agente bat gehiago onartzen duenez, web orriek ezaugarri gehiago izango dituzte. Diseinuaren estrategia kontrakoa da degradazio zorrotzaren aurrean . Estrategiak lehenik eta behin nabigatzaile modernoenak biltzen ditu lehenik eta gero, nabigatzaile funtzional gutxiago duten funtzionarioek ere lan egiten dutela ziurtatzen du, esperientziak "ondo moldatzen ditu". Hobekuntza progresiboa nabigatzaile gutxiagoekin hasten da lehenbailehen eta esperientzia horri eusten dio.
Nola erabili aurrerapen aurreratuak?
Webgunea diseinatzen duzunean, pixkanaka-pixkanaka hobekuntzarekin egiten duzunean, lehenik eta behin, web nabigatzaileen izendatzaile arrunten funtzionamendurako diseinua sortzen da. Nukleoan, hobekuntza progresiboa zure edukia web arakatzaile guztientzat erabilgarri dagoela esan nahi du, ez da azpi-multzo bat besterik ez. Horregatik nabigatzaile zaharragoak, zaharkituak eta gutxiago onartzen dituzunean hasten zara. Ondo funtzionatzen duen gunea sortzen baduzu Horiengatik, jakin badakizue bisitari guztiei esperientzia erabilgarria eman beharko luketen oinarri bat sortu duzula.
Arakatzaile gutxien dutenekin hasita, zure HTML guztiak baliozkoa eta semantikoki zuzena izan dadin ziurtatu nahi duzu. Horrek lagunduko du erabiltzailearen agente barietate zabalena ikusi ahal izatea eta zehaztasunez erakusteko.
Gogoratu estilo diseinu bisualak eta orrialde diseinu orokorra kanpoko estilo-orrien bidez gehitzen direla. Hau benetan gertatzen da hobekuntza progresiboa. Estilo-orria erabiltzen duzu bisitari guztientzako lan egiten duen gunea sortzeko. Estilo osagarriak gehi ditzakezu orrialdea hobetzeko, erabiltzaileen eragileek funtzionalitatea lortzen dute. Guztiek oinarrizko estiloak lortzen dituzte, baina estilo aurreratuagoak eta modernoak onartzen dituzten albiste-nabigatzaileentzat, gehigarri batzuk lortzen dituzte. Aurrerantzean hobetuko duzu "estilo horiek onartzen dituzten nabigatzaileentzako orria".
Modu aurreratuan aplikatu ditzakezun modu batzuk daude. Lehenik eta behin, kontuan hartu beharko zenuke arakatzaileak CSS lerro bat ulertzen ez badu - hori baztertzen du! Hau benetan zure alde lan egiten du. Nabigatzaile guztiek ulertzen duten oinarrizko multzoa sortzen baduzu, arakatzaile berrientzako estilo osagarriak gehi ditzakezu. Estiloak onartzen badituzte, horiek aplikatuko dituzte. Bestela, ez ikusi egingo zaie eta oinarrizko estilo horiek erabili. Hobekuntza progresiboaren adibide sinplea CSS honetan ikus daiteke:
.main-content {
atzeko planoa: # 999;
atzeko planoa: rgba (153,153,153, .75);
}
Estilo hau lehenetsi egiten da kolore grisearraren atzeko planoan. Bigarren araua RGBA kolore-balioak erabiltzen ditu gardentasun maila bat ezartzeko. Arakatzaile batek RGBA onartzen badu, lehen estiloa bigarrenarekin gainidatziko du. Ez bada, lehenengoa bakarrik aplikatuko da. Lerro-kolorea ezarri duzu eta gero estekak gehitu dira nabigatzaile modernoagoetarako.
Galderen kontsultak erabiltzea
Modu aurreratuan aplikatu daitekeen beste modu bat "funtzioen kontsultak" deritzona erabiltzea da. Komunikabideen kontsultak antzekoak dira, web diseinuzko diseinu ezinbestekoak direnak. Bitartekaritza-kontsultak pantailaren tamainako zenbait testura bitartean, funtzioen kontsultak egiaztatu egingo dute ezaugarri jakin bat onartzen edo ez. Erabiltzen duzun sintaxia hau da:
@supports (erakutsi: flex) {}Arau honen barruan gehitu dituzun estiloek "flex" onartzen duten arakatzaileak bakarrik funtzionatuko luke, hau da, Flexbox estiloak. Guztiontzat arau multzo bat ezar dezakezu eta, ondoren, funtzioen kontsultak erabili hautatzeko arakatzaileentzat soilik gehitzeko.
Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 12/13/16.