<progress>

Ett exempel på hur progress-elementet visas i Firefox på Windows 7.

I HTML5 introducerades <progress> som ett nytt element. Det används för att märka upp en förloppsindikator (engelska: progress bar). Sådana indikatorer kan användas för att bygga användarvänliga gränssnitt där det tydligt framgår hur långt en process har fortskridit.

Syntax

<progress>-elementet är huvudsakligen beroende av två stycken attribut: max och value. Max-attributet anger den övre gränsen för indikatorn och value-attributet anger det aktuella värdet. Observera att den lägre gränsen alltid är noll.

Varken max- eller value-attributet kan ha ett negativt värde. Attributet value måste vara mindre än eller lika med värdet på max. Om du inte specificerar ett maximalt värde kommer det som standard vara noll, vilket medför att value måste vara mindre än eller lika med 1 om du inte anger ett max-attribut.

<progress max="100" value="20"></progress>

 

Det som skrivs mellan taggarna <progress> och  </progress> kommer ignoreras av alla moderna webbläsare som som har stöd för HTML5-element. Äldre webbläsare kommer däremot ignorera <progress>-elementet och istället rendera det som finns mellan taggarna. Det kan därför vara klokt att ange informationen som framgår av elementet även mellan taggarna: <progress max="100" value="20">20 % klart</progress>.

Utseende

Hur en förloppsindikator presenteras rent grafiskt skiljer sig åt mellan webbläsare. Det finns inga officiella riktlinjer som säger exakt hur elementet ska renderas, varför alla webbläsare har tagit fram egna standarder. Dessa standardutformningar kan dock justeras med hjälp av CSS, precis som vanligt. Nedan följer tre exempel på hur tre olika webbläsare presenterar precis samma HTML-kod.

<progress>-elementet i Mozilla Firefox
Hur <progress>-elementet visas i Mozilla Firefox 49.0.1 på Windows 7.
<progress>-element i webbläsaren Luakit
Samma element i webbläsaren Luakit 1.8.0 på Ubuntu 9.10.
Chrome 48 på Dembian 6.
Slutligen Chrome 48 på Dembian 6.

Det kan verka konstigt och jobbigt att alla webbläsare har sina egna regler om hur ett &lt;progress&gt;-element ska renderas, men det är inte så underligt. HTML är som bekant till för att strukturera dokument och inte stilsätta dem. Att det inte finns någon standard för hur exempelvis <progress max="100" value="20"></progress> ska presenteras grafiskt är därför inte så konstigt, eftersom det i grund och botten handlar om ett sätt att strukturera data på. Att webbläsare ändå väljer att ha en standarduppsättning med regler är förmodligen bara ur användarvänlighetssynpunkt.

Ändra utseende med CSS

Om du vill ändra hur indikatorn ser ut, eller kanske säkerställa att den ser likadan ut i alla webbläsare, kan du göra detta med CSS. Det är dock lite knepigt, då olika webbläsare använder olika metoder för att ändra utseendet på ett <progress>-element.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *