Detect Browser with CSS

  • CSS

We can detect browser with CSS feature query, @supports. This at-rule checks if the user browser supports a particular property or property:value. Now we can use a semi-hack to detect a browser engine. For example, the -moz-appearance: none is a CSS property that works only on Firefox (because of -moz- prefix) and  the -webkit-font-smoothing: antialiased is just for Chrome and other  Webkit/Blink based browsers (like Safari, Opera, etc).

See the Pen
Detect Browser with CSS
by Mehran Bolhasani (@mehranbolhasani)
on CodePen.