edge detection

[JStyle21]

Hi,

Is there something new for MS edge? i didn't anything that can detect edge vs chrome.

[jeffclayton]

Not lately - Edge being a veritable fork of Chrome is the reason. They share the same CSS base. You can separate them more easily in Javascript however. It wouldn't be hard to introduce a CSS class for chrome or edge for example if that is something you are needing.

[JStyle21]

I'm actually looking for a JS way, what do you mean by separating more easily? I couldn't find a way using JS or CSS

[jeffclayton]

There is actually a subtle difference I noticed:

If you look at navigator.appversion there is something. You will see this in the Edge string but not in Chrome: Edg/110.0.1587.50 -- both of them contain Chrome/110.0.0.0 at this time. While annoying to use useragents, the useragent string does the same thing. Despite all of the hubub about changing and not putting user agent strings, Microsoft is doing it differently in theirs by that token.

If you look at any of these on windows or Mac, you will also see the value of navigator.platform: Win32 or MacIntel so you can tell which general OS you are looking at.

There may be additional differences because Google and MS like to add their own things, such as a JavaScript special 'thing' but that should work for now. So it might be worth looking at.

On a Mac, both Chrome and Safari have 'Safari' in the navigator.appversion, but to separate Safari from Chrome instead, use navigator.vendor: Apple Computer, Inc.

Looking at Google Chrome or Edge on Mac or Win they both say Google Inc. as the vendor. So to separate them from Safari, check the vendor for Apple. Google Chrome on Mac also has Safari in it or I wouldn't have mentioned it.

Firefox on Win/Mac have a blank for Vendor value, but you can use other ways to detect that. You can detect the others and then say 'else if [a diffferent method here for firefox] after you rule out the others. If you really wanted to, you could search the useragent for Firefox as an 'else' statement.

For the most part if you combine all that into a small nested if-then script that might be good enough for your purposes.

[JStyle21]

Thanks for the detailed info, sorry but i should have mentioned i need a detection method without using the useragent header or the navigator object so it doesn't help in my case.

[jeffclayton]

Sometimes those are some of the only differences when something is forked, but who knows I will let you know if I find something else. I am curious. If anyone else has any notes on the subject, I am thrilled to see your postings. Microsoft just adopted nearly all of the Chrome planned updates as of a week ago (Feb. 17th) so it may be quite a chore to find something other than the easier methods above. While I am open to the possibility, there might not even be another method at this time.

[JStyle21]

Solved (for now) After comparing chrome and edge i found out that edge doesn't support the AVIF and AV1 formats while chrome does so i used a loading event of such files to determine who is who and it works as expected

[jeffclayton]

I am thinking you knew that already ;) -- Your note is helpful, however. There is an extension to solve that, so if someone has installed say, the AV1/AVIF extension from the Microsoft Store - does it cancel your 'check' ? https://www.microsoft.com/en-us/p/av1-video-extension/9mvzqvxjbq9v If so, you may need to still fall back on the other.

[JStyle21]

I know it's temporary, it's a cat and mouse game,and MS can add the missing support any day now. So far i've only tested AVIF since images are smaller than videos it's easier on the bandwidth. But good point regarding the extensions angle, will will check it out and report back.

Fallback is always good same as more ways of detection, i've excluded the navigator and user agent on purpose but in normal cases they should be used as well.

[jeffclayton]

They may or may not. I have seen things go for years unsupported (and even ones that have the code that 'reports' supported while unfinished) -- though interestingly enough that often allows for a great way to check for something anyway. The cat and mouse game is often year-to-year (or month-to-month) with the css/scripts that get supported anyway. You may have noticed that what I had been doing for specifics is 'version x supports this, version y does not' and that comparison with other browsers can last a while, sometimes even years.

[jeffclayton]

All that said, I was thinking along similar lines. When you have 2 virtually identical products, often it is the 'added extras' that change things. So you weren't wrong by looking at that option. The key with embedded features is similar to any other method really, you publish what versions reflect a positive result, and which do not. If [throwing random values for the purpose of the conversation] 'versions 102-116' are detectable, that is good info. Not everything out there has a valid addon.

[jeffclayton]

I would like to see your detection method in action if you have (or plan to get it up and running.)

[JStyle21]

They may or may not. I have seen things go for years unsupported (and even ones that have the code that 'reports' supported while unfinished) -- though interestingly enough that often allows for a great way to check for something anyway. The cat and mouse game is often year-to-year (or month-to-month) with the css/scripts that get supported anyway. You may have noticed that what I had been doing for specifics is 'version x supports this, version y does not' and that comparison with other browsers can last a while, sometimes even years.

Agreed and may i add you did a wonderful job documenting everything

All that said, I was thinking along similar lines. When you have 2 virtually identical products, often it is the 'added extras' that change things. So you weren't wrong by looking at that option. The key with embedded features is similar to any other method really, you publish what versions reflect a positive result, and which do not. If [throwing random values for the purpose of the conversation] 'versions 102-116' are detectable, that is good info. Not everything out there has a valid addon.

AV1 is a bust, you need the app from the MS store to make the video play but even without it the only way to check is with the HTMLMediaElement.canPlayType() method which only loads the metadata and doesn't test the actual ability to play aka the presence of the plugin which isn't included in edge but is in chrome, so the method returns probably which is a false positive and there is no other way to test it as far as i know.

it's much easier with AVIF since it's an image, the browser will try to render it and not just load it so there are no metadata false positives here, this remains the only working\viable options for now.

I would like to see your detection method in action if you have (or plan to get it up and running.)

I"ll whip up a POC for you and link it here

[JStyle21]

@jeffclayton Sorry for the late response, here is the POC.

POC

Code