4

Is there any CSS hack to detect only Android browsers to write CSS? Not all WebKit browsers — I want to write different CSS for some elements on iPhone and Android browsers.

For example http://paulirish.com/2009/browser-specific-css-hacks/

I want a CSS hack for Android browsers.

Kara
  • 6,115
  • 16
  • 50
  • 57
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 3
    I'd avoid that, personally. Browser detection always gets messy to maintain in the long-run. That's why we've moved onto things like media queries to ask for characteristics of the browser, not "which browser is this?" – Parrots Apr 24 '11 at 15:25
  • 2
    CSS isn't designed to handle this kind of stuff. – BoltClock Apr 24 '11 at 15:26
  • 1
    There are Android-specific quirks, like [a rendering issue involving the "Auto-fit pages" feature](http://stackoverflow.com/questions/8508889/android-autofit-mode-causing-issues-with-css-width-in-web-page). A way of targetting a few rules (like the no-op `background-image:` workaround for that problem) specifically to Android browsers would be very helpful. – supervacuo Nov 04 '12 at 18:21

2 Answers2

2

The CSS hacks you referenced exploits bugs in CSS to target specific browsers (usually hacks to get some stuff working with legacy browsers like IE 6/etc). CSS itself can't do browser-detection, especially not OS detection, which is what you're looking for.

My above comment on your question being said (don't do it!), you can grab the user agent string and it will contain "Android" as the OS:

Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2 – G1 Phone

I can't say if this is 100% reliable (although reason stands every Android phone should report as such), and there is nothing to prevent this from changing in the future. You'd need to do this detection in Javascript and have JS load your custom CSS file for Android (have it add another style tag to the document), or do the detection in your server-side programming (ASP/PHP, etc) and have it echo the style tag to your source.

Parrots
  • 26,658
  • 14
  • 59
  • 78
-1

The current best practise is to use feature detection rather than browser/OS detection. There is a javascript library called Modernizr that may be able to help. I believe it also has tricks that allow a non CSS3 browser to cope with some of the new CSS3 tags such as header and footer.

James Allen
  • 819
  • 7
  • 12
  • 1
    Yes, feature detection is perfect … but there are also browser bugs. Same trivial CSS 2 work perfectly on desktop webkit and give some unexpected results on android browser Browser. – SilentImp Apr 30 '15 at 17:08