DEV Community

Discussion on: Detect AVIF image support to use in your CSS

View post
Collapse
 
ivanmaslov profile image
Ivan Maslov • • Edited

Who googled this topic I have an alternate sync version for you, so you don't need to wait till onload or make some promises:

const { userAgentData, userAgent } = window.navigator;
const edge = Boolean(userAgentData?.brands.find(({ brand }) => brand === 'Microsoft Edge')); // doesn't, chromium though
const chromium85 = !edge && Boolean(userAgentData?.brands.find(({ brand, version }) => brand === 'Chromium' && parseFloat(version, 10) >= 85));
const ff93 = !chromium85 && parseFloat(userAgent.split('Firefox/').pop(), 10) >= 93;
const sb14 = !ff93 && parseFloat(userAgent.split('SamsungBrowser/').pop(), 10) >= 14;
const avifSupport = chromium85 || ff93 || sb14;
Enter fullscreen mode Exit fullscreen mode

thanks))

p.s.: check this before simple copy it caniuse.com/avif maybe something has updated

Collapse
 
mountainash profile image
Mountain/\Ash •

UserAgent lookups to define feature support should be a last resort - it's always better to test for the feature - you never know when a new browser will come out and make the test cases fail leaving the user with a suboptimal experience.