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 it possible to target Chrome only, not all Webkit powered browsers?
There are browser-specific CSS hacks that might work for this problem now, but they certainly aren't supported.
IMHO, your best bet is to add a class to the body tag using JavaScript that reads your navigator.userAgent and use that class (body.chrome for example) to target Chrome.
Related Topics
Two Divs, One Fixed Width, the Other, the Rest
Shrinking Navigation Bar When Scrolling Down (Bootstrap3)
Keep Background Image Fixed During Scroll Using CSS
How to Style Disabled Textarea in IE8
Object-Fit, Object-Positioning and Absolute Positioning
Why Do All Browsers Download All CSS Files - Even for Media Types They Don't Support
Best Way to Represent 1/3Rd of 100% in CSS
Chrome & Safari Error::Not Allowed to Load Local Resource: File:///D:/Css/Style.Css
Amp: How to Toggle a CSS Class
Webkit CSS to Control the Box Around the Color in an Input[Type=Color]
How to Change Font-Color for Disabled Input
Change Bootstrap Carousel Fade Transition
Firefox Blurs an Image When Scaled Through External CSS or Inline Style
Why Are Certain CSS Properties Not Applied to A:Visited