Järkjärguline täiustamine on tehnika, mis aitab tagada, et teie tarkvara on töökindel ja juurdepääsetav. Seda järgides saate tagada, et võimalikult paljud inimesed saavad teie veebisaiti või rakendust kasutada.
Alustage oma veebikujunduse minimaalselt elujõulise versiooniga ja veenduge, et see toimiks vastavalt vajadusele. Seejärel lisage lisafunktsioonid ja stiil, et võimekamad brauserid saaksid sellest kasu.
Kuidas progressiivne täiustamine töötab?
Veeb on oma äärmiselt hajutatud olemuse tõttu alati pidanud toetama tohutut valikut seadmeid. Alates 1970. aastate tavaarvutitest kuni kaasaegsete töövõimeliste lauaarvutite, tahvelarvutite ja teleriteni on veebisaidid jõudnud kaugele.
Kõige keskmes on HTML. Kuna see on "andestav" keel, kuvavad brauserid HTML-i nii hästi, kui nad sellest aru saavad. Tavaliselt ignoreerivad nad kõike, mida nad ei toeta.
See võib olla arendaja seisukohast kasulik, kuid võib tekitada probleeme lugejatele. Kui teie sait kuvab tühja lehe, kui JavaScripti ei saa käitada, pole kasutajatel muud valikut, kui see loobuda. Järkjärguline täiustamine julgustab teid edastama põhisisu kõigile, kellel on sellele juurdepääs, ja seejärel täiustama seda sisu sobivate tehnoloogiate (nt CSS ja JavaScript) abil.
Progressiivne lähenemine stiilile
CSS on veebi stiililehe keel mida saate kasutada värvide, fontide, paigutusedja palju muid teie lehtede visuaalseid aspekte. Saate seda kasutada oma sisu vaikevälimuse täiustamiseks, kuid see ei tähenda, et te ei peaks oma sisu õigesti struktureerima.
Võtke näiteks menüüriba; võite selle üles ehitada järgmiselt:
<nav>
<a href="/register">Registreeri</a>
<a href="/login">Logi sisse</a>
<a href="/about">meist</a>
<a href="/contact">kontakti</a>
</nav>Horisontaalse menüü kuvamiseks, kus iga link näeb välja nagu nupp, saate selle CSS-i abil kujundada:
nav a {
tekst-kaunistus: puudub;
ekraan: inline-block;
polsterdus: 0.5em 1em;
ääris: 1px tahke;
piiri raadius: 8 pikslit;
veeris-parem: 1em;
}Kui brauser selle täielikult renderdab, peaks see välja nägema järgmine:
Kui aga CSS pole saadaval, kuvatakse menüü järgmiselt:
Pange tähele, et see ei näe välja nagu menüü ja seda pole väga lihtne kasutada, kuna lingid sulanduvad üheks.
Disaini jõulisemaks muutmiseks võite kasutada alternatiivset struktuuri:
<nav>
<ul>
<li><a href="/register">Registreeri</a></li>
<li><a href="/login">Logi sisse</a></li>
<li><a href="/about">meist</a></li>
<li><a href="/contact">kontakti</a></li>
</ul>
</nav>Kuna see märgistus kasutab järjestamata loendielementi, on see CSS-i puudumisel palju kasutatavam:
Pange tähele, kui palju lihtsam on neid linke kiiresti skannida ja mõista isegi brauseri vaikestiiliga. See lähenemisviis nõuab loendi vaikestiilide alistamiseks veidi rohkem CSS-i:
navli { kuva: järjekorras; }Kuigi lõplik struktuur ja stiil on keerulisemad ning enamikul kasutajatel on CSS lubatud, on see lähenemisviis tugevam. See on ekraanilugejate kasutajate jaoks sõbralikum ja terminalipõhised brauserid.
Funktsionaalsuse järkjärguline tutvustamine
Järkjärguline täiustamine on saidi või rakenduse toimimise seisukohast kõige olulisem. Põhimõte ütleb, et ükskõik mis, teie veebisait peaks toimima võimalikult hästi.
Praktikas kehtib see tavaliselt JavaScripti kohta. Kui tutvustate kliendipoolset käitumist, peaks see kihistama funktsioonid saidile või rakendusele, mis juba töötab ilma selleta.
Väga levinud juhtum on sündmuste käsitlemine. Kujutage ette lehte, mis laadib nõudmisel täiendavat sisu. See võib olla käsitsi lõputu kerimine, kommentaari manustamine või muu sarnane.
<keha>
<!--... -->
<nupp onclick="lae rohkem();">
Laadige Rohkem
</button>
<!--... -->
</body>Nupu omad onclick atribuut sisaldab JavaScripti koodi, mis käivitub, kui keegi nuppu klõpsab. Kui aga JavaScript pole saadaval, ei tee see nupp midagi. Kasutaja klõpsab seda nuppu, ilma tagasisideta ja aimugi, mis valesti läheb. Palju parem lähenemisviis kasutab järkjärgulist täiustamist:
<keha>
<!--... -->
<a id="p2" href="/page/2">2. lehekülg</a><stsenaarium>
funktsioonilae rohkem() { konsool.log("!"); }
/* Asenda link nupuga */
var link = dokument.getElementById("p2");
var nupp = dokument.createElement("button");
button.innerText = "Lae rohkem";
button.addEventListener("klõpsa", lae rohkem);
dokument.keha.insertBefore(nuppu, link);
link.parentNode.removeChild(link);
</script>
</body>
See kood muudab põhilingi sündmuste töötlejaga nupuks. Kui tutvustate JavaScripti sõltuvust JavaScripti enda abil, võite olla kindel, et see töötab. Ja seal on funktsionaalne vaikekäitumine, mis töötab standardse lingi kujul /page/2.
Kas progressiivne täiustamine on tõesti vajalik?
Igaüks kasutab CSS-i ja JavaScriptiga brausereid, miks siis muretseda olukorra eest, mida ei teki? On mitmeid põhjuseid, miks peaksite kasutama järkjärgulise täiustamise head tava.
- Esiteks, mitte kõik, kes teie veebisaiti külastavad, ei kasuta brauserit. Mõned külastajad on robotid, nagu otsingumootori indekseerijad, ja nad ei pruugi CSS-i ega JavaScripti üldse mõista.
- Teiseks ei kasuta kõik teie saiti külastavad inimesed CSS-i ja JavaScriptiga brauserit. Mõned külastajad võivad kasutada terminalipõhist brauserit, mis kuvab lihtteksti minimaalse vorminguga. Teised võivad kasutada ekraanilugejat.
- Kolmandaks, isegi kui brauser toetab CSS-i ja JavaScripti, lähevad asjad valesti. Katkine link või halb võrguühendus võib kaasa tuua CSS- või js-faili puudumise. JavaScripti viga võib põhjustada muu koodi mittetöötamise.
- Lõpuks võivad mõned külastajad otsustada CSS-i või JavaScripti keelata. Nad võivad seda teha privaatsusprobleemide tõttu või seetõttu, et nad kasutavad aeglast või kasutuspõhiselt tasulist ühendust.
Progressiivne mõtteviis teeb imesid
Eelkõige julgustab järkjärguline täiustamine teid kasutama sisust lähtuvat lähenemisviisi. Sisu on kuningas, nii et teie tekst ja pildid peaksid olema alati kõigile kättesaadavad, olenemata sellest, kuidas nad teie saiti külastavad.
Kui annate kõigile lugejatele parima võimaliku kogemuse ja muudate selle veelgi paremaks nende jaoks, kes sellest kasu saavad, saate kõigist maailmadest parima. Järkjärguline täiustamine on vaid üks hea juurdepääsetavuse ja kasutatavuse tava põhikomponent.
