object-fit: cover compatibility differences according to Mozilla and caniuse
I am wondering what browsers support the CSS property object-fit: cover. I usually use a mixture of Mozilla browser compatibility table and caniuse, however, they provide slightly different information. For example, on Mozilla, Chrome for Android version 31 is supported, however, caniuse states that version 84 is supported at a minimum. What is correct/ the reason for the above difference?
How would I test the object-fit: cover property for Chrome for Android version 55? Using something like lambda does not support picking a different browser on mobile (as they do with desktop) and will provide the latest version of the browser.
Long term, which one should I rely on in the future?
No, They match.
The black bar on CanIUse represents the current version of the browser (green means supported). Mozilla is listing the first version that supported the feature. So they do say the same thing. It's just that Mozilla is expecting you to figure out what recent versions are in the wild based on your users.
If CanIUse isn't showing "previous" versions it simply means that they don't have enough testing data to say. So in that case Mozilla seems to have more detail. That said, Chrome has had pretty much feature parity across platforms for quite a while so you're usually safe following the desktop column.
If you want to use a feature only when it's supported by a browser, use @supports like so:
@supports (object-fit: cover){
/* css styles for matching browsers */
}
These work just like media queries that overrides previous definitions and lower specificity.