Browser Specific CSS

Dec10
by on December 10, 2010 at 9:22 pm
Posted In: Guide

With ComicPress, you can specify unique and individual changes for each browser type, including mobile devices. [1. This is a ComicPress specific ability, won’t work on other themes.]

Browser Specific ‘targetting’ CSS element identifiers:

.lynx
.gecko
.opera
.ns4
.safari
.chrome
.ie
.iphone

Basically if you use any of these identifiers *before* another css Class or ID in your css it will specifically only be used for that browser that views the page.

For example:

.somecssbox {
      margin-top: 10px;
}

^ The above will make a margin-top of 10px on whatever CSS element you chose, however say it doesn’t look correct in IE browsers because IE does whatever IE does and gives it another additional pixel.

So this is how you override it by being browser specific”

.somecssbox {
      margin-top: 10px;
}

.ie .somecssbox {
      margin-top: 9px;
}

All browsers will use the margin-top: 10px; and because you put the .ie .somecssbox directly after it, all IE based browsers will use the 9px margin-top. Which fixes the look of your site specifically for IE.

You of course can do this for all the other browser types as well. [2. iphone refers to most mobile phones apparently.]