logo
CSS hacks | CSS Browser Selector- Sainfoinc Technology
5279
post-template-default,single,single-post,postid-5279,single-format-standard,ajax_fade,page_not_loaded,,qode_grid_1300,side_area_uncovered_from_content,footer_responsive_adv,qode-content-sidebar-responsive,qode-theme-ver-13.4,qode-theme-bridge,wpb-js-composer js-comp-ver-5.4.5,vc_responsive
 

CSS Browser Selector- Clever technique to help you on CSS hacks.

CSS Browser Selector- Clever technique to help you on CSS hacks.

CSS Browser Selector 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.

Example:

The color of box can change on different os/browsers:

  • 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

Source of this example:

 

DOWNLOAD
http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js
git clone git://github.com/rafaelp/css_browser_selector.git

Usage

1. Copy and paste the line below, inside and tag

<script src=”css_browser_selector.js” type=”text/javascript”></script>

 

2. Set CSS attributes with the code of each browser/os you want to hack
Examples:

html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

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
Tags:
, ,
10 Comments
  • Rao vặt
    Posted at 14:44h, 04 November Reply

    I used to be recommended this website by means of my cousin. I am no longer sure whether this submit is written by means of him as nobody else recognize such distinct about my difficulty. You’re amazing! Thanks!

  • Wyatt
    Posted at 22:25h, 24 November Reply

    I dont know what to say. This blog is great. Thats not really a really large statement, but its all I could come up with right after reading this. You know so considerably about this subject. So considerably to ensure that you created me wish to discover more about it. Your weblog is my stepping stone, my friend. Thanks for the heads up on this subject.

  • Raphael Wetzel
    Posted at 01:52h, 12 December Reply

    I simply want to say I am newbie to blogs and honestly savored you’re page. Likely I’m going to bookmark your website . You certainly come with awesome writings. Thanks a lot for revealing your blog.

  • Curtis Spahn
    Posted at 13:53h, 12 December Reply

    Thanks a lot for giving everyone remarkably terrific opportunity to read from this website. It is often very sweet and as well , full of a lot of fun for me and my office acquaintances to visit the blog more than 3 times in a week to read the newest guides you have. And indeed, we’re actually contented for the brilliant solutions you give. Selected 1 areas on this page are particularly the most suitable I’ve had.

  • Pete Bjorn
    Posted at 15:05h, 15 December Reply

    I simply want to mention I am just beginner to blogging and site-building and honestly loved you’re blog. Almost certainly I’m planning to bookmark your site . You amazingly come with great articles and reviews. With thanks for sharing your web site.

    • admin
      Posted at 10:55h, 17 December Reply

      Thanks Pete for appreciate our efforts.

  • college Students
    Posted at 10:40h, 17 December Reply

    Wow, this paragraph is good, my younger sister is
    analyzing these things, so I am going to let know her.

    • admin
      Posted at 10:54h, 17 December Reply

      Thanks for appreciate our efforts.

  • fiverr backlinks
    Posted at 07:45h, 30 December Reply

    I was suggested this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are amazing! Thanks!

  • bastcilkdoptb
    Posted at 12:23h, 06 April Reply

    Thanks for another magnificent post. Where else could anybody get that kind of information in such an ideal way of writing? I’ve a presentation next week, and I am on the look for such info.

Post A Comment