Web browsers binne al sa lang as websiden hawwe. Feitlik binne browsers in essinsjele ynrjochting yn 'e ûnderfining of minsken dy't jo side besjen - mar net alle browsers binne krekt makke. It is folslein mooglik (en eins gewoanlik wierskynlik) om klanten te hâlden fan jo websiden yn browsers dy't tige âld binne en fûnen de funksjes dy't fûn binne yn mear moderne browsers. Dit kin wichtige problemen as jo besykje om websiden te ûntwikkeljen dy't gebrûk meitsje fan ' e lêste foarsten yn webside ûntwerp en ûntwikkeling . As immen ien op dizze side komt mei ien fan dy âlde browsers, en jo lêste ferneamde techniken wurkje net foar harren, kinne jo in alderlei ûnderfining algemien leverje. Progressive enhancement is in strategy foar it behanneljen fan webside ûntwerp foar ferskate browsers, nammentlik dy âlde browsers dy't net ferminderje yn moderne stipe.
Progressive enhancement is in manier om web siden te ûntwikkeljen sadat de mear funksjes fan in brûkers-agent stipe, de mear funksjes fan 'e webside. It is it tsjinoerstelde fan 'e ûntwerpstrategy, dy't bekind is as grammatike ôfbraak . Dizze strategy biedt siden foar de measte moderne browsers earst en soarget derfoar dat se ek goed minder wurkje mei minder funksjonele browsers - dat de ûnderfining "ferdwine". Progressive ferbetterings begjinne mei de minder fêste browsers foar it earst en biedt in erfaring út fan dêr.
Hoe kinne Progressive Enhancement brûke
As jo in webûntwerp meitsje mei help fan progressive ferbetterings, is it earste wat jo dogge om in ûntwerp te meitsjen dy't wurket foar de leechste mienskiplike nammen fan webbrowsers. Yn syn kearn seit progressive ferbetterings dat jo ynhâld foar alle webbrowsers beskikber wêze, net allinich in sub-set. Dêrom begjinne jo troch dizze âlde, ferâldere en minder fêste browsers te stypjen. As jo in side meitsje dy't goed wurket Foar har, jo witte dat jo in baseline makke hawwe dy't op syn minst in brûkbere ûnderfining oan alle besikers leverje moat.
As jo earst mei de minste fêste browsers begjinne, wolle jo derfoar soargje dat jo jo HTML jildich en semantysk korrekt wêze moatte. Dit soarget derfoar dat de breedste ferskaat oan brûkers-aginten de side besjen kinne en it goed sjen litte.
Tink derom dat fisuele ûntwerpstilen en algemiene side-layout tafoege wurde troch gebrûk fan eksterne stylblêden . Dit is wier wêr't de progressive ferheging giet. Jo brûke it stylblêd om in side ûntwerp te meitsjen dy't wurket foar alle besikers. Jo kinne dêrnei ekstra stilen taheakje om de side te ferheegjen as de brûkersagentsen funksjes krije. Elkenien krijt de baselinesstilen, mar foar elke nijsbrowsers dy't de fierdere en mear moderne stilen stypje kinne, krije se wat ekstra. Jo "progressive ferbetterje" de side foar browsers dy't dizze stilen ûnderstean kinne.
Der binne in pear manieren om jo progresive ferbetterings tapasse te litten. Earst ôf, moatte jo beskôgje hoe in browser in docht, as it net in line fan CSS begrypt - it is mislearre! Dit wurket eins yn jo foardiel. As jo in baseline set fan stilen meitsje dy't alle browsers begripe, kinne jo ek nije stilen foar nije browsers taheakje. As se de stilen stypje, sille se har tapasse. As net, sille se se ûngeduldich brûke en gewoan de baseline-stilen brûke. In ienfâldige foarbyld fan progressive ferbetterings kin sjoen wurde yn dit CSS:
.main-content {
eftergrûn: # 999;
eftergrûn: rgba (153.153.153, .75);
}
Dizze styl pleatst earst in eftergrûnkleur. De twadde regel brûkt RGBA-kleuren wearden om in nivo fan transparânsje te setten. As in blêder RGBA stipet, sil it earste styl mei de twadde oerskriuwe. As it net kin, allinich de earste wurde tapast. Jo hawwe in baselinekleur set en jo hawwe ekstra stilen foar mear moderne browsers tafoege.
Feilige fragen brûke
In oare manier wêrop jo kinne progressive ferheging applisearje kinne is gebrûk fan wat bekind binne as "funksjesfraach". Dit binne fergelykber mei media queries , dy't in essinsjeel stikje reaktive websides binne . Wylst de media tekst foar sertifikaten foar skermbehearder besjen, sille besochte query kontrolearje om te sjen oft in bepaalde funksje stipe wurdt of net. De syntaksis dy't jo brûke wolle is:
@supports (werjefte: flex) {}Alle stilen dy't jo yn dizze regel tafoege wienen allinich wurkje as dizze blêder stipe "flex", dat is de stilen foar Flexbox. Jo kinne ien set regels ynstelle foar elkenien en brûk dan funksjes oanfreegje om ekstra foar selekteare browsers te foegjen.
Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 12/13/16.