Waarom ziet mijn website er anders uit per browser?
Omdat elke browser je code met een eigen motor omzet naar beeld. Die motoren volgen dezelfde afspraken, maar vullen de details net anders in.
Daar komen standaardinstellingen bij, en de lettertypen die op het apparaat staan.
In de praktijk gaat het bijna altijd om kleinigheden: een paar pixels ruimte, een formulierveld dat er anders uitziet.
Waar de verschillen zitten
Formulierelementen zijn de klassiekers. Een keuzelijst of een bestandsknop wordt door elke browser en elk besturingssysteem anders getekend.
Verder: de precieze hoogte van tekstregels, hoe randen worden afgerond, en hoe schaduwen worden weergegeven.
Lettertypen
Als een lettertype niet geladen kan worden, valt de browser terug op een alternatief. Welk alternatief dat is, verschilt per besturingssysteem.
Daarom oogt dezelfde tekst op een Mac soms net iets anders dan op Windows. Geef daarom altijd een fatsoenlijke terugvaloptie op.
Wanneer het echt misgaat
Bij nieuwere technieken die nog niet overal worden ondersteund. Dan werkt iets in de ene browser wel en in de andere niet.
Dat is tegenwoordig zeldzaam, maar het komt voor bij recente opmaakmogelijkheden. Meer daarover lees je bij cross browser.
Mijn vuistregels
- Test in Chrome, Safari en Firefox; dat dekt het overgrote deel.
- Test Safari op een echte iPhone, niet op een simulatie.
- Geef elk lettertype een terugvaloptie mee.
- Accepteer kleine verschillen; identiek in elke browser bestaat niet.
Die laatste bespaart de meeste tijd. Pixel voor pixel gelijk krijgen kost uren en niemand ziet twee browsers naast elkaar.
Safari is de uitzondering
Die loopt op sommige punten achter en heeft eigen eigenaardigheden, vooral op de iPhone. Daar zit in de praktijk de meeste afwijking.
Omdat elke browser op iOS diezelfde motor gebruikt, is testen op één iPhone genoeg om dat af te dekken.
Wat je eraan doet
Bouw op de gangbare technieken en test in drie browsers. Zie je een verschil, kijk dan eerst of het je bezoeker hindert.
Een knop die twee pixels hoger staat is geen probleem; een menu dat niet opengaat wel. Meer over dat testen lees je bij welke browsers moet ik ondersteunen.