0

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?

enter image description here enter image description here

Corbuk
  • 670
  • 1
  • 8
  • 23

1 Answers1

1

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.

Bryce Howitson
  • 7,339
  • 18
  • 40
  • Oh right so essentially Chrome and Chrome for Android are intertwined, just the column for Chrome for Android does not repeat previous versions listed in the column for Chrome? – Corbuk Aug 11 '20 at 18:56
  • It's not always the case that caniuse doesn't repeat the same column info. But as a general rule, you can assume they're about the same. This isn't a hard rule but if Chrome doesn't match its usually desktop that doesn't have it. Eg access to accelerometer and gyroscope. The APIs exist on both but most desktop devices don't have those sensors so you'll need to think through it a bit. – Bryce Howitson Aug 11 '20 at 19:33