CSS - CSS per browser / apparaat


In een andere CSS tutorial gaat het over het specifiek toepassen van opmaak voor Internet Explorer en worden enkele manieren getoond om opmaak specifiek toe te passen voor Firefox. Echter is er nog een andere alternatieve manier in de vorm van een Javascript waarmee per browser misschien nog wel handiger opmaak toegepast kan worden.

Groot verschil is dat je in het geval van het aanvullende script naast bijvoorbeeld Internet Explorer of Firefox je ook eenvoudig CSS kunt toepassen voor andere browsers zoals Chrome, Safari en Opera maar kan dit bijvoorbeeld ook voor de iPhone of iPad. Aanvullend kun je ook opmaak toepassen per besturingssysteem al zal dit niet vaak voorkomen.

Gebruik

Het script is bedacht door de Braziliaan Rafeal Lima en kan hier gedownload worden. Zodra je het bestand gedownload hebt pak het uit en plaats het script online en roep het bestand op de onderstaande manier, plaats deze code in het HEAD gedeelte van de site.

<script type="text/javascript" src="js/browser-selector.js"></script>


Wat het script dan doet is de naam van de browser als class toevoegen aan de HTML tag van een pagina. Deze bestaat uit de naam van de browser plus het besturingssysteem en renderengine zoals bijvoorbeeld Webkit. Een voorbeeld zie je hieronder in de screenshot.

In dit geval is de gebruikte browser Google Chrome en zie je als class 'chrome' staan. Om nu specifiek opmaak toe te passen voor Google Chrome plaats je in de CSS de onderstaande code. In het voorbeeld wordt er een border van 5px toegepast op de div 'logo' en dit is dan alleen te zien in Google Chrome. Op deze manier kun je dan bepaalde zaken per browser, apparaat (iPhone, iPad, Android) of zelfs besturingssysteem regelen.

.chrome .logo {
        border:5px solid #000000;
        margin-left:50px;
}


Classes

Hieronder per browser de juiste class die je moet gebruiken in de stylesheet. Heb je enige kennis van Javascript dan kun je eenvoudig het script aanpassen of uitbreiden.

Browser / Besturingssysteem Classnaam
Internet Explorer (alle versies) ie
Internet Explorer 9 ie9
Internet Explorer 8 ie8
Internet Explorer 7 ie7
Internet Explorer 6 ie6
Firefox firefox
Safari safari
Opera opera
Windows win
Mac OS mac
Linux linux
Mobiel mobile
iPhone / iPod Touch iphone
iPad ipad
Android android
Blackberry blackberry