Progressiv forbedring er en teknik, der hjælper med at sikre, at din software er robust og tilgængelig. Ved at følge den kan du sikre, at så mange mennesker som muligt vil kunne bruge din hjemmeside eller app.
Start med en minimalt levedygtig version af dit webdesign, og sørg for, at det fungerer efter behov. Så lag ekstra funktionalitet og stil, så mere dygtige browsere kan drage fordel.
Hvordan virker progressiv forbedring?
På grund af dets ekstremt distribuerede natur har nettet altid haft brug for at understøtte en lang række enheder. Fra grundlæggende 1970'er-computere til moderne stationære computere, tablets og fjernsyn, er hjemmesider kommet langt.
I hjertet af alt er HTML. Da det er et "tilgivende" sprog, vil browsere vise HTML lige så godt, som de forstår det. Typisk vil de ignorere alt, de ikke støtter.
Dette kan være nyttigt fra en udviklers synspunkt, men det kan forårsage problemer for læserne. Hvis dit websted viser en tom side, når JavaScript ikke kan køre, har brugerne intet andet valg end at opgive det. Progressiv forbedring opfordrer dig til at levere kerneindhold til alle, der har adgang til det, og derefter forbedre dette indhold ved hjælp af passende teknologier, såsom CSS og JavaScript.
En progressiv tilgang til styling
CSS er internettets stilarksprog som du kan bruge til at tilpasse farver, skrifttyper, layouts, og mange andre visuelle aspekter af dine sider. Du kan bruge det til at forbedre standardudseendet på dit indhold, men det betyder ikke, at du ikke skal strukturere dit indhold ordentligt i første omgang.
Tag for eksempel en menulinje; du kan strukturere det sådan:
<nav>
<a href="/register">Tilmeld</en>
<a href="/login">Log på</en>
<a href="/about">om os</en>
<a href="/contact">kontakt</en>
</nav>For at vise en vandret menu, hvor hvert link ligner lidt en knap, kan du style det ved hjælp af denne CSS:
nav a {
tekst-dekoration: ingen;
display: inline-blok;
polstring: 0.5em 1em;
kant: 1px fast;
kant-radius: 8px;
margin-højre: 1em;
}Når browseren gengiver dette fuldt ud, skulle det se sådan ud:
Men hvis CSS ikke er tilgængelig, vises menuen således:
Læg mærke til, hvordan dette ikke ligner en menu, og det er ikke særlig nemt at bruge, da linkene smelter sammen til én.
Du kan bruge en alternativ struktur til at gøre designet mere robust:
<nav>
<ul>
<li><a href="/register">Tilmeld</en></li>
<li><a href="/login">Log på</en></li>
<li><a href="/about">om os</en></li>
<li><a href="/contact">kontakt</en></li>
</ul>
</nav>Da denne markup bruger et uordnet listeelement, er det meget mere anvendeligt i fravær af CSS:
Bemærk, hvor meget nemmere det er hurtigt at scanne og forstå disse links, selv med browserens standardstil. Denne tilgang kræver, at du tilføjer lidt mere CSS for at tilsidesætte standardlistestilene:
navli { Skærm: inline; }Selvom den endelige struktur og styling er mere kompliceret, og de fleste brugere vil have CSS aktiveret, er denne tilgang mere robust. Det vil være mere venligt for brugere af skærmlæsere og terminalbaserede browsere.
Introduktion af funktionalitet gradvist
Progressiv forbedring er vigtigst, når det kommer til funktionen af et websted eller en app. Princippet siger, at uanset hvad, så skal din hjemmeside fungere så godt som muligt.
I praksis gælder det typisk JavaScript. Hvis du introducerer adfærd på klientsiden, bør den lægge funktionalitet oven på et websted eller en applikation, der allerede fungerer uden den.
En meget almindelig sag er hændelseshåndtering. Forestil dig en side, der indlæser yderligere indhold efter behov. Dette kan være en manuel uendelig rulning, en kommentarindlejring eller lignende.
<legeme>
<!--... -->
<knap onclick="load_more();">
belastning Mere
</button>
<!--... -->
</body>Knappens onclick attribut indeholder JavaScript-kode, der kører, når nogen klikker på knappen. Men hvis JavaScript ikke er tilgængeligt, vil denne knap ikke gøre noget. En bruger vil blive efterladt ved at klikke på denne knap uden feedback og ingen idé om, hvad der går galt. En langt bedre tilgang bruger progressiv forbedring:
<legeme>
<!--... -->
<et id="s2" href="/page/2">Side 2</en><manuskript>
fungereload_more() { konsol.log("!"); }
/* Erstat link med knap */
var link = dokument.getElementById("p2");
var knap = dokument.createElement("knap");
button.innerText = "Indlæs mere";
button.addEventListener("klik", indlæs_mere);
dokument.legeme.insertBefore(knap, link);
link.parentNode.removeChild(link);
</script>
</body>
Denne kode omdanner det grundlæggende link til en knap med en hændelseshandler. Ved at introducere afhængigheden af JavaScript ved hjælp af selve JavaScript, kan du være sikker på, at det vil virke. Og der er en funktionel standardadfærd, der virker, i form af standardlinket til /page/2.
Er progressiv forbedring virkelig nødvendig?
Alle bruger browsere med CSS og JavaScript, så hvorfor tage sig af en situation, der ikke opstår? Der er flere grunde til, at du bør anvende den gode praksis med progressiv forbedring.
- For det første er det ikke alle, der besøger dit websted, der bruger en browser. Nogle besøgende vil være bots, som en søgemaskineindeksering, og disse forstår muligvis slet ikke CSS eller JavaScript.
- For det andet vil ikke alle personer, der besøger dit websted, bruge en browser med CSS og JavaScript. Nogle besøgende kan bruge en terminal-baseret browser, som viser almindelig tekst med minimal formatering. Andre kan bruge en skærmlæser.
- For det tredje, selvom en browser understøtter CSS og JavaScript, går det galt. Et brudt link eller dårlig netværksforbindelse kan resultere i en manglende .css- eller .js-fil. En fejl i JavaScript kan forårsage, at anden kode slet ikke kører.
- Endelig kan nogle besøgende aktivt beslutte at deaktivere CSS eller JavaScript. De kan gøre det af hensyn til privatlivets fred, eller fordi de er på en langsom eller betalings-for-brug forbindelse.
En progressiv tankegang gør underværker
Frem for alt opfordrer progressiv forbedring dig til at anvende en indholdsførst tilgang. Indhold er konge, så din tekst og billeder bør altid være tilgængelige for alle, uanset hvordan de tilgår dit websted.
Ved at give alle læsere den bedst mulige oplevelse og derefter gøre den endnu bedre for dem, der kan drage fordel, kan du få det bedste fra alle verdener. Progressiv forbedring er blot en nøglekomponent i god tilgængelighed og brugervenlighed.
