Browser-specifiek CSS
| Categorie | CSS |
| Geplaatst | 01-12-2007 |
| Laatste aanpassing | 26-07-2010 |
Een probleem dat veelvuldig voorkomt bij webdesigners: in browser X ziet je website er perfect uit, terwijl browser Y er een puinhoop van maakt. Er is een gemakkelijke oplossing voor: geef verschillende CSS-waarden op voor de verschillende browsers.
Inleiding
Stel je voor: je hebt een nieuwe website gemaakt, het ziet er prachtig uit. Jammer genoeg ziet de site er alleen in Firefox en Opera er goed uit; Internet Explorer 7 plaatst een aantal elementen verkeerd en Internet Explorer 6 maakt er helemaal een zooitje van.
Je ontdekt dat voor Firefox en Opera een margin van 200px prima werkt. Bij Internet Explorer 7 heb je echter een margin nodig van 250px, en Internet Explorer 6 doet het alleen goed met een margin van 300px. Hoe pas je dit nu toe in je CSS-stylesheet?
Browsers gebruiken altijd de laatste waarde
Om de code die straks volgt goed te kunnen gebruiken, zul je eerst moeten begrijpen dat browsers altijd de laatste opgegeven waarde gebruiken voor het opmaken van een element. Wat bedoelen we hier nou mee? Neem het volgende voorbeeldje:
Alle browsers zullen het header-element nu opmaken met een margin van 20px, simpelweg omdat die als laatste is opgegeven. De laatste waarde overschrijft dus de eerste waarde.
advertentie
Selectors voor verschillende browsers
Je kunt een bepaalde waarde aan een bepaalde browser toekennen door gebruik te maken van een selector. Dit zijn de selectors op een rijtje:
- # - eigenschappen met een hekje ervoor gelden voor alle Internet Explorer browsers (versie 6 en versie 7)
- _ - eigenschappen met een underscore ervoor gelden alleen voor Internet Explorer versie 6
Nu gaan we deze kennis toepassen op ons eerder gegeven voorbeeld:
De eerste waarde (200px) geldt voor alle browsers. Internet Explorer 7 zal echter de tweede waarde gebruiken (250px), omdat die de eerste waarde overschrijft. Internet Explorer 6 zal de laatste waarde gebruiken (300px), omdat die de eerste twee waarden overschrijft.
Op deze manier kun je voor meerdere elementen je CSS browser-specifiek maken.
