MS Edge 94+ and Google Chrome 95+ Method to Detect & Differentiate between Windows 10 and Windows 11 (…and add CSS)

A neat way to add CSS to a document is to find a way to detect a platform then inject a CSS class. It combines a small JS detection with a special header feature in these browsers called user-agent client hints.

What it does: target a specific element (DIV, etc…) and add a class to it. In this case either class .win10 or .win11 based on what is detected by the chrome based browser.

See it in action:

https://browserstrangeness.bitbucket.io/win11test.htm

OR

https://browserstrangeness.github.io/win11test.htm

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

Posted in Chrome 95, Cool Code, CSS, CSS Hacks, Edge, Edge 94, Edge-All, Microsoft, Windows, Windows 10, Windows 11

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: