CODEWITHSUNDEEP
androidcssgoogle-chrome
Art Grc
Art Grc

Reputation: 473

CSS Conditionals for WebKit Browsers

I want to apply a CSS style for a div but I dont know how to recognize Chrome for Desktop and Android Navigator

.myDIV{
[if CHROME???] width: 280px; 
[if ANDROID???] width: 100%; 
}

Is there a way to detect chrome or android navigator from CSS?

Upvotes: 1

Views: 1209

Answers (3)

Jeff Clayton
Jeff Clayton

Reputation: 7291

While there is not a CSS specific hack for older Androids, I found a way that will rule out iPads/iPhones (any iOS device). This does not work for older, non 'ultra high definition' devices but should work for just about any modern one now.

How you use it: 

/* Modern Androids (For Android 4.0+, Chrome 15+, Safari 5.1+, and Opera 14+) */

_:-webkit-full-screen, :root .selector { color:blue; }

Test it at my live CSS hacks test page:

http://browserstrangeness.bitbucket.io/css_hacks.html#webkit OR http://browserstrangeness.github.io/css_hacks.html#webkit

The reason this works is iOS does not support the :-webkit-full-screen CSS pseudo-class which is otherwise included in webkit distributions.

At time of this posting, Safari is in version 8, and Chrome is in Development/Canary versions up to 41.

Enjoy!

Upvotes: 0

Nick H
Nick H

Reputation: 11535

Don't check for Android (you can't in CSS) - check for the screen size using Media Queries. This is much better than checking for a particular named browser and is known as responsive design when used to make designs work at a range of sizes.

.myDiv { width: 280px; }

@media screen and (max-width: 699px) {
  .myDiv { width: 100%; }
}

Upvotes: 1

Jason Lydon
Jason Lydon

Reputation: 7180

I could be wrong, but I think the only was is to sniff the browser agent and then add a class to the body.

http://www.quirksmode.org/js/detect.html

Upvotes: 1

Related Questions