Shfletuesit e uebit kanë qenë rreth e rrotull sa kohë që faqet e internetit kanë. Në fakt, shfletuesit janë një përbërës thelbësor në përvojën ose njerëzit që shikojnë faqen tuaj - por jo të gjithë shfletuesit janë krijuar në mënyrë të barabartë. Është krejtësisht e mundur (dhe në të vërtetë me të vërtetë) që klientët të shikojnë faqet tuaja të internetit në shfletues që janë jashtëzakonisht të vjetër dhe që mungojnë tiparet që gjenden në shfletuesit më modernë. Kjo mund të paraqesë probleme të rëndësishme ndërsa përpiqeni të zhvilloni faqet e internetit që përfitojnë nga përparimet më të fundit në hartimin dhe zhvillimin e faqes . Nëse dikush vjen në faqen tënde duke përdorur një nga ato shfletues të vjetër, dhe teknikat e fundit të avancuara nuk punojnë për ta, mund të jepni një përvojë të dobët në përgjithësi. Rritja progresive është një strategji e trajtimit të dizajnit të faqeve të internetit për shfletues të ndryshëm, pikërisht ato shfletues të vjetër që mungojnë në mbështetje moderne.
Zgjerimi progresiv është një mënyrë për të hartuar uebfaqe në mënyrë që të ketë më shumë funksione të një agjenti përdoruesish, aq më shumë karakteristika do të ketë faqja e internetit. Është e kundërta e strategjisë së dizajnit e njohur si degradimi i hijshëm . Kjo strategji ndërton faqet për shfletuesit më modernë më parë dhe më pas siguron që ata të punojnë në mënyrë të arsyeshme edhe me shfletues më pak funksionalë - se përvoja "degradon me gracizë". Zgjerimi progresiv fillon më parë me shfletuesit më pak të aftë dhe ndërton një përvojë nga atje.
Si të përdorim përmirësimin progresiv
Kur krijoni një dizajn të internetit duke përdorur zgjerimin progresiv, gjëja e parë që do të bëni është të krijoni një dizajn që punon për emëruesin më të ulët të shfletuesve të internetit. Në thelbin e saj, përmirësimi progresiv thotë se përmbajtja juaj duhet të jetë e disponueshme për të gjithë shfletuesit e internetit, jo vetëm një nën-set. Kjo është arsyeja pse ju filloni duke mbështetur këto shfletues të vjetër, të vjetëruar dhe më pak të aftë. Nëse krijoni një faqe që funksionon mirë për ta, ju e dini që keni krijuar një bazë që duhet të japë të paktën një përvojë të përdorshme për të gjithë vizitorët.
Kur filloni së pari me shfletuesit më pak të aftë, ju do të dëshironi të siguroni që të gjithë HTML-t tuaj të jenë të vlefshme dhe të korrigjuara në mënyrë semantike. Kjo do të ndihmojë që kjo shumëllojshmëri më e gjerë e agjentëve të përdoruesit ta shohë faqen dhe ta shfaqë atë me saktësi.
Mos harroni se stilet e dizajnit vizual dhe faqosja e përgjithshme faqe shtohen duke përdorur fletët e stilit të jashtëm . Kjo është me të vërtetë kur rritet progresi. Ju përdorni fletën e stilit për të krijuar një dizajn të faqes që punon për të gjithë vizitorët. Ju pastaj mund të shtoni stile të tjera për të përmirësuar faqen kur agjentët e përdoruesve fitojnë funksionalitetin. Gjithkush merr stilet e linjave bazë, por për çdo shfletues lajmesh që mund të mbështesin stilet më të përparuara dhe më moderne, ata marrin disa ekstra. Ju "rritni progresivisht" faqen për shfletues që mund t'i mbështesin këto stile.
Ka disa mënyra që ju mund të aplikoni zgjerimin progresiv. Së pari, duhet të konsideroni se çfarë bën një shfletues nëse nuk kupton një linjë të CSS-së - e injoron atë! Kjo në të vërtetë punon në favorin tuaj. Nëse krijon një grup bazë stilesh që të gjithë shfletuesit kuptojnë, atëherë mund të shtosh stile shtesë për shfletuesit e rinj. Nëse ata mbështesin stilet, ata do t'i zbatojnë ato. Nëse jo, ata do t'i injorojnë ato dhe do t'i përdorin ato stilet bazë. Një shembull i thjeshtë i rritjes progresive mund të shihet në këtë CSS:
.main-content {
sfondi: # 999;
sfondi: rgba (153,153,153, .75);
}
Ky stil së pari përcakton sfondin në një ngjyrë gri. Rregulli i dytë përdor vlerat e ngjyrave të RGBA për të vendosur një nivel të transparencës. Nëse një shfletues mbështet RGBA, ajo do të anashkalojë stilin e parë me të dytin. Nëse jo, do të aplikohet vetëm i pari. Ju keni vendosur një ngjyrë bazë dhe pastaj shtohen stile ekstra për shfletuesit më moderne.
Përdorimi i pyetjeve të funksioneve
Një mënyrë tjetër për të zbatuar përparimin progresiv është të përdorësh ato që quhen "pyetje me tipare". Këto janë të ngjashme me pyetjet e medias , të cilat janë një pjesë thelbësore e hartonave të përgjegjshme të internetit . Ndërsa mediat kërkojnë tekst për madhësi të caktuara të ekranit, pyetjet e funksioneve do të kontrollojnë për të parë nëse një veçori e caktuar është e mbështetur apo jo. Sintaksa që do të përdorni është:
@supports (display: flex) {}Çdo stil që keni shtuar brenda këtij rregulli do të funksionojë vetëm nëse ky shfletues mbështetet "flex", i cili është stilet për Flexbox. Mund të caktoni një sërë rregullash për të gjithë dhe pastaj të përdorni pyetje me veçori për të shtuar shtesë vetëm për shfletuesit e zgjedhur.
Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 13-12-16.