Browserclasses zum body Tag hinzufügen

Details

Um einfacher CSS Anweisungen zu schreiben, welche nur für bestimmte Browser & Browserversionen gibt es natürlich auch die Möglichkeit von reinen css-Hacks.

Komfortabler geht es hiermit.

Notewendig dafür ist das bowser.js welches unter https://github.com/ded/bowser zu finden ist. Bei Joomla <3 muss jQuery mit eingebunden werden.

Script einbinden:

$doc->addScript('templates/' . $this->template . '/js/bowser.js');

Danach folgend das Script:

<script type="text/javascript">
function setBrowserClasses(){
  var browserVersion = Math.floor(bowser.version);
  var bowserKeys = Object.keys(bowser);
  var browser = bowserKeys[1];
  if (typeof browserVersion === 'undefined'){
    browserVersion = 'x';
  }
  jQuery('body').addClass(browser+browserVersion);
  jQuery('body').addClass(browser);
}

jQuery(function(){
  setBrowserClasses();
});
</script>

 Der body Tag sieht nun je nach Browser z.B. so aus:

<body class=""msie msie10"><!-- IE 10 --> 
<body class=""chrome chrome35"><!-- Google Chrome 35.5 -->

 Will man jetzt z.B. images nur für den IE 10 ansprechen müsste die css Auszeichnung so sein:

.msie10 img{
  /* doSomething */
}