Het is een opmerking die iedereen hier op kantoor weleens heeft gehoord. Je hebt een website in de testomgeving geplaatst en een collega of de klant bekijkt de site om te testen of om de content te plaatsen. Vervolgens komen zij erachter dat er een onderdeel van de website er niet helemaal zo uit ziet als dat in het ontwerp bedoeld was. Tijdens het bouwen van de website is er toch echt aandachtig naar het ontwerp gekeken. Waarom klopt het dan niet?
Verschillende browsers
Eén van de oorzaken hiervan zijn de verschillen in browsers. Internet Explorer, Chrome, Firefox, Safari, allemaal hebben ze hun eigenaardigheden. Hoewel dit enkele jaren terug vele malen erger was dan tegenwoordig, blijven verschillende browsers de HTML en CSS verschillend interpreteren.
Even voor de duidelijkheid, HTML is de programeertaal die gebruikt wordt om de content van opmaak te voorzien. Hiermee kan de content dus ingedeeld worden in bijvoorbeeld artikelen met een kop en een afbeelding. Aangeven wat de header is of een knop is, gebeurd ook allemaal via HTML. CSS is de taal waarmee bepaald wordt hoe deze opmaak eruit komt te zien. Als je denkt aan een simpel nieuwsbericht dan wordt doormiddel van HTML dus bepaald wat de kop, introductietekst en paginatekst is. Met CSS wordt aangegeven dat de kop dikgedrukt en blauw moet zijn en dat er een mooi lijntje om het artikel heen staat.
De W3 (World Wide Web Consortium) heeft standaarden vastgelegd voor o.a. HTML en CSS. Echter volgt niet elke browser deze standaarden op. Daar komt bij dat deze talen constant in ontwikkeling zijn. Sommige browsers ondersteunen bijvoorbeeld functies die nog niet als standaard vastgelegd zijn. Dit is ook de reden waarom oudere browsers vaak niet meer ondersteund worden. Die hielden zich niet 100% aan de standaard van die tijd en ondersteunden vaak ook niet modernere functionaliteiten.
De onderlinge verschillen tussen de verschillende browsers zijn tegenwoordig een stuk kleiner, maar nog steeds zijn die verschillen aanwezig. Soms hebben die verschillen overduidelijke gevolgen voor hoe de website er uit komt te zien. Vaak zijn dat kleine subtiele verschillen.
1 code, verschillende vormen
Een mooi voorbeeld van dit probleem komt van Martijn Cuppens, een Belgische frontend developer. Hij heeft een demo online gezet die pijnlijk duidelijk maakt hoe de verschillende browsers hetzelfde stukje code renderen. Hij heeft het getest met een logo. Als je deze link: https://codepen.io/MartijnCuppens/pen/MXojmw opent in verschillende browers zie je hoe het logo verandert.
Daar waar Firefox de code rendert als 2 overlappende vierkantjes maakt Edge er een soort bovenaanzicht van een piramide van. Bij Internet Explorer lijkt het een kozijn en Safari en Chrome maken er weer wat anders van. Opvallend hierbij is dat Safari de enige browser lijkt te zijn die een hele felle groene tint gebruikt.
De code die Martijn Cuppens gebruikt bevat geen gekke dingen. Het is geen opmaak die je heel snel in een website zal tegen komen en dient vooral als voorbeeld. Je kunt in CSS opmaak-regels maken die specifiek voor één browser werken, maar daar is in dit geval geen sprake van. Alle CSS zou door elke browser begrepen moeten worden, echter blijkt dat het nogal verschilt hoe de browser daar mee om gaat.
En zo kan het dus zijn dat je soms een probleem lijkt te zien in een website, terwijl je buurman met toevallig een andere browser nergens last van heeft. Zou het niet een stuk makkelijker worden als alle browsers precies hetzelfde tonen? Zo ver is het nog niet en de vraag is of we daar ooit gaan komen. In de tussentijd is het aan ons om de verschillen tussen de resultaten van de diverse browsers zo klein mogelijk te maken. Meestal lukt dat prima, maar er glipt simpelweg wel eens iets tussendoor. Gelukkig weten we dat in de meeste gevallen ook wel weer op te lossen!
