How to apply specific CSS rules to Chrome only?

Question

Is there a way to apply the following CSS to a specific div only in Google Chrome?

position:relative;
top:-2px;

possible duplicate of [How to do a Chrome/Opera specific stylesheet?](http://stackoverflow.com/questions/945428/how-to-do-a-chrome-opera-specific-stylesheet) — Jakub, Feb 17 '12 at 13:12
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, Feb 17 '12 at 13:12
@Pekka this is my issue http://stackoverflow.com/questions/9311965/break-between-2-elements-is-leaving-gap-in-chrome , and i found that the only solution is to add those but only for chrome, please help :( — user1213707, Feb 17 '12 at 13:14
Personally I develop for Chrome (which tends to copy over to Firefox) and worry about IE at the end. — SpaceBeers, Feb 17 '12 at 13:27
check this link an find the correct answer http://stackoverflow.com/questions/945428/how-to-do-a-chrome-opera-specific-stylesheet — ashanrupasinghe, Sep 09 '16 at 10:21

score 201 · Answer 1 · edited Mar 18 '21 at 14:00

201

CSS Solution

from https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* 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 
}

edited Mar 18 '21 at 14:00

Community

1
1

answered Nov 27 '12 at 15:23

Martin Kristiansson

2,080
1
11
5

17

This rule will apply both safari and chrome – Miuranga Jun 28 '13 at 15:38
1

@AlirezaNoori probably because it applies to both Chrome *and* Safari, not *only* Chrome. – thom_nic Jun 10 '14 at 15:19
1

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 ... – sebilasse Feb 12 '16 at 10:17
2

It's also works in IE Edge, check this https://jeffclayton.wordpress.com/2015/08/10/1279/ – llamerr Mar 25 '16 at 09:57
1

I used `data-ng-class` for angular and added a `.chrome` class with the JS expression. Worked like a charm. Thanks – Kraken Aug 24 '16 at 13:20
1

I found it helped to have the media queries at the bottom. – Brownrice Sep 28 '16 at 18:05
1

The JavaScript check matches in edge as well (In addition to @llamerr's comment that the CSS also matches in Edge) – Johnny Hoffman Mar 23 '18 at 17:55

score 29 · Answer 2 · answered Aug 26 '14 at 01:30

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:

.selector:not(*:root) {}

Google Chrome:All the versions
Safari:All the versions
Opera :14 and Later
Android:All the versions

Supports Hacks:

@supports (-webkit-appearance:none) {}

Google Chrome 28,and Google Chrome > 28, Opera 14 and Opera > 14

Google Chrome:28 and Later
Opera :14 and Later

Property/Value Hacks:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28,and Google Chrome < 28, Opera 14 and Opera > 14,and Safari 7 and Less than 7. - Google Chrome:28 and Before - Safari:7 and Before - Opera :14 and Later

JavaScript Hacks:1

var isChromium = !!window.chrome;

Google Chrome:All the versions
Opera :14 and Later
Android:4.0.4

JavaScript Hacks:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

Google Chrome:All the versions
Safari:3 and Later
Opera :14 and Later

JavaScript Hacks:3

var isChrome = !!window.chrome && !!window.chrome.webstore;

Google Chrome:14 and Later

Media Query Hacks:1

@media \\0 screen {}

Google Chrome:22 to 28
Safari:7 and Later

Media Query Hacks:2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

Google Chrome:29 and Later
Opera:16 and Later

For more information please visit this website

as Sebastian said @supports (-webkit-appearance:none) {} affects Safari, tested on v.10 — Dmitrii Malyshev, Oct 21 '16 at 14:31
`@supports (-webkit-appearance:none) { }` is now working for MS Edge. — Vadim Ovchinnikov, Aug 04 '17 at 07:32
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} } now affects Firefox too — Joe Salazar, Jan 27 '20 at 12:39

score 13 · Answer 3 · answered Feb 12 '16 at 11:02

13

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.

I would recommend

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

answered Feb 12 '16 at 11:02

sebilasse

3,202
2
30
30

6

The text is also red in FireFox for me. – Kerry7777 Jun 19 '19 at 01:13

score 9 · Answer 4 · answered Feb 17 '12 at 13:36

9

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.

answered Feb 17 '12 at 13:36

tarashish

1,865
20
30

The declaration "css browser selector" is a bit confusing for a simple javascript. CSS itself doesn't support any selections by browsers! – Armin Feb 17 '12 at 13:39
Sorry but that is what its creator has called it. I have just quoted him :( – tarashish Feb 17 '12 at 13:46
Very lurid phrase of the author ;-) – Armin Feb 17 '12 at 13:49
1

ye, don't really want to add a whole load of js just for this :( but otherwise could be helpful. – Jamie Hutber Jun 17 '12 at 13:49
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. – Patanjali Feb 04 '20 at 04:05

score 8 · Answer 5 · answered Nov 04 '16 at 08:12

8

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

Apply specific CSS rules to Chrome only by using .selector:not(*:root) with your selectors:

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

answered Nov 04 '16 at 08:12

CodeGust

758
2
14
32

2

This hack worked for me. The solutions that relied on screen resolution affected Firefox as well. – Steve Breese Dec 09 '19 at 19:37
@stevebreese Noticed it to, I suspect it's for modern browsers only. – Shasha Jun 29 '20 at 18:55
This solution is not working for me. But I love the color forestgreen. – Jesse Ivy May 13 '21 at 18:09

score 3 · Answer 6 · answered May 05 '15 at 19:55

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 {
     margin-top:0px;
    }

score 1 · Answer 7 · answered Oct 25 '16 at 15:00

1

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

answered Oct 25 '16 at 15:00

yan bellavance

4,344
19
56
87

score 1 · Answer 8 · answered Mar 27 '17 at 11:38

if you want we can add class to specific brwoser see [fiddle link][1] [1]:

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: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    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 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
  ○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>

score 1 · Answer 9 · answered Jun 01 '17 at 23:26

1

I am using a sass mixin for chrome styles, this is for Chrome 29+ borrowing the solution from Martin Kristiansson above.

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

Use it like this:

@include chrome-styles {
  .header { display: none; }
}

answered Jun 01 '17 at 23:26

svnm

17,405
18
82
100

6

Firefox now reads this rule as well, so it's no longer good if you want to target solely Chrome. – Mahn Aug 03 '19 at 15:38
my exact problem @Mahn, surprised there's no solution in this thread for this... – RedactedProfile Dec 05 '20 at 03:23

ashanrupasinghe · Answer 10 · 2016-09-10T17:15:14.307

0

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

check this.it work for me.

edited Sep 10 '16 at 17:15

answered Sep 10 '16 at 17:09

ashanrupasinghe

998
1
9
21

score 0 · Answer 11 · edited May 23 '17 at 11:47

0

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:

Get current browser by javascript (look here)
Get current browser by php/serverside (look here)

edited May 23 '17 at 11:47

Community

1
1

answered Feb 17 '12 at 13:38

Armin

13,674
9
43
60

3

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 – thom_nic Jun 10 '14 at 15:22
2

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. https://bugs.chromium.org/p/chromium/issues/list?num=100&start=60000 – Joe Salazar Jan 27 '20 at 12:58
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: – Dave Burton Sep 20 '20 at 14:05