You may want to put some text here

IE CSS Selectors

Omdat ik regelmatig nieuwe website projecten start, en niet telkens opnieuw al die basis-code wou ingeven heb ik voor mezelf een soort basis HTML/CSS template gemaakt. Als ik nu een nieuw project begin moet ik enkel maar een kopie nemen van die template en kan ik beginnen aan mijn project.

Een handigheidje in die template is een manier om IE selectors in je CSS te gebruiken. Normaal zou je hiervoor een appart CSS bestand voor aanmaken en dan includen met een code als deze:

<!--[if lte IE 6]>
<link type="text/css" href="ie6.css"  media="screen" rel="stylesheet" />
<![endif]-->

Aangezien dat dit altijd maar een paar regels zijn die je nodig hebt om een aantal IE fixes te doen zou het veel handiger zijn als we die paar CSS regels bij in ons standaard CSS bestand zouden kunnen plaatsen.

Om dit te kunnen doen vervangen we onze <html> tag met het volgende:

<!--[if lt IE 7 ]><html lang="en" id="ie6" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 7 ]><html lang="en" id="ie7" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 8 ]><html lang="en" id="ie8" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 9 ]><html lang="en" id="ie9" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->

Zoals je kan zien voegen we de versienummer van Internet Explorer toe als id. Op deze manier kunnen selectors als deze gaan gebruiken in de CSS stylesheet:

#ie6 body{
   color: #FF0000;
}
#ie7 p{
   padding-bottom: 10px;
}

Tot slot kan je hier nog een IE CSS selector test pagina downloaden. Hiermee kan je op je eigen systeem eens wat gaan testen met deze techniek.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

Leave a Comment