rafaelp / css_browser_selector Goto Github PK

I'm on a nexus 7 and using chrome for android. .android does not work while .chrome, .linux, and .chrome.linux work. I can't use these however or else chrome on ubuntu linux et all will be affected. Anyway to specifically target chrome for android? Here's the code: mozilla/5.0 (linux; android 4.4.2; nexus 7 build/kot49h) applewebkit/537.36 (khtml, like gecko) chrome/33.0.1750.136 safari/537.36

please support flash and flash version!

It regards Opera as a Chrome ...

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/71.0.3578.98 safari/537.36 opr/58.0.3135.68

please support ie10

Added the fork with a demo file here:
https://github.com/isarmstrong/css_browser_selector

If Rafael comes back, I'll merge it as a pull request instead

Please, include something like "opera10_5". Opera 10.50 renders a bit different then Opera 10.10 and supports many new features from CSS3..

Hello,

Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example it could be hosted by cdnjs (website)

Would you please consider on using tags?
Thanks for your great work!

Firstly, can we get a way to detect the Blink rendering engine (as Chrome is switching from Webkit to Blink)?

I'm trying to target Chrome on the Tablet, I've tried .android.chrome, and .android.webkit, neither work. .android does work, but that targets all browsers, and the issue only occurs in the Chrome browser on Android.

I ran the tester.html file from the GitHub tests folder on the Samsung Galaxy Tab 10.1 in several browsers, here are the results.

Tablet: Samsung Galaxy Tab 10.1
Tablet Model: GT-P7510-MA16ARB
OS: Android 4.0.4; GT-P7510 Build IMM76D

Browser: Android (Stock) Browser 4
HTML Classes: android android4_0 device_gt_p7510 mobile linux lang_en lang_en_us js orientation_landscape maxw_1280 (orientation_portrait maxw_768)
UA: Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; GT-P7510 Build/IM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

Browser: Chrome 30.0.1599.82
Blink Version: 537.36 (@158286)
HTML Classes: android device_gt_p7510 mobile linux js orientation_landscape maxw_1280 (orientation_portrait maxw_768)
UA: Mozilla/5.0 (Linux; Android 4.0.4; GT-P7510 Build/IM76D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.82 Safari/537.36

Browser: Firefox 24.0
HTML Classes: gecko firefox firefox24 firefox24_0 mobile js orientation_landscape maxw_1280 (orientation_portrait maxw_768)
UA: Mozilla/5.0 (Android; Tablet; rv:24.0) Gecko/24.0 Firefox/24.0

Browser: Opera Mobile
HTML Classes: android device_gt_p7510 mobile linux js orientation_landscape maxw_1280 (orientation_portrait maxw_768)
UA: Mozilla/5.0 (Linux; Android 4.0.4; GT-P7510 Build/IM76D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36 OPR/16.0.1212.64462

Browser: Ninesky 2.5.1
HTML Classes: android android4 android4_0 device_gt_p7510 mobile linux lang_en lang_en_us js orientation_landscape maxw_1280 (orientation_portrait maxw_768)
UA: Mozilla/5.0 (Linux; U; Android 4.0.4; GT-P7510 Build/IM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

Notice how you can't target .android.firefox, or .android.chrome or .android.webkit. Having these in the HTML Classes would be super useful.

I love this script by the way, I build it in to all the sites I make now. THANK YOU!

Edit: I made a simple page for my own use while testing browsers and devices with limited or no Dev Tools. Feel free to link to it on README.mkdn. It's hosted in my public Dropbox folder, I don't intend on ever deleting it.

• Print DOM and User Agent Info

Hi,
first of all - congrats, great code, saved me a lot of time.

Second thing:
On iOS (check only on iphones) you script provides such information:
For Safari:
safari safariX ........
For chrome
safari ......

Where X is number of iOS version (4,5,6...)

So there's a way to indetify if user is browsing through Chrome, or Safari on iOS (and they differ a little - Safari has this nasty bottom bar that hides page elements and it's often required to take this into account and make page a little smaller so it displays content above this bottom bar)

It's currently easy to do it with css, just by adding class for 'safariX' but this requires to write a lot of code (and add new lines for each new iOS version).

So it would be nice to add different flag, or use safari|chrome flags to directly say what is exact browser being used.

I could for your code in spare time if you're short on time, but it seems you will add this faster:) (as I would love to have 32h per day...)

More user-agent info for tablets, this time around the iPad 2. Notice no matter what browser you're running it gets identified as "Safari", and the OS is inaccurate in the html classes as well for some of these.

Just for clarity, the "HTML Classes" are what is generated by the css_browser_selector.js, and the User Agent is what is being reported by the browser. I used this page for testing the browsers to get the info.

The browsers below were selected by doing a search in the AppStore for "Browser". these are some of the most popular free ones that run on the iPad 2.

Tablet: Apple iPad 2 16GB
Tablet Model: A1395 (MC996LL/A)
OS: iOS 6.1.3 (10B329)

Browser: Safari
HTML Classes: webkit safari safari6 safari6_0 mobile ios ios6 ios6_1 ios6_1_3 ipad js orientation_landscape maxw_1024 orientation_portrait maxw_768
UA: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25

Browser: Chrome
HTML Classes: webkit safari mobile ios ios6 ios6_1 ios6_1_3 ipad js orientation_landscape maxw_1024 orientation_portrait maxw_768
UA: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) CriOS/30.0.1599.16 Mobile/10B329 Safari/8536.25 (90894103-3F44-4825-BD80-621F7193BAAC)

Browser: Mercury
HTML Classes: webkit safari mobile ios ios7 ios7_0 ipad js orientation_landscape maxw_1024 orientation_portrait maxw_768
UA: Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mercury/8.0.1 Mobile/11A465 Safari/9537.53

Browser: Dolphin
HTML Classes: webkit safari safari5 safari5_1 mobile ios ios6 ios6_1 ios6_1_3 ipad js orientation_landscape maxw_1024 orientation_portrait maxw_768
UA: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

Browser: Atomic Lite
HTML Classes: webkit safari safari5 safari5_1 mobile ios ios5 ios5_0 ipad js orientation_landscape maxw_1024 orientation_portrait maxw_768
UA: Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

Browser: Coast by Opera
HTML Classes: webkit safari mobile ios ios6 ios6_1 ios6_1_3 ipad js orientation_landscape maxw_1024 orientation_portrait maxw_768
UA: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Coast/1.1.3.65998 Mobile/10B329 Safari/7534.48.3

Currently when using Edge the selector is chrome.
I found an example of the Edge user agent string here: http://stackoverflow.com/questions/30591706/what-is-the-user-agent-string-name-for-microsoft-edge

“Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0″

document.documentElement is much faster than getElementsByTagName('html')[0]

We use it in Modernizr and got a decent speed boost. (relatively, of course)

really well done script here.. has some fixes that arent part of this one.

and unit tests!

http://cssuseragent.org/

Hi,

Windows 8.1 user the user agent string now reads "Windows NT 6.3..."

I think this can be addressed by changing line 110 of css_browser_selector_dev.js to say:
(is('windows nt 6.2') || is('windows nt 6.3')?' win8'

Thanks!

Hello. Safari and Chrome often render things differently, isn't there a way to distinguish them using this script? Thanks.

mozilla/5.0 (linux; android 6.0.1; samsung sm-a500fu/a500fuxxs1cph2 build/mmb29m) applewebkit/537.36 (khtml, like gecko) samsungbrowser/4.0 chrome/44.0.2403.133 mobile safari/537.36

Hi there,

I've tried your code in Nokia Lumia 620 & 1320, it's working perfectly on both device, but when i tried it on Nokia Lumia 730 its showing white box. Please suggest how can i fix this issue.

First off all, thanks for the smart script :)

I've just ported it to PHP for a Drupal module (I know about Bastian Allgeier's PHP version, but it wasn't up to date with your latest changes and I wanted to give it a try). To understand the script I had to untangle the one line of JS, which was a bit painful.

Would it be possible to also provide a non-minified version of the script?

For example, here is my untangled version of 0.4.0:

function css_browser_selector(u) {
  var ua = u.toLowerCase(),
  is = function(t) {
    return ua.indexOf(t) > -1
  },
  g = 'gecko',
  w = 'webkit',
  s = 'safari',
  o = 'opera',
  m = 'mobile',
  h = document.documentElement,
  b = [
    (!(/opera|webtv/i.test(ua)) && /msie\s(\d)/.test(ua)) ? ('ie ie' + RegExp.$1)
    : is('firefox/2') ? g + ' ff2'
    : is('firefox/3.5') ? g + ' ff3 ff3_5'
    : is('firefox/3.6') ? g + ' ff3 ff3_6'
    : is('firefox/3') ? g + ' ff3'
    : is('gecko/') ? g
    : is('opera') ? o + (
      /version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1
      : (
        /opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2
        : ''
      )
    )
    : is('konqueror') ? 'konqueror'
    : is('blackberry') ? m + ' blackberry'
    : is('android') ? m + ' android'
    : is('chrome') ? w + ' chrome'
    : is('iron') ? w + ' iron'
    : is('applewebkit/') ? w + ' ' + s + (
      /version\/(\d+)/.test(ua) ? ' ' + s + RegExp.$1
      : ''
    )
    : is('mozilla/') ? g
    : '',
    is('j2me') ? m + ' j2me'
    : is('iphone') ? m + ' iphone'
    : is('ipod') ? m + ' ipod'
    : is('ipad') ? m + ' ipad'
    : is('mac') ? 'mac'
    : is('darwin') ? 'mac'
    : is('webtv') ? 'webtv'
    : is('win') ? 'win' + (
      is('windows nt 6.0') ? ' vista'
      : ''
    )
    : is('freebsd') ? 'freebsd'
    : (is('x11') || is('linux')) ? 'linux'
    : '',
    'js'
  ];
  c = b.join(' ');
  h.className += ' ' + c;
  return c;
};
css_browser_selector(navigator.userAgent);

Much more readable :)

I'm running 0.6.1, updated by verbatim - I couldn't find a way to leave an issue on his fork, though, and I am guessing that the issue may affect this version as well. On Firefox 3.6, mac, "ie6" is being added to the body class.

I use this JS years ago and now, and I think create project to GPL2 or MIT is the best option to share or enter to the whitelist cms core :)

https://www.drupal.org/node/2466039

Please!!!!!!!!!!

I think we need a new maintainer for this project.

@verbatim would probably do it. and we can see some of the 7 sitting pull requests get some action.

@rafaelp could you add verbatim as repo collab so he can get this script back in order?

thanks!

I tested it for ie11 on windows 7.
But I get a red window instead of a yellow window

@verbatim are you still maintaining this?

mozilla/5.0 (linux; android 4.1.2; gt-p3110 build/jzo54k) applewebkit/537.36 (khtml, like gecko) chrome/32.0.1700.99 safari/537.36

tested on my phone and got just the white box. Here is the code it gave me to post here:

mozilla/5.0 (linux; u; android 4.0.4; en-us; droid4 build/6.7.2-180_dr4-16_m2-37) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30

If I use .android this seems to target Chrome on Android but no other Android browsers. .android.chrome or .android.firefox etc don't work at all.

I'm using the 0.6.1 version.

Please, add support YaBrowser to script:

    ...

    /* Yandex Browser */
    (/yabrowser\/(\d+)\.(\d+)/.test(ua) && (re = RegExp)) ?
    g + ' yandex yandex' + re.$1 + ' yandex' + re.$1 + '_' + re.$2 :

    ...

About Yandex Browser: https://browser.yandex.ru

your page say should be Yellow ?