Question about support for older androids

[Susan_5]

I need a little advice. I am working on a webpage that includes tabbed panels that use hidden checkboxes to switch between panels and, for smaller devices, a collapsing menu that triggers with a hidden checkbox. I have tested this page on a number of browsers and operating systems (can't test mac yet), and these two features work fine for every browser except the default browser on my 3yo android phone (android 4.04). Firefox on this phone handles the page great.

So what can I do here? I'd like to set up a fallback for older android phones but I can't think how -- can't find any sort of conditional that would work. It's tempting to say it's old enough to not worry about, but I'm still using it (though not a lot for browsing and I use Firefox even then). I found an article that explains this problem exists for android 4.1 and older, and much older iOS phones. According to developer.android.com, 6.1% of android users have 4.1 or older.

What do you all think? Does anyone know of a way I can test for older androids? Am I worrying about too small a group of users?

[rproffitt]

In short why I install Chrome on my older Android phone. The phone maker is never going to update it so Chrome it is.

[Susan_5]

rproffitt, do you think it is sufficient for me to support the major browsers and not worry about the default android browser? That would be the easiest solution; I just hate to potentially leave anyone out. But I may have no choice this time.

[rproffitt]

Here's a bit more about that default android browser. What is it? It's not like I can head to caniuse.com and check it out.

What is that (horrible) thing?

[Susan_5]

rproffitt, it's the default browser that comes with an android phone -- doesn't have a name that I can find. I installed Firefox because it's what I am used to using. Firefox, Chrome and IE don't seem to have any problems displaying my page and Opera just has some pretty minor spacing differences, but this browser that came with my phone is having some problems.

[rproffitt]

@Susan. If the browser has no name, dead end. I looked over http://caniuse.com/usage-table and will call it "Android Browser."

http://caniuse.com/#comparison has "Android Browser" so now you can pick through your code and see if it all is supported.

I clicked on 4.4 and landed http://caniuse.com/#compare=android+4.4 which is pretty extensive.

PS. You can pick other versions like 4. http://caniuse.com/#compare=android+4 and what a mess. Lots more partially supported tags.

[Dani]

Unless your website is targeting an intranet or users where you have some control over what they will be using, I would definitely do my very absolute best to be backwards compatible, or at least downgrade nicely, for over 6% of my users. I tend to not worry once it gets to the .5% range or lower. I'm not saying it needs to have every feature ... just downgrade to the point of being usable and not looking broken.

[Susan_5]

Thanks rproffitt -- very helpful links.

[Susan_5]

Dani, I agree about backward compatibility, but what can I do here to distinguish between older androids and everone else? I don't want to remove these capabilities for everyone because they don't work for a few. I could easily give users of older androids a less complex alternative if there were some way of identifying them.

[Dani]

Perhaps check the user agent?

[gentlemedia]

You use the checkbox hack and what I know is that pseudo-class + general (+) / adjacent (~) sibling combinators doesn't work on Android below 4.1.2. but there is a solution for that.

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

I've used this hack in the past as well, but credits goes to Tim Pietrusky

[Dani]

Not familiar with keyframes (other than seeing them used and never doing anything myself with them). Is "bugfix" just a friendly name?

[gentlemedia]

It's just a name picked by that Tim of the pen :) It could be any name. It's the animation-name which you would refer to in the @keyframes

[Susan_5]

Thanks gentlemedia, that did the trick. And thanks everyone for your responses.

I've used @keyframes for fading objects in/out. I'm not sure what it is doing here, but it works!

[gentlemedia]

Good stuff!

I've used @keyframes for fading objects in/out. I'm not sure what it is doing here, but it works!

It seems that old Android needs a useless animation on the body tag for it to work :)