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

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

Posted on November 21, 2021 by Jeff Clayton — Leave a comment

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

About

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 comment