LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Add Different CSS To A Same DIV On Different Browsers And Different OS

Add Different CSS To A Same DIV On Different Browsers And Different OS

Different CSS To A Same DIV On Different Browsers And Different OS

Many bloggers want to add some different codes on different browsers to make better responsive sites becasue some css values different in different browsers. And in new era there are many new OS so for that, you have to be change too. Like if you want to share a div /text on a selected browsers then how to do? but it comes to more heavy when you have to limit your code in os with browsers too. So now here we are with a new code that will handle your all problems with a little script and after it, you will be able to make your code limitation with browsers and OS too…

You ever have heard about CSS Browser Selector, NO? Then you should know that It is a very small JavaScript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. From this you can make you CSS limited to a browsers or a OS and even a browsers on different OS. There is nothing to worry about this highly messed up preface because the code is very easy.

So now without any more preface, here we comes straight to the code and full description in list and a brief tutorial about how to use it. First see the live demo. Open the demo link in different browsers and know more about demo below too.

Features:

1.) Simple CSS Code To Change Style On Every Platform.
2.) Add Different CSS On Different Browsers On Same DIV.
3.) Add Different CSS On Different OS On Same DIV.
4.) Do The Above Both Together.
5.) Simple CSS Code And Some JavaScript Code.
6.) No Effect ON Your Loading Time.
7.) You Can Use It On Any HTML Tags.
8.) Add This To Show/Hide Anything On Anywhere.
9.) Fully Customizable.
10.) Easy To Use And Easy To Handle.

How To Use?

1.) First Of All, Open That HTML Page Where You Want To Add Different CSS For Different Browsers/OS.
2.) Copy And Paste The Below Line Before Your </head> Tag.

<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js
" type="text/javascript"></script>

3.) Now Set CSS Attributes With The Code Of Each Browser/OS You Want To Hack As Shown Below In Your CSS File Or Inpage STYLE Tags.

.[os].[browser] .myCLASSorID { font-weight: bold; }

4.) Don’t Add Space Between .[os] and .[browser] However Add Spaces In Your Classes Or IDs.
5.) Save And Done.

Working Example:

Here We Have A Simple DIV With Class .example As Below.

<div class=”example“> </div>

The color of the upper DIV can change on different os/browsers if you will use below style:

<style type=”text/css”>
.ie .example { background-color: yellow; }
.ie7 .example { background-color: orange }
.gecko .example { background-color: gray; }
.win.gecko .example { background-color: red; }
.linux.gecko .example { background-color: pink; }
.opera .example { background-color: green; }
.konqueror .example { background-color: blue; }
.webkit .example { background-color: black; }
.chrome .example { background-color: cyan; }
.example { width: 100px; height: 100px; }
.no-js, .no_js, .nojs { display: block; }
.js { display: none; }
</style>

And this will make your DIV color as…

Internet Explorer — yellow
Internet Explorer 7 — orange
Gecko Engine on Windows (Firefox, Mozilla, Camino) — red
Gecko Engine on Linux (Firefox, Mozilla, Camino) — pink
Gecko Engine on Other OS (Firefox, Mozilla, Camino) — gray
Opera — green
Konqueror — blue
Safari — black
Chrome — cyan

Available OS Codes [os]:

win — Microsoft Windows (all versions)
vista — Microsoft Windows Vista new
linux — Linux (x11 and linux)
mac — Mac OS
freebsd — FreeBSD
ipod — iPod Touch
iphone — iPhone
ipad — iPad new
webtv — WebTV
j2me — J2ME Devices (ex: Opera mini) changed from mobile to j2me
blackberry — BlackBerry new
android — Google Android new
mobile — All mobile devices new

Available Browser Codes [browser]:

ie — Internet Explorer (All versions)
ie8 — Internet Explorer 8.x
ie7 — Internet Explorer 7.x
ie6 — Internet Explorer 6.x
ie5 — Internet Explorer 5.x
gecko — Mozilla, Firefox (all versions), Camino
ff2 — Firefox 2
ff3 — Firefox 3
ff3_5 — Firefox 3.5
ff3_6 — Firefox 3.6 new
opera — Opera (All versions)
opera8 — Opera 8.x
opera9 — Opera 9.x
opera10 — Opera 10.x
konqueror — Konqueror
webkit or safari — Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 — Safari 3.x
chrome — Google Chrome
iron — SRWare Iron

Last Words:

You can change your single DIV different on every browser ot OS and you can also use this to hide/show any thing on limited browsers/OS. So now that’s it what we have. If you like this then share it and don’t forget to comment. If you have any queries, feel free to ask us…

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *