De verborgen schatten van HTML5 & CSS3

HTML5: Al jaren een geliefde marketingterm voor alles op het web wat nieuw en flashy is, maar dan juist zonder Flash ontwikkeld en dus geschikt voor bijvoorbeeld de iPad. Ondertussen omvat de term HTML5 ook een flink aantal nieuwe webstandaarden, die nog volop in ontwikkeling zijn. In die zin is HTML5 voorlopig dus nog niet ‘af’, ook al wordt er al sinds 2004 aan gewerkt. Een belangrijk kenmerk voor standaardisatie zit in de adoptie door browsers: zodra alle, of de meeste, moderne browsers een technologie op een gestandaardiseerde wijze geïmplementeerd hebben, wordt deze pas echt bruikbaar voor ontwikkelaars. Hetzelfde geldt voor CSS3: ook hier worden onderdelen zoetjes aan opgenomen in browsers.

Anno 2014 zijn er een hoop onderdelen van HTML5 en CSS3 stabiel opgenomen in sommige, en soms zelfs alle browsers; die zijn vaak direct in te zetten. In de inmiddels opgenomen onderdelen zitten een aantal zeer innovatieve onderdelen, die helaas relatief onbekend zijn. In dit artikel licht ik een aantal van deze verborgen pareltjes uit. Let wel: dit is slechts een greep uit de schatkist van onderdelen die al langer of pas sinds kort mogelijk zijn in browsers.

Responsive images

Veel websites worden tegenwoordig ontwikkeld met het responsive webdesign principe als uitgangspunt. Afbeeldingen die mooi worden getoond op grote schermen en zich tegelijkertijd in een kleinere (en lichtere) versie presenteren op kleinere schermen, vormen vaak een uitdaging. Als tussenoplossing is het met JavaScript redelijk eenvoudig om, afhankelijk van de viewport, de juiste afbeelding in te laden. Maar afgelopen jaren is er door de RICG (Responsive Images Community Group) al hard gewerkt aan een webstandaard die dit probleem oplost. Deze webstandaard bestaat uit een nieuw element: het PICTURE-element. In dit element kan op basis van mediaqueries worden gedefinieerd welke afbeelding ingeladen dient te worden.

Voorbeeld code

Ondersteuning?
Chrome Canary (beta versie) 

Polyfill* beschikbaar?
Ja: http://scottjehl.github.io/picturefill/.

Ook zonder JavaScript is er een fallback mogelijk.

Nu toepassen?
Ja! Ondanks dat support nog zeer gering is, lijkt het erop dat dit een standaard gaat worden. Vanwege de goede Polyfill en fallback is er weinig op tegen om dit direct toe te passen.

Verder lezen:
www.responsiveimages.org

Flexbox

Lang geleden waren HTML-tabellen dé manier om het grid neer te zetten van je website. Elke zichzelf respecterende webdeveloper gebruikt daar nu vaak het CSS-property float voor.

Een nieuwere methode is het gebruik van de CSS3 oplossing Flexbox. Deze specificatie bevat een uitgebreide set aan mogelijkheden om layouts te ontwikkelen waarbij de volgorde van je HTML-code veel vrijer is dan bij de float-oplossing het geval was. Daarnaast bevat Flexbox veel meer opties voor bijvoorbeeld uitlijning (ook verticaal), uitvulling en volgordelijkheid.

            Veel gebruikte layout voor websites

Ondersteuning?
http://caniuse.com/#feat=flexbox

IE10+, Firefox, Chrome, Safari, Android Browser

Polyfill* beschikbaar?
Nee, geen goede in ieder geval.

Nu toepassen?
Ja. Maar als je IE9 en lager moet ondersteunen, kan het soms handiger zijn om er nog even vanaf te zien, of beperkt te gebruiken.

Verder lezen:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Speech Synthesis API

Deze technologie stelt je in staat om binnen een website een tekst te vertalen naar gesproken woorden of juist spraak om te zetten naar tekst. Screenreaders en dicteren van bijvoorbeeld e-mail of documenten in webbased applicaties worden hierdoor realiteit.

Dit alles werkt zonder plugins. In Chrome wordt wel gebruik gemaakt van Google servers voor het transformatieproces. Van een volledige stand-alone oplossing is dus nog geen sprake. In Safari wordt de stem uit het besturingssysteem gebruikt, die daardoor dus ook offline beschikbaar is. De kwaliteit hiervan is echter wel aanzienlijk lager dan die van Google.

Ondersteuning?
http://caniuse.com/#feat=web-speech

Chrome en Safari (gedeeltelijk)

Polyfill* beschikbaar?
Nee, geen goede.

Nu toepassen?
Nee. Maar wel leuk om mee te experimenteren.

Verder lezen:
http://updates.html5rocks.com/2014/01/Web-apps-that-talk—Introduction-to-the-Speech-Synthesis-API

Demo van dicteermodule. Lukt het je om een tekst uit te spreken die het systeem foutloos overneemt?

https://www.google.com/intl/en/chrome/demos/speech.html (alleen in Chrome)

Demo waarin hetgene dat je inspreekt direct vertaald wordt naar een andere taal.

http://www.moreawesomeweb.com/demos/speech_translate.html (alleen in Chrome)

Offline Application Cache

Alle moderne browsers bieden de mogelijkheid om een set aan onderdelen van een website in de browser op te slaan. Hierdoor ontstaat de mogelijkheid om websites (of webapps) ook beschikbaar te maken als een gebruiker geen of een slecht netwerk beschikbaar heeft, of bijvoorbeeld geen data wil gebruiken vanwege verblijf in het buitenland. 

Een groot nadeel van het principe achter de Offline Application Cache, is dat er achteraf pas wordt gekeken of er (online) nieuwe informatie beschikbaar is. By default kijk je dus altijd eerst naar een (mogelijk) verouderde pagina. In het geval van weinig of geen veranderingen is dit uiteraard geen probleem. Het voordeel van deze technologie is dat het de mogelijkheid biedt om pagina’s extreem snel in te laden.

Ondersteuning?
http://caniuse.com/#feat=offline-apps

IE10+, Firefox, Chrome, Safari, Android Browser

Polyfill* beschikbaar?
Nee.

Nu toepassen?
Ja, met name voor mobiele webapps zeer geschikt.

Verder lezen:
http://www.html5rocks.com/en/tutorials/appcache/beginner/

SVG

SVG staat voor Scalable Vector Graphics. Het is een webstandaard van het W3C voor vector-afbeeldingen, gebaseerd op XML-syntax. Vector gebaseerd werken is niet nieuw: voor drukwerk wordt dit al veel langer gebruikt. Voor web is het een relatief nieuwe oplossing. SVG heeft als belangrijke voordeel dat met één bronbestand diverse afmetingen bediend kunnen worden (responsive!). Het bronbestand is relatief klein en vormt dus al snel een goed alternatief voor bijvoorbeeld logo’s of andere illustraties.

Bron: http://nl.wikipedia.org/wiki/Scalable_Vector_Graphics 

Ondersteuning?
http://caniuse.com/#feat=svg

IE9+, Firefox, Chrome, Safari, Android Browser

Polyfill* beschikbaar?
Ja. Bijvoorbeeld SVGWeb (https://code.google.com/p/svgweb/) of RaphaelJS (http://raphaeljs.com/).

Nu toepassen?
Geen twijfel over mogelijk: Ja! De ondersteuning is vergevorderd en kan veel opleveren voor de performance van je website. Wel goed in de gaten houden wat het doet in browsers die geen ondersteuning bieden.

Verder lezen:
http://www.html5rocks.com/en/tutorials/svg/mobile_fundamentals/

WebGL

WebGL is een techniek waarbij door middel van JavaScript dynamische 3D-beelden worden gegenereerd. Hierbij wordt gebruik gemaakt van hardware acceleratie (http://nl.wikipedia.org/wiki/Hardware-acceleratie). Deze technologie is zeer geschikt voor bijvoorbeeld games of interactieve beelden van ruimtes in 3D. 

Er is echter nogal wat specifieke kennis voor nodig om hiervoor te ontwikkelen. Er zal zeker een groeimarkt ontstaan zodra Internet Explorer het volledig ondersteunt. Zeker nu in de volgende versie van iOS (8) ook ondersteuning is opgenomen.

Ondersteuning?
http://caniuse.com/#feat=webgl

IE11 (gedeeltelijk), Firefox, Chrome, Safari, iOS 8.

Op Android biedt de standaard Android Browser momenteel geen ondersteuning, maar in Chrome op Android wel.

Polyfill* beschikbaar?
Nee, geen geschikte.

Nu toepassen?
Ja. Als ondersteuning voor bovengenoemde browsers voldoende is en je gedegen kennis van JavaScript is huis hebt, dan kun je de meest waanzinnige applicaties ontwikkelen met WebGL.

De JavaScript Library Three.js (http://threejs.org/) is een nuttige tool om een snelle start te maken met WebGL.

Verder lezen:
Demo’s (best bekeken met een van bovenstaande browsers):

– http://hellorun.helloenjoy.com/

– http://madebyevan.com/webgl-water/

– http://middle-earth.thehobbit.com/

Het moge duidelijk zijn: Ik ben zelf heel enthousiast over deze schatkist aan HTML5-pareltjes. Het is digitaal goud wat er blinkt! Ik maak het mijn missie om mensen zoals jij te enthousiasmeren om nieuwe technieken uit te proberen en toe te passen. Het web heeft stiekem heel veel te bieden en je maakt de digitale wereld voor jezelf en je gebruikers steeds leuker! Heb je zelf nog leuke tips of verborgen schatten? Of wil je ervaringen of slimme tools delen? Ik ben erg benieuwd naar je reactie.

* Een polyfill is een workaround om nieuwere standaarden ook in oudere browsers, of browsers die dit (nog) niet ondersteunen, te laten werken. Aangezien Polyfills vaak JavaScript-matige oplossingen zijn, is het wel noodzakelijk dat JavaScript aanstaat om dit te laten werken.

[Deze blogpost is geschreven door Victor Bastiaansen, lead Front-end Development Redhotminute.]