Web blaaiers is al so lank as wat webwerwe het. Trouens, blaaiers is 'n noodsaaklike bestanddeel in die ervaring of mense wat jou werf besigtig - maar nie alle blaaiers word ewe geskep nie. Dit is heeltemal moontlik (en eintlik redelik waarskynlik) dat kliënte jou webbladsye besigtig in blaaiers wat uiters oud is en die funksies wat in meer moderne blaaiers voorkom, ontbreek. Dit kan aansienlike probleme veroorsaak as jy streef na die ontwikkeling van webwerwe wat voordeel trek uit die nuutste vordering in webwerfontwerp en ontwikkeling . As iemand by u webwerf kom met een van die antieke blaaiers, en u nuutste gevorderde tegnieke werk nie vir hulle nie, kan u 'n swak ervaring oor die algemeen lewer. Progressiewe verbetering is 'n strategie om webbladontwerp vir verskillende blaaiers te hanteer, naamlik die ou blaaiers wat in moderne ondersteuning ontbreek.
Progressiewe verbetering is 'n manier om webblaaie te ontwerp, sodat die meer funksies wat 'n gebruikersagent ondersteun, hoe meer funksies die webblad sal hê. Dit is die teenoorgestelde van die ontwerpstrategie bekend as grasieuse afbreking . Hierdie strategie bou eers bladsye vir die nuutste blaaiers en verseker dan ook dat hulle ook redelik goed werk met minder funksionele blaaiers - dat die ervaring "grasieus verval". Progressive enhancement begin met die minder in staat om blaaiers eerste en bou 'n ervaring van daar af.
Hoe om Progressiewe Verbetering te gebruik
Wanneer u 'n webdesign maak met behulp van progressiewe uitbreiding, is die eerste ding wat u sal doen om 'n ontwerp te skep wat vir die laagste gemene deler van webblaaiers werk. In sy kern, sê progressiewe verbetering dat jou inhoud beskikbaar moet wees vir alle webblaaiers, nie net 'n sub-stel nie. Dit is waarom jy begin met die ondersteuning van hierdie ou, verouderde en minder bekwame blaaiers. As jy 'n webwerf skep wat goed werk Vir hulle weet jy dat jy 'n basislyn geskep het wat ten minste 'n bruikbare ervaring vir alle besoekers moet lewer.
As jy eers met die minste in staat is om blaaiers te begin, wil jy seker maak dat al jou HTML geldig en semanties korrek moet wees. Dit sal help om te verseker dat die wydste verskeidenheid gebruikersagente die bladsy kan sien en dit akkuraat kan vertoon.
Onthou dat visuele ontwerpstyle en algehele bladuitleg bygevoeg word deur eksterne stylbladsye te gebruik . Dit is regtig waar die progressiewe verbetering plaasvind. Jy gebruik die stylblad om 'n werfontwerp te skep wat vir alle besoekers werk. U kan dan addisionele style byvoeg om die bladsy te verbeter aangesien die gebruikersagentskappe funksionaliteit opdoen. Almal kry die baseline style, maar vir enige nuus blaaiers wat die gevorderde en meer moderne style kan ondersteun, kry hulle 'n bietjie ekstra. U "progressief verbeter" die bladsy vir blaaiers wat daardie style kan ondersteun.
Daar is 'n paar maniere waarop jy progressiewe verbetering kan toepas. Eerstens moet jy oorweeg wat 'n blaaier doen as dit nie 'n lyn van CSS verstaan nie - dit ignoreer dit! Dit werk eintlik tot u voordeel. As jy 'n basislyn stel style maak wat alle blaaiers verstaan, kan jy dan addisionele style vir nuwe blaaiers byvoeg. As hulle die style ondersteun, sal hulle dit toepas. Indien nie, sal hulle hulle ignoreer en net die baseline style gebruik. 'N Eenvoudige voorbeeld van progressiewe verbetering kan in hierdie CSS gesien word:
.Main-inhoud {
agtergrond: # 999;
agtergrond: rgba (153,153,153, .75);
}
Hierdie styl stel eers die agtergrond tot 'n grys kleur. Die tweede reël gebruik RGBA-kleurwaardes om 'n vlak van deursigtigheid te stel. As 'n blaaier RGBA ondersteun, sal dit die eerste styl met die tweede oorskry. As dit nie die geval is nie, sal slegs die eerste een toegepas word. Jy het 'n baseline kleur gestel en dan ekstra style vir meer moderne blaaiers bygevoeg.
Gebruik funksie navrae
Nog 'n manier waarop jy progressiewe verbetering kan toepas, is om te gebruik wat bekend staan as "funksie navrae". Dit is soortgelyk aan media-navrae , wat 'n noodsaaklike stuk van responsiewe webwerfontwerpe is . Terwyl media vrae vir sekere skermgroottes vra, sal funksie navrae nagaan of 'n sekere kenmerk ondersteun word of nie. Die sintaksis wat jy sou gebruik, is:
@supports (vertoon: flex) {}Enige style wat jy in hierdie reël bygevoeg het, sal net werk as die blaaier "flex" ondersteun, wat die style vir Flexbox is. Jy kan een stel reëls vir almal stel en gebruik dan funksie navrae om ekstra vir slegs sekere blaaiers by te voeg.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 12/13/16.