CSS specifieke code voor IE 10

09-07-2013 | Marcel van Langen | HTML, XHTML, CSS | microsoft, ie, internet, explorer, tien

Je wilt het niet, maar soms ontkom je er niet aan: je moet in je CSS rekening houden met de browser die de bezoeker gebruikt. Deze frustratie is van alle jaren. Hoewel IE10 zich goed houdt qua standaardisatie, kan het ook hier nodig zijn om specifiek voor IE10 CSS te schrijven. Maar hoe doe je dat eigenlijk?

IE10 is op zich een prima browser. Het houdt zich - in tegenstelling tot veel eerdere versies van Internet Explorer - over het algemeen prima aan de standaarden. Fijn voor ontwikkelaars, omdat die geen kunstgrepen in hun CSS opmaak uit hoeven te halen. Toch kan het ook nu nog nodig zijn om code te schrijven die zich specifiek op IE10 richt.

De oude manier om conditioneel commentaar in je CSS te gebruiken werkt niet meer. IE10 negeert deze code compleet. Toch zijn er nog aardig wat manieren over. Ik vond zelf de volgende oplossing charmant, en heb deze dan ook al toegepast in een project waar dit probleem speelde. Neem ergens in de pagina de volgende code op:

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

Het is belangrijk dat deze code geplaatst wordt voordat de CSS wordt gedeclareerd. In het ideale geval plaats je de code in de HEAD boven de CSS includes. Wat hiermee gebeurt is dat er in het geval van de IE10 browser een .ie10 voor de class wordt gezet. Op deze manier kun je de volgende CSS eenvoudig schrijven voor alleen IE10:

.ie10 .linkActive {color: #33ffee;}

Bovenstaande code zorgt ervoor dat de class linkActive alleen in het geval van ie10 de betreffende kleur zal hebben. Nice!

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS