Blog

Als we de statistieken van onze sites erbij nemen zien we dat de volgende browsers het meest gebruikt worden: IE6, IE7, Firefox 3, Firefox 2, Safari 3 en Opera 9. Met een leeftijd van meer dan 6 jaar is IE6 veruit de oudste browser uit deze lijst.

In 2002 was er nog nauwelijks sprake van Myspace, Youtube, Gmail, Web2.0 en AJAX en lag de nadruk nog niet zo zwaar op beveiliging en webstandaarden.

Door onwetendheid van de gebruikers wordt hun computer vaak niet geüpdatet en zitten wij webdevelopers dus vast aan de vele beperkingen en fouten van deze zwaar verouderde browser.

Voorheen zochten we naar de grootste gemene deler in de browsers die we ondersteunen: Welke mogelijkheden zijn er zodat we exact dezelfde layout en functionaliteit bekomen in al deze browsers?. Laten we echter IE6 weg uit deze berekening, dan zien we dat er opeens veel meer mogelijkheden beschikbaar zijn op vlak van CSS en nette HTML code.

Tot het marktaandeel van IE6 te verwaarlozen is, zullen we deze browser toch op de meeste vlakken moeten ondersteunen. Om toch zoveel mogelijk potentieel uit de moderne browsers te halen zonder Internet Explorer gebruikers in de kou te laten staan gaan we in de toekomst steeds vaker “graceful degradation” toepassen. In de volgende items ga ik de grootste beperkingen van Internet Explorer 6 omschrijven en de oplossingen die we hiervoor kunnen gebruiken.

PNG transparency

Een van de grootste nadelen van IE6 is het ontbreken van PNG-24 transparantie. Hierdoor wordt het moeilijk om overgangen of schaduwen te gebruiken in ontwerpen.

Gelukkig is er een klein scriptje van Twinhelix dat de meeste van deze problemen oplost.

Pseudo-classes

Een handigheid die al eeuwen beschikbaar is voor CSS is het selecteren van specifieke elementen zoals het eerste of laatste item in een lijst. De code

 ul.menu li:first-child { font-weight: bold; }

zal enkel het eerste item uit een menu vetgedrukt maken. Aangezien deze pseudo-classes niet allemaal ondersteund worden door IE6 zijn we genoodzaakt om een extra class toe te voegen aan onze items:

 ul.menu li.first { font-weight: bold; }

Omdat het hier meestal gaat om details in de opmaak kunnen we overwegen om deze overbodige html code weg te laten en de gebruikers van IE6 een iets minder fraaie, maar even functionele pagina voor te schotelen.

Attribute selectors

Bijna net zo handig als de pseudo-classes zijn de attribute selectors. Hiermee kan je heel specifieke elementen stijlen op basis van hun attributen. Met deze code:

 input[type="password"] { border-color: red; }

kan je makkelijk onderscheid maken tussen invoervelden en met deze code:

 a[title] { font-weight: bold; }

maak je alle links met een title-attribuut vetgedrukt

Ook attribute selectors zullen meestal gebruikt worden om extra detail aan je pagina toe te voegen en zijn dus een goede kandidaat om te negeren tijdens het testen voor IE6.

Hover

In het geval van ":hover" is het simpel: Dit wordt enkel voor anchors ondersteund in Internet Explorer 6. Ook al zijn anchors de meeste voorkomende elementen om een hover effect bij te gebruiken, toch is het ook vaak handig om b.v. menu items een andere opmaak te geven als er met de muis overgegaan wordt. Dankzij het kleine "Whatever:hover” script kunnen we deze functionaliteit toch beschikbaar maken voor IE6.

Position: fixed

Een eigenschap die vaak vergeten wordt is "position:fixed". Hiermee kan je block elementen los over je pagina laten zweven. Een handige toepassing hiervan is het gebruik van een navigatiebalk of footer die steeds zichtbaar blijft. Aangezien veel designers hier niet eens kennis van hebben, wordt er maar zelden gebruik van gemaakt.

Besluit

Met een paar kleine toegevingen is het voor webdesigners zeker mogelijk om nieuwe vooruitstrevende technieken te gebruiken, als er maar een toegankelijk en aanvaardbaar alternatief wordt voorzien voor gebruikers van browsers die deze technieken niet ondersteunen. De bovenstaande voorbeelden heb ik voorgesteld in een kleine testcase.

In een later artikel gaan we in op nieuwe opmaak technieken in CSS3 die gebruikt kunnen worden in nieuwe browsers en toch een aanvaardbaar alternatief bieden voor oudere browsers zoals Internet Explorer 6.