Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Progresivna izboljšava je tehnika, ki pomaga zagotoviti, da je vaša programska oprema robustna in dostopna. Če ga upoštevate, lahko zagotovite, da bo čim več ljudi lahko uporabljalo vaše spletno mesto ali aplikacijo.

Začnite z minimalno vzdržljivo različico spletnega oblikovanja in zagotovite, da deluje, kot je potrebno. Nato dodajte dodatno funkcionalnost in slog, da bodo lahko imeli koristi zmogljivejši brskalniki.

Kako deluje progresivna izboljšava?

Splet je zaradi svoje izjemno porazdeljene narave vedno moral podpirati ogromno naprav. Od osnovnih računalnikov iz sedemdesetih let prejšnjega stoletja do zmogljivih sodobnih namiznih računalnikov, tabličnih računalnikov in televizorjev so spletna mesta prehodila dolgo pot.

V središču vsega je HTML. Ker gre za "odpuščajoč" jezik, bodo brskalniki prikazali HTML tako dobro, kot ga razumejo. Običajno bodo ignorirali vse, česar ne podpirajo.

To je lahko koristno z vidika razvijalca, vendar lahko povzroči težave bralcem. Če vaše spletno mesto prikazuje prazno stran, ko JavaScript ne deluje, uporabniki nimajo druge izbire, kot da ga zapustijo. Progresivna izboljšava vas spodbuja, da zagotovite osnovno vsebino vsem, ki imajo dostop do nje, nato pa to vsebino izboljšate z ustreznimi tehnologijami, kot sta CSS in JavaScript.

Progresivni pristop k oblikovanju

CSS je jezik spletnih slogov ki jih lahko uporabite za prilagajanje barv, pisav, postavitvein številne druge vizualne vidike vaših strani. Uporabite ga lahko za izboljšanje privzetega videza svoje vsebine, vendar to ne pomeni, da vsebine ne bi smeli ustrezno strukturirati.

Vzemite na primer menijsko vrstico; lahko ga strukturirate takole:

<nav>
<a href="/register">register</a>
<a href="/login">Vpiši se</a>
<a href="/about">o nas</a>
<a href="/contact">stik</a>
</nav>

Če želite prikazati vodoravni meni, pri čemer je vsaka povezava videti kot gumb, ga lahko oblikujete s tem CSS-jem:

nav a {
tekst-dekoracija: brez;
zaslon: inline-block;
oblazinjenje: 0.5em 1em;
obroba: 1px polna;
polmer obrobe: 8px;
rob-desno: 1em;
}

Ko brskalnik to v celoti upodobi, bi moralo izgledati takole:

Če pa CSS ni na voljo, bo meni prikazan takole:

Opazite, kako to ni videti kot meni in ni zelo enostavno za uporabo, saj se povezave združijo v eno.

Za boljšo zasnovo lahko uporabite alternativno strukturo:

<nav>
<ul>
<li><a href="/register">register</a></li>
<li><a href="/login">Vpiši se</a></li>
<li><a href="/about">o nas</a></li>
<li><a href="/contact">stik</a></li>
</ul>
</nav>

Ker ta oznaka uporablja neurejen element seznama, je veliko bolj uporabna, če ni CSS:

Upoštevajte, koliko lažje je hitro pregledati in razumeti te povezave, tudi s privzetim slogom brskalnika. Ta pristop bo zahteval, da dodate malo več CSS, da preglasite privzete sloge seznama:

navli { zaslon: v vrsti; }

Čeprav sta končna struktura in slog bolj zapletena in ima večina uporabnikov omogočen CSS, je ta pristop bolj robusten. Prijaznejši bo do uporabnikov bralnikov zaslona in terminalski brskalniki.

Postopno uvajanje funkcionalnosti

Postopna izboljšava je najpomembnejša, ko gre za delovanje spletnega mesta ali aplikacije. Načelo pravi, da naj vaša spletna stran ne glede na vse deluje čim bolje.

V praksi to običajno velja za JavaScript. Če uvedete vedenje na strani odjemalca, bi moralo funkcionalnost naložiti na spletno mesto ali aplikacijo, ki že deluje brez tega.

Zelo pogost primer je obravnavanje dogodkov. Predstavljajte si stran, ki na zahtevo naloži dodatno vsebino. To je lahko ročno neskončno drsenje, vdelava komentarja ali podobno.

<telo>
<!--... -->
<gumb onclick="naloži več();">
obremenitev več
</button>
<!--... -->
</body>

Gumb je onclick vsebuje kodo JavaScript, ki se zažene, ko nekdo klikne gumb. Če pa JavaScript ni na voljo, ta gumb ne bo naredil ničesar. Uporabnik bo levo kliknil ta gumb brez povratnih informacij in pojma, kaj gre narobe. Veliko boljši pristop uporablja progresivno izboljšavo:

<telo>
<!--... -->
<a id="p2" href="/page/2">stran 2</a>

<scenarij>
funkcijonaloži več() { konzola.log("!"); }

/* Zamenjaj povezavo z gumbom */
var povezava = dokument.getElementById("p2");
var gumb = dokument.createElement("gumb");
button.innerText = "Naloži več";
button.addEventListener("kliknite", naloži več);
dokument.telo.insertBefore(gumb, povezava);
povezava.parentNode.removeChild(povezava);
</script>
</body>

Ta koda spremeni osnovno povezavo v gumb z obdelovalcem dogodkov. Z uvedbo odvisnosti od JavaScripta s samim JavaScriptom ste lahko prepričani, da bo delovalo. Poleg tega obstaja funkcionalno privzeto vedenje, ki deluje v obliki standardne povezave do /page/2.

Ali je progresivno izboljšanje res potrebno?

Vsi uporabljajo brskalnike s CSS in JavaScript, zakaj bi se torej trudili skrbeti za situacijo, ki se ne pojavi? No, obstaja več razlogov, zakaj bi morali sprejeti dobro prakso postopnega izboljšanja.

  1. Prvič, vsi, ki obiščejo vaše spletno mesto, ne uporabljajo brskalnika. Nekateri obiskovalci bodo boti, na primer indekser iskalnika, in morda sploh ne razumejo CSS ali JavaScript.
  2. Drugič, vsaka oseba, ki obišče vaše spletno mesto, ne bo uporabljala brskalnika s CSS in JavaScript. Nekateri obiskovalci morda uporabljajo terminalski brskalnik, ki prikazuje golo besedilo z minimalnim oblikovanjem. Drugi lahko uporabljajo bralnik zaslona.
  3. Tretjič, tudi če brskalnik podpira CSS in JavaScript, gredo stvari narobe. Prekinjena povezava ali slaba omrežna povezava lahko povzroči manjkajočo datoteko .css ali .js. Napaka v JavaScriptu lahko povzroči, da se druga koda sploh ne izvaja.
  4. Končno se lahko nekateri obiskovalci aktivno odločijo, da bodo onemogočili CSS ali JavaScript. To lahko storijo zaradi pomislekov glede zasebnosti ali ker imajo počasno ali plačljivo povezavo.

Progresivna miselnost dela čudeže

Predvsem pa vas postopna izboljšava spodbuja, da sprejmete pristop, ki daje prednost vsebini. Vsebina je kralj, zato morajo biti vaše besedilo in slike vedno na voljo vsem, ne glede na to, kako dostopajo do vašega spletnega mesta.

Če vsem bralcem omogočite najboljšo možno izkušnjo in jo naredite še boljšo za tiste, ki imajo lahko koristi, lahko dobite najboljše iz vseh svetov. Postopna izboljšava je le ena od ključnih komponent dobre prakse dostopnosti in uporabnosti.