Progressive Enhancement

Vefur flettitæki hafa verið í kring svo lengi sem vefsíður hafa. Reyndar eru vafrar mikilvægir þáttar í reynslu eða fólki sem skoðar síðuna þína - en ekki eru allir vafrar búin jafn. Það er alveg mögulegt (og reyndar nokkuð líklega) að hafa viðskiptavini að skoða vefsíður þínar í vafrum sem eru mjög gömul og vantar þá eiginleika sem finnast í nýlegri vafra. Þetta getur leitt til verulegra vandamála þegar þú leitast við að þróa vefsíður sem nýta sér nýjustu framfarir í vefhönnun og þróun . Ef einhver kemur inn á síðuna þína með því að nota einn af þessum antíkum vafra og nýjustu háþróaða tækni virkar ekki fyrir þá, þá gætirðu skilað fátækum reynslu í heild. Progressive enhancement er stefna að meðhöndla vefsíðuhönnun fyrir mismunandi vafra, þ.e. þær gömlu vöflur sem vantar í nútíma stuðningi.

Progressive enhancement er leið til að hanna vefsíður þannig að því fleiri aðgerðir sem notandi umboðsmaður styður, því fleiri aðgerðir sem vefsíðan mun hafa. Það er hið gagnstæða af hönnunarstefnu sem kallast tignarlegt niðurbrot . Þessi stefna byggir síður fyrir nýjustu vafrana fyrst og tryggir þá að þeir virka líka vel með minna hagnýtum vöfrum - að reynslan "niðurbrot tignarlega." Progressive enhancement byrjar með færri vafra fyrst og byggir upplifun upp þaðan.

Hvernig á að nota Progressive Enhancement

Þegar þú býrð til vefhönnun með því að nota framsækið aukning, þá er það fyrsta sem þú þarft að gera til að búa til hönnun sem virkar fyrir lægsta sameiginlega nefnara vafra. Í kjarnanum segir framsækið aukahlutur að efnið þitt ætti að vera tiltæk fyrir alla vöfrur, ekki bara undirhópur. Þess vegna byrjar þú með því að styðja þessar gömlu, gamaldags og færri vafra. Ef þú býrð til vefsíðu sem virkar vel Fyrir þá, þú veist að þú hefur búið til grunnsnið sem ætti að skila að minnsta kosti nothæf reynsla fyrir alla gesti.

Þegar þú byrjar fyrst og fremst með vafra sem eru hæst, þá viltu tryggja að öll HTML þín ætti að vera gild og semantically rétt. Þetta mun hjálpa til við að tryggja að breiðasta fjölbreytni notenda umboðsmanna geti skoðað síðuna og sýnt það nákvæmlega.

Mundu að sjónræn hönnunarsnið og heildarblöðin eru bætt við með því að nota ytri stílblöð . Þetta er í raun þar sem framsækið aukahlutur gerist. Þú notar stíllarkið til að búa til vefsíðuhönnun sem virkar fyrir alla gesti. Þú getur síðan bætt við fleiri stílum til að auka síðuna þar sem notendur umboðsmenn fá virkni. Allir fá grunnatriði stíl, en fyrir allar fréttir vafra sem geta styðja fleiri háþróaður og nútímalegri stíl, fá þeir smá aukalega. Þú "framsækið auka" síðuna fyrir vafra sem geta stutt þá stíl.

Það eru nokkrar leiðir sem þú getur sótt um framsækið aukning. Í fyrsta lagi ættir þú að íhuga hvað vafra gerir ef það skilur ekki línu CSS - það hunsar það! Þetta virkar í raun í hag þinn. Ef þú býrð til grundvallaratriði stíll sem allir vinkonur skilja, þá geturðu síðan bætt við fleiri stíll fyrir nýja vafra. Ef þeir styðja stíllin, munu þeir sækja um þau. Ef ekki, munu þeir hunsa þau og nota bara þessar grunnstíll. Einfalt dæmi um framsækið aukning má sjá í þessu CSS:

.main-innihald {
bakgrunnur: # 999;
bakgrunnur: rgba (153,153,153,75);
}

Þessi stíll setur fyrst bakgrunninn í gráa lit. Önnur reglan notar RGBA lit gildi til að stilla gagnsæi. Ef vafra styður RGBA mun það hunsa fyrsta stíl með seinni. Ef það gerist ekki verður aðeins fyrsti notaður. Þú hefur stillt upphafslit og síðan bætt við auka stílum fyrir nútímavísendur.

Notkun eiginleikarannsókna

Önnur leið sem þú getur sótt um framfarandi aukahluti er að nota það sem kallast "aðgerðarspurningar". Þetta er svipað og fjölmiðlafyrirspurnir , sem eru ómissandi stykki af móttækilegu vefsíðuhönnun . Þó að fjölmiðlar spyrja texta fyrir ákveðnar skjástærðir, munu leitarfyrirspurnir athuga hvort tiltekin eiginleiki sé studd eða ekki. Samheitiið sem þú vilt nota er:

@supports (sýna: beygja) {}

Allir stíll sem þú bættir við í þessari reglu myndi aðeins virka ef þessi vafri styður "flex", sem er stíllinn fyrir Flexbox. Þú gætir sett eitt sett af reglum fyrir alla og notað síðan fyrirspurnir til að bæta við auka fyrir aðeins valda vafra.

Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 12/13/16.