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%;

Solution 1:

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%; }
}

Solution 2:

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

Solution 3:

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!