How to apply specific CSS rules to Chrome only?
What issue are you facing that forces you to do this? Targeting CSS rules for specific browsers is not great design and in most cases, shouldn’t be necessary any more nowadays.
@Pekka this is my issue stackoverflow.com/questions/9311965/… , and i found that the only solution is to add those but only for chrome, please help 🙁
13 Answers 13
CSS Solution
/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */ @media screen and (-webkit-min-device-pixel-ratio:0) < div> /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) < div> /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) < .selector <-chrome-:only(; property:value; );>> JavaScript Solution
if (navigator.appVersion.indexOf("Chrome/") != -1) < // modify button >The CSS solution hack is working for «Chrome only» as @media screen and(-webkit-min-device-pixel-ratio:0) < >— notice the important missing space after the «and». But beware : In CSS preprocessors you’ll need to find a way to avoid the correction they make .
I used data-ng-class for angular and added a .chrome class with the JS expression. Worked like a charm. Thanks
As we know,Chrome is a Webkit browser,Safari is a Webkit browser too,and Also Opera,so it’s very hard to target the Google Chrome,using media queries or CSS hacks,but Javascript is really more effective.
Here is the piece of Javascript code that will target Google Chrome 14 and later,
var isChrome = !!window.chrome && !!window.chrome.webstore; and below is a list of Available Browser hacks,for the Google chrome including the influenced browser,by that hack
WebKit hack:
Supports Hacks:
@supports (-webkit-appearance:none) <> Google Chrome 28,and Google Chrome > 28, Opera 14 and Opera > 14
Property/Value Hacks:
Google Chrome 28,and Google Chrome < 28, Opera 14 and Opera >14,and Safari 7 and Less than 7.
JavaScript Hacks:1
var isChromium = !!window.chrome; JavaScript Hacks:2
var isWebkit = 'WebkitAppearance' in document.documentElement.style; JavaScript Hacks:3
var isChrome = !!window.chrome && !!window.chrome.webstore; Media Query Hacks:1
Media Query Hacks:2
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) < .selector <>> For more information please visit this website
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) < .selector <>> now affects Firefox too
An update for chrome > 29 and Safari > 8 :
Safari now supports the @supports feature too. That means those hacks would also be valid for Safari.
/* Chrome only: */ @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) < p < color: red; >> This css browser selector may help you. Take a look.
CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.
The declaration «css browser selector» is a bit confusing for a simple javascript. CSS itself doesn’t support any selections by browsers!
The main problem is that it becomes a fragile single point of failure as it is reliant upon a single programmer being dedicated, and that one would need to keep tracking their changes to keep up to date. Basically, a dubious way to deal with an ongoing issue, as while it may help in the short term, it doesn’t solve the problem.
Apply specific CSS rules to Chrome only by using .selector:not(*:root) with your selectors:
The accepted answer matches Firefox 80+ also.
To target all Webkit browsers (Edge 79+, Chrome, Safari), find a -webkit specific CSS extension that is not supported by Firefox (use https://caniuse.com). This is a moving target; one of the Webkit browsers may remove it, and a non-Webkit browser may add support for it.
@supports(-webkit-text-security: circle) < /* Matches Edge 79 - latest (92) */ /* Matches Chrome 4 - latest (95) */ /* Matches Safari 3.1 - latest (15/TP) */ /* Matches Opera 15 - latest (78) */ /* does not match Firefox */ >@supports(-webkit-tap-highlight-color: black) < /* Matches Edge 12 - latest (92) */ /* Matches Chrome 16 - latest (95) */ /* Matches Opera 15 - latest (78) */ /* does not match Safari */ /* does not match Firefox */ >If you actually need Chrome-only, JS is probably the only way to go.
The .selector:not(*:root) <> hack in https://stackoverflow.com/a/25496712/1218408 still excludes Firefox through version 92 but matches Safari.
Have never run across an instance where I had to do a Chrome-only css hack until now. However, I found this to move content below a slideshow where clear:both; affected nothing in Chrome (but worked fine everywhere else — even IE!).
@media screen and (-webkit-min-device-pixel-ratio:0) < /* Safari and Chrome, if Chrome rule needed */ .container < margin-top:100px; >/* Safari 5+ ONLY */ ::i-block-chrome, .container
If you want, we can add a class to a specific browser.
var BrowserDetect = < init: function () < this.browser = this.searchString(this.dataBrowser) || "Other"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown"; >, searchString: function (data) < for (var i = 0; i < data.length; i++) < var dataString = data[i].string; this.versionSearchString = data[i].subString; if (dataString.indexOf(data[i].subString) !== -1) < return data[i].identity; >> >, searchVersion: function (dataString) < var index = dataString.indexOf(this.versionSearchString); if (index === -1) < return; >var rv = dataString.indexOf("rv:"); if (this.versionSearchString === "Trident" && rv !== -1) < return parseFloat(dataString.substring(rv + 3)); >else < return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); >>, dataBrowser: [ , , , , , , , ] >; BrowserDetect.init(); var bv= BrowserDetect.browser; if( bv == "Chrome") < $("body").addClass("chrome"); >else if(bv == "MS Edge") < $("body").addClass("edge"); >else if(bv == "Explorer") < $("body").addClass("ie"); >else if(bv == "Firefox") < $("body").addClass("Firefox"); >$(".relative").click(function()< $(".oc").toggle('slide', < direction: 'left', mode: 'show' >, 500); $(".oc1").css(< 'width' : '100%', 'margin-left' : '0px', >); >);.relative < background-color: red; height: 30px; position: relative; width: 30px; >.relative .child < left: 10px; position: absolute; top: 4px; >.oc < background: #ddd none repeat scroll 0 0; height: 300px; position: relative; width: 500px; float:left; >.oc1
So simple. Just add a second class or id to you element at load time that specifies which browser it is.
So basically at the front end, detect browser then set id/class and your css will be befined using those browser specific nametags
Chrome provides no own conditionals to set CSS definitions just for it! There shouldn’t be a need to do this, cause Chrome interprets websites like defined in w3c standards.
So, you have two meaningful possibilities:
There are definitely reasons why you would want to apply to Chrome but not e.g. Safari or Firefox, e.g. differences in how browsers render
Chrome isn’t perfect. Just like any other piece of software it has bugs including in the rendering engine, and some are not fixed after a few years. So being able to detect Chrome to counter act the effects of those bugs is important. bugs.chromium.org/p/chromium/issues/…
It’s not just CSS which needs to be Chrome-specific. Suppose you want to use Chrome’s #:~:text=. feature if available, but, otherwise, you want to use #nearestanchor ? Too bad we don’t have the old IE conditional hacks: