How to Apply CSS for Specific Chrome Version

Is there any way to apply CSS for specific Chrome version?

You should in principle always design for feature detection, not browser detection.

If your page renders differently in different browsers, make sure that your markup and CSS are valid.

When all else fails, you may need to detect a browser and even a specific version of that browser. As far as I know, there is no CSS hack that can be used to detect version 59 of Google Chrome specifically. In general, it is very hard to find such hacks for specific versions of specific browsers.

It is possible to detect using JavaScript, and this can also be used to inject styles into the DOM.

function isChrome59() {  var test = navigator.userAgent.match(/chrom(?:e|ium)\/(\d+)\./i);  if (test) {    return (parseInt(test[1], 10) === 59);  }  return false;}
if (isChrome59()) {  var styles = document.createElement('style');  styles.textContent = 'p { color: red; }';  document.head.appendChild(styles);}

p {  color: blue;}

<p>This text will be blue in all browsers, except in version 59 of Google Chrome, where it will be colored red.</p>

How to target for Chrome only browsers CSS

I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

Note that .chrome is a class name and you can change with other class names.

Check the following JsFiddle or snippet:

.test {color:red;}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {   .selector:not(*:root), .chrome {    color: green;  }}

<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>

Is there a way to set any style for a specific browser in CSS?

For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS

No, that isn't how it works.

Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.

In general, you shouldn't use them in production code because they are experimental.

Support for the vendor prefixed versions is removed as support stabilises.

Is there a way to set any style for a specific browser in CSS?

There are several methods that have been used for that effect.

Parser bugs

By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).

Conditional comments

Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.

Support for this has been dropped.

JavaScript

Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.

How to apply different css style to one class in different browsers

/* Chrome 28+ (also affects Safari and MS Edge now) */
@supports (-webkit-appearance:none) { /* Needed styles */ }

/* Firefox (any) */
_:-moz-tree-row(hover), .selector { /* Needed styles */ }

/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { /* Needed styles */ }

/* Internet Explorer 10+ */
_:-ms-lang(x), .selector { /* Needed styles */ }

/* Also Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Needed styles */
}

/* Internet Explorer 9+ */
_::selection, .selector { /* Needed styles */ }

/* Safari 6.1+, Chrome for iOS */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) { @media {
  /* Needed styles */
}}

If you need IE9-

For IE9- you can apply conditional comments and add style or link tag there. Also they allow to add conditional markup for browsers.

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

How to apply style to Chrome without affecting Edge

To target specific browser you can use @supports and combine supported and/or unsupported CSS properties by particular browser. Also you can exclude other browsers this way.

If you care only about Chrome on Windows, you should know that it doesn't support hyphens: auto even with -webkit prefix (but Chrome for Mac and Android supports -webkit-hyphens: auto) so to target Chrome for Windows with media query use

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
/* Your styles here */
}

Example

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {  * {    color: red;  }}

This is red, but only in Chrome for Windows

---

Related Topics