Progressive Enhancement

Webbrowser si ronderëm sou laang Websäiten hunn. Eigentlech sinn Browsers e wichtege Bestanddeel vun der Erfahrung oder Leit, déi Är Sitë gesinn - awer net all Browser sinn eegestänneg. Et ass ganz méiglech (a wahrscheinlech zimlech wahrscheinlech) fir Clienten déi Är Websäiten an Browseren ze gesinn hunn, déi extrem al sinn an net d'Features ginn, déi an méi modernen Browser fonnt ginn. Dëst kënnen aner Schwieregkeete stellen wéi Dir maache wëllt Websäiten ze developpéieren, déi d'Avancée vun den neitste Fortschrëtter bei der Website Design a Entwécklung maachen . Wann een op Är Site mat engem vun dësen antiqued Browseren kënnt an Är lescht modernst Techniken net schaffen fir hinnen, kënnt Dir eng schlecht Erfahrung allgemeng leeën. Progressive Verbesserung ass eng Strategie fir d'Websäit Design fir verschidden Browser ze behandelen, nämlech déi al Browser, déi an der moderner Ënnerstëtzung net fehlen.

Progressive Verbesserung ass e Wee fir Webseiten ze designéieren, sou datt méi Fonktionnären e Benotzer Agent ënnerstëtzen, wat d'Funktioune vun der Websäit hunn. Et ass de Géigendeel vun der Designstrategie, déi als gréisstend Degradatioun bekannt . Dës Strategie baut op Säiten fir déi modernsten Browsere fir d'éischt an duerfir assuréiert datt se och gutt mat manner funktionnele Browser navigéiere - datt d'Erfahrung "verschlechtert" verschlechtert. Progressiv Erhéijung fänkt mat den manner fähig Browseren unzefänken an baut eng Erfahrung aus.

Wéi Dir Progressiv Enhancement benotze kënnt

Wann Dir e Webdesign kreéiert mat progressivem Erweiderungsprozess, dat éischt wat Dir maache kënnt, ass e Design deen fir de nidderegsten gemeinsamen Nenner vum Webbrowser geschafe gëtt. Am Kär gëtt progressiv Verbesserung gesagt datt Äre Inhalt fir all Websäit Browser net nëmmen e Ënnergrupp presentéiert. Duerfir fänkt Dir u mat der Ënnerstëtzung vun dësen alen, verréngte a manner féierend Browser ze ënnerstëtzen. Wann Dir e Site erstallt, deen gutt funktionnéiert fir si, Dir wësst datt Dir eng Basisleit geschafft hutt déi op all Benotzer e brauch fir all Besucher ze benotzen.

Wann Dir mat den am mannsten fähigsten Browser zënter unzefänken, wëlle mir datt all Äre HTML gëlteg sinn a semantesch korrekt sinn. Dëst wäert hëllefen datt déi breet Diversitéit vun de Benotzer Agenten déi Säit kucken a se richteg a weisen.

Vergiesst datt visuell Motiv Stile an allgemenge Layout erginn gëtt andeems se externen Stylbläg benotzt . Dëst ass wierklech wou d'progressiv Verbesserung geschitt. Dir benotzt de Stilblumm, fir e Site Design ze kreéieren dee fir all Besucher funktionnéiert. Dir kënnt dann och méi Stiler weise fir d'Säit ze erhéijen wéi de Benotzer Agenten Funktionalitéit erliewen. Jiddferee kritt d'Baselines Stile, awer fir all News Browsers déi d'méi fortgeschratt a méi modern Stiler ënnerstëtzen, ginn se méi extra. Dir "Progressiv verbessere" d'Säit fir Browser, déi dës Stile ënnerstëtzen.

Et ginn e puer Weeër fir datt Dir progressiv Verbesserung befaasst. Eischtens, misst Dir berücksichte wéi engem Browser et gëtt, wann et keng Linn vun CSS versteet - et ignoréiert et! Dëst funktionéiert am Moment fir Är Gonschte. Wann Dir e Baseline vu Stile mécht, fir all Browser ze verstoen, kënnt Dir dann nach nei Stiler fir nei Browsere ginn. Wann se d'Stiler ënnerstëtzen, ginn se zou. Wann net, se ignoréieren se a benotze just dës Basisbiller. Een einfache Beispill vun progressivem Vergréisser kënnt an dësem CSS gesinn:

.main-content {
Hannergrond: # 999;
Hannergrond: rgba (153,153,153, .75);
}}

Dëse Stil setzt den éischte Plaz fir eng schéi faarweg Faarf. Déi zweet Regel Regelung fir RGBA-Faarwen fir e Transparenzniveau ze setzen. Wann e Browser de RGBA ënnerstëtzt, gëtt et den éischte Stil mat der zweeter. Wann et net geet, gëtt nëmmen de Éischten applizéiert. Dir hutt e Baseline Faarf ugesat an huet extra Stiler fir méi modern Browser ze déngen.

Mat Feature Queries benotzen

Eng aner Manéier déi Dir progressiv verstäerkt befaasst, ass d'Benotzung wéi "Featuree Froen" genannt. Dës sinn ähnlech mat Medien Ufroen , déi e wichtege Bestanddeel vun responsive Websäite entwéckelen . Wann d'Medien Ufroën fir gewësse Skala vu Gréissten ukucken, Funktioune vu Query préiwen, ob eng gewielte Feature ënnerstëtzt gëtt oder net. De Syntax deen Dir benotze wëllt ass:

@supports (Lëscht: flex) {}

All Stiler déi Dir an dësem Reglement addéiert hätt nëmme funktionnéieren wann dëse Browser "Flex" huet, wat d'Stiler fir Flexbox ass. Dir kënnt e Regele fir all Regelen setze fir dann e Feeler-Abféierunge fir extra fir ausgewielte Browser ze addéieren.

Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard am 12/13/16.