Fallback thema

Voor bezoekers die een browser gebruiken die geen moderne CSS ondersteunt heb ik een fallback thema gemaakt. Updaten naar de laatste versie van je gebruikte browser is natuurlijk altijd het beste, zeker ook qua veiligheid, maar is helaas niet altijd mogelijk.

Waarom een fallback thema?

Het internet is voor iedereen. En wij als webdevelopers maken het internet stuk. Als je als developer een nieuwe HTML-pagina maakt, dan is deze toegankelijk voor iedereen. Er is voldoende contrast (zwart/wit met blauwe onderstreepte links) en zowel screenreaders als zoekmachines kunnen de markup uitlezen.

Vervolgens zorgen wij er als developers voor dat pagina's niet meer toegankelijk zijn. We gebruiken moderne CSS, moderne JS en vervangen semantisch correcte elementen voor nietszeggende elementen die makkelijker vormbaar zijn door onszelf.

Ik ben van mening dat als je iets stuk maakt, je het naar je beste kunnen ook weer dient te maken. Niet alleen in 'the real world' maar ook op het web. Uiteraard is dit niet altijd mogelijk (en ook niet altijd wenselijk) maar voor 95% van de pagina's op het web is dit wel het geval. In wezen simpele, informatieve pagina's waar het voornaamste doel is de inhoud te lezen.

De meest correcte fallback

Eigenlijk is een fallback het verkeerde woord. We zouden moeten spreken van progressive enhancement. We maken iets wat voor iedereen toegankelijk is, en vervolgens bouwen we hier met moderne technieken lagen overheen om de website mooier, interactiever en uitnodigender te maken. Waarom spreek ik dan toch over een fallback? Het woord fallback is begrijpelijker voor de meeste mensen, en met 95%+ ondersteuning voor moderne technieken zouden we mogen spreken over 'normaal' en een 'fallback'.

Maar vanuit technisch oogpunt moeten we dat nooit doen. Als we onze 'oude' CSS en oude 'JavaScript' namelijk zouden toevoegen met moderne technieken (bijvoorbeeld als een bepaalde techniek niet wordt ondersteund) dan zal de fallback niet worden ingeladen.

De juiste manier is dus echt beginnen voor iedereen, en vervolgens met moderne technieken checken of moderne technieken ondersteund worden en deze vervolgens extra inladen.

Maar dan laad je toch allemaal extra CSS en JS?

Dat klopt. Veel van de basis CSS die ik heb geschreven wordt vervolgens weer overschreven. En alle moderne CSS wordt gedownload in ingeladen (alleen niet uitgevoerd). Je kunt code zo klein mogelijk houden door herbruikbare CSS te gebruiken. Op deze website zijn alle layout-technische elementen gebouwd op every layout. De basis CSS voor deze elementen is klein en vaak hetzelfde. Ik heb minder opties voor ieder layout element, maar dat is zonder extreme vormgeving ook nergens voor nodig. De fallback styling neemt nog geen 100 regels CSS in beslag en binnen deze regels zitten ook al moderne checks met overrides voor de moderne styling.

Voor JavaScript heb ik geen fallback code. JavaScript gebruik ik om extra functionaliteit en leuke effecten aan de pagina's toe te voegen. Deze zijn nergens voor nodig in een fallback vormgeving.