headershadow

Latest Blogposts

html 5, een lijst in omgekeerde volgorde

Een van de nieuw geïntroduceerde onderdelen van html 5 is de mogelijkheid om lijsten te laten verschijnen in een omgekeerde volgorde. Deze zijn hetzelfde als gewone geordende lijsten, maar in plaats van verder te nummeren vanaf 1, telt deze lijst af naar 1. Dit kan gebruikt worden om bijvoorbeeld een top 10 van beste films af te laten tellen van 10 naar 1. Een zogenaamde countdown.

Dit artikel is een vertaling van reverse ordered lists van whatwg.org

Het ‘value’ element

In eerdere versies van html kon een omgekeerde lijst alleen maar bereikt worden met het toevoegen van het ‘value’ attribuut aan ieder ‘li’-element. Dat ging bijvoorbeeld op de volgende manier.

Top 5 TV Series

  1. Friends
  2. 24
  3. The Simpsons
  4. Stargate Atlantis
  5. Stargate SG-1

Het probleem met deze benadering is dat het handmatig aanmaken van waarden nogal tijdrovend is om te schrijven en te onderhouden. Daarnaast is het attribuut ‘value’ niet toegestaan in de strikte versies van html 4.01 en xhtml 1. html 5 staat dit attribuut overigens wel weer toe.

De nieuwe code in html 5

De nieuwe code is vrij eenvoudig in te passen. Het enige wat je moet doen is het attribuut ‘reversed’ toevoegen aan het ‘ol’-element. Daarnaast is er de mogelijkheid om een beginwaarde toe te voegen. Wanneer je geen beginwaarde toevoegt dan wordt er automatisch een lijst opgemaakt die aftelt naar 1. Voorbeeld:

Greatest Movies Sagas of All Time

  1. Police Academy (Series)
  2. Harry Potter (Series)
  3. Back to the Future (Trilogy)
  4. Star Wars (Saga)
  5. The Lord of the Rings (Trilogy)

Aangezien er in het voorbeeld 5 items zijn zal de lijst van 5 naar 1 tellen.

Boolean

Aangezien ‘reversed’ een boolean is, volstaat het om alleen ‘reversed’ te plaatsen in de code. Een Boolean is een bepaald type variabele, en de waardes kun je vergelijken met zwanger zijn: false, true of undefined. Er is geen middenweg. Boolean zijn uitermate geschikt om waardes te controleren. In xhtml schrijf je daarom het atribuut ‘reversed=”reversed”‘.

Het start-attribuut

Het attribuut ‘start’ kan worden gebruikt als je een startwaarde vast wil leggen. Daarnaast kun je een ‘value’ attribuut toevoegen. Normaal gesproken wordt er steeds een lagere waarde aan het volgende item gegeven, steeds met een minder. Het volgende voorbeeld start bij 100, maar na een paar items gaat de lijst naar de top 3.

Top 100 Logical Fallacies Used By Creationists

  1. False Dichotomy
  2. Appeal to Ridicule
  3. Begging the Question (Circular Logic)
  4. Strawman
  5. Bare Assertion Fallacy
  6. Argumentum ad Ignorantiam

Alle voorbeelden zijn te zien op deze pagina. Met browsers die html 5 al ondersteunen kun je de voorbeelden juist zien.

2 reacties op “html 5, een lijst in omgekeerde volgorde


Comment author said

Door Kirsten op 29 april 2008 om 08:09

Hallo beste mensen van HTML-SITE!!!!

Dit is de allereerste keer dat ik jullie site bezoek. Ik heb altijd ingelogd op de cursussen van websitemaken.be. Ook een hele goeie! Maar wat ik nu hier zie, sluit veel beter aan op mijn persoon. Ik ben al enige tijd bezig met het ontwerpen van sites, maar ik wil leren hoe het nog pakkender kan, nog dynamischer, nog veel uitgebreider! En laat ik dat dan nu net bij jullie vinden????!!!!! Bedankt dat jullie er zijn. Een heel erg mooie en vooral duidelijk site. Mijn complimenten! Kirsten

 

Comment author said

Door Jeroen de Groot op 2 mei 2008 om 07:41

Ik ben nu al een paar nieuwe tags tegengekomen waarbij ik me afvraag of het nou echt wel nodig is…
Dit ook weer, heel veel mensen genereren lijstjes doormiddel van MySQL automatisch in de goede volgorde. Waarom dan eerst alles goed zetten en dan omdraaien?

 

Plaats een reactie

*