2014 April 26 Archive - EXEIdeas – Let's Your Mind Rock

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 Tag. 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. The color of the upper DIV can change on different os/browsers if you will use below style: .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; } And this will make your DIV color as…Internet Explorer — yellowInternet Explorer 7 — orangeGecko Engine on Windows (Firefox, Mozilla, Camino) — redGecko Engine on Linux (Firefox, Mozilla, Camino) — pinkGecko Engine on Other OS (Firefox, Mozilla, Camino) — grayOpera — greenKonqueror — blueSafari — blackChrome — cyanCLICK HERE TO SEE DEMOAvailable OS Codes [os]:win — Microsoft Windows (all versions)vista — Microsoft Windows Vista newlinux — Linux (x11 and linux)mac — Mac OSfreebsd — FreeBSDipod — iPod Touchiphone — iPhoneipad — iPad newwebtv — WebTVj2me — J2ME Devices (ex: Opera mini) changed from mobile to j2meblackberry — BlackBerry newandroid — Google Android newmobile — All mobile devices newAvailable Browser Codes [browser]:ie — Internet Explorer (All versions)ie8 — Internet Explorer 8.xie7 — Internet Explorer 7.xie6 — Internet Explorer 6.xie5 — Internet Explorer 5.xgecko — Mozilla, Firefox (all versions), Caminoff2 — Firefox 2ff3 — Firefox 3ff3_5 — Firefox 3.5ff3_6 — Firefox 3.6 newopera — Opera (All versions)opera8 — Opera 8.xopera9 — Opera 9.xopera10 — Opera 10.xkonqueror — Konquerorwebkit or safari — Safari, NetNewsWire, OmniWeb, Shiira, Google Chromesafari3 — Safari 3.xchrome — Google Chromeiron — SRWare IronLast 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…