blog
Bij elk webproject kijken we voor welke browsers de site zou moeten werken. Een schitterend voorbeeld van verschillende interpretaties van code zie je in dit project van Jeff Batterton, de iPhone in CSS3.
In vier verschillende browsers zie je vier verschillende interpretaties. Ik heb de screenshots hieronder geplakt zodat je niet afhankelijk bent van je browser om dit te bekijken:
In IE 8.0 ziet de afbeelding er als volgt uit:
Let er op: dit is een weergave gecreëerd vauit CSS3 zonder afbeeldingen. De interface lijkt ergens op die van een iPhone maar je ziet weinig herkenning.
In Firefox 3.6.6 zie je de volgende weergave:
Er komen extra randen bij en de basislayout van een iPhone komt hier wel degelijk in naar voren.
En dan nu overstappen naar de best interpreterende CSS3 browsers, Safari en Chrome. Waar Safari duidelijk de principes van de iPhone weer weet te geven, excelleert Chrome in de mogelijkheden van CSS3 goed weergeven. Zie hier het verschil, de weergave in Safari 5.0:
En de sterkste versie in Google Chrome 5.0:
De laatste twee hebben het meeste gemeen, terwijl je in de vergroting (klik op de afbeelding) nog een duidelijk kwaliteitsverschil ziet tussen de twee browsers.
Zo zie je dat elke browser weer op een andere manier de opmaak interpreteert. Uitgangspunt zou moeten zijn dat elke bezoeker de meest optimale versie te zien krijgt. Hier werken we dan ook vaak naartoe: je leert de uitzonderingen per browser kennen en houdt rekening met restricties en mogelijkheden.
