dabs
Full Member
Posts: 78
|
Post by dabs on Oct 7, 2020 9:11:18 GMT
Hi,
is there an easy way for me to determine which HTML/CSS features are safe to use in my solution? I'm currently using RhoStudio 7.2.3, and my solution will be executing on a range of devices, mostly running Android 8, but going all the way down to 5.1. Can I read this information from sites such as caniuse.com, or are there others with better details for this environment?
Regards,
Daníel
|
|
|
|
Post by Vladimir Musulainen on Oct 7, 2020 10:34:30 GMT
I believe, caniuse.com is the best for it.
|
|
dabs
Full Member
Posts: 78
|
Post by dabs on May 17, 2021 14:49:50 GMT
Coming back to this after a few months... ...what exactly would I be looking at in order to figure out if a feature is available or not? Example: I would like to use CSS grids or CSS flexbox. CSS grid is described here: caniuse.com/css-gridShould I be looking at the numbers for "Android Browser" or something else? And how can I figure out what browser is being used under the hood in my app? Is there a property which tells me the name and/or version of the browser engine, or something similar? Regards, Daníel |
|
dabs
Full Member
Posts: 78
|
Post by dabs on May 17, 2021 16:29:19 GMT
Just to answer myself:
First, I added a test button to my UI, and in it I executed the following JavaScript:
alert(navigator.userAgent);
This BTW will display "RhoSimulator" on the simulator, and is therefore not helping much regarding the devices themselves.
I executed this code on one of the devices we're working with (running Android 7.1.2 which is not uncommon in our field), and it reported the following string:
Mozilla/5.0 (Linux; Android 7.1.2; TC51 Build/...) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/52.0.2743.100 Mobile Safari/537.36 etc.
This seems to tell me that this device in particular is using Chrome 52. Which means that I don't have support for CSS Grid.
I also tested the @supports feature in CSS, by adding code similar to this:
@supports (display: grid) {
.some-css-class {
color: red;
}
}
The element with "some-css-class" did in fact turn red in the emulator, but not on the device. A further proof that CSS grid support is out of the question.
I then tested the following block as well:
@supports (display: flex) {
.some-css-class {
color: green;
}
}
And in that case the element turned green, both on the emulator and the device itself. This shows that the @supports feature works on this device, at least, and that I am able to use CSS flexbox on those devices.
I will perform those same tests on a device running Android 6.0, hoping that the flexbox support is present there as well.
|
|
dabs
Full Member
Posts: 78
|
Post by dabs on May 17, 2021 16:31:20 GMT
Interestingly, the Android 6.0 device had Chrome 55. Quite strange...
|
|
|
|
Post by jontara on Jun 22, 2021 20:17:18 GMT
Starting with Android 5 the Webview could be updated from the Play Store.
Starting with Android 7, there is no longer a separate update of WebView. When the user updates Chrome, then the Webview is updated along with it.
So, it sounds like on your 7.1.2 devices, Chrome is not up to date.
Pain, but you will need to give instructions to users. You can test, and then ask users to update if you don't have a sufficient version.
Actually, this is better than iOS, but on the other hand, iOS users tend to update to latest OS anyway. Except on devices that can't take latest version.
|
|
