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;

Answer 1

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 
}

Answer 2

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
• Firefox: 64 and Later (i.e. this no longer works)

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

Answer 3

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;
  }
}

Answer 4

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.

Answer 5

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>

Answer 6

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.

Here are two examples:

@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.

Answer 7

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;
    }

Answer 8

If you want, we can add a class to a specific browser.

Example:

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>

Answer 9

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

Answer 10

How to Apply CSS to Only Chrome

You might try the code below if you want to apply CSS to only Chrome browsers (Webkit/Blink). Keep in mind there are other browsers that use Chrome's Webkit engine...

@supports (not (-moz-appearance:button)) and (contain:paint) and (-webkit-appearance:none) {

  body {
    background: blue;
  }

}

In 2022, this code works pretty well and should work in most Chrome browsers going back to ~ 2013. It should filter out all Internet Explorer, early Trident Edge, Firefox, Safari, and many other browsers. But please test!

Keep in mind Microsoft Edge version 83 and later switched from the old Trident engine to Chrome's Blink browser engine in May of 2020. So, this should work in the newer Edge browsers, as well. Expect that to function that way as the engines under the covers are close to the same!

NOTES ON THIS CSS

As mentioned, the code above works in all browsers that share some modern version of the Chrome Webkit or Blink engines. The two main deciding factors in the code above as far as earliest possible browser support in Chrome-based engines would be support of the CSS feature at-rule @supports and the newer Chrome prefixed property -webkit-appearance:none. Combined, full support for both in Chrome did not begin till May, of 2013 (I believe). So you can count on Chrome browsers version 28 through today would or should support this CSS hack above. But again, please test!

So let's go through how the hack works.....

Use of the new @supports at-rule or 'feature check' allows your browser to check if a specific CSS property or feature, and its value, is supported in the user's browser. The problem is very few older and even newer browsers support the @supports CSS trick. It really did not get support in Chrome till around the May 2013 browser release. So that would be the earliest Chrome browsers supported. Keep in mind Chrome was not released till 2008, so was a late browser.

But browser non-support of @supports is the main way this CSS is hidden from nearly all other browsers since adoption is still so poor. All browsers prior to 2010 and most prior to 2013 will ignore the rule above. But Chrome version 27 till today would have baseline support of the rule. Microsoft Internet Explorer 1-11 completely ignore it, and only Microsoft Edge version 83 to present (2020-present) would understand the @supports rule. Firefox did not adopt it till 2019 and most Safari user agents starting in 2021. So it is a major filtering tool!

The generic "appearance" CSS property (non-prefixed version) was supported in Mozilla/Firefox as early as 2006 and in Chrome around 2010 in prefixed experimental version with partial support for various features. The Firefox prefix version -moz-appearance and the Chrome browser prefixed version -webkit-appearance seem to have early adoption so would find support across a wide range of browsers. The value "button" (pre-2006) has earlier adoption in Mozilla/Firefox browsers than "none" for "apperance", so increases the chance you filter out those browsers. "none" for "appearance" in Chrome was a very early supported property value (2010), so was used to widen the range of Chrome browsers possible. So the two prefix rules both remove the most mozilla/Firefox browsers and widen the most Chrome browsers possible in the code above.

So you can probably assume Chrome browsers starting in 2013-present would be able to use the rules below, and seen by all browsers using Webkit engines since then.

The logic (not (-moz-appearance:none)) hides the CSS block from all Mozilla/Firefox browsers. When combined with limited support for "@support" however, it makes sure even earlier ones are all excluded.

The CSS property contain:paint was mainly supported after 2016 in Chrome and Firefox. So this excludes Safari browsers from the CSS block. Some Safari iOS switched to the Webkit Chrome engine, however. So contain:paint makes sure those older Safari browsers are excluded from the Chrome Webkit filter.

Lastly, the Chrome prefixed rule, -webkit-appearance, applies only to Chrome Webkit browsers. It makes sure the rule below is only seen by Chrome. Keep in mind some later Firefox browsers started to support Chrome prefix properties. But with the extra filters above, they are now hidden from the CSS block above. As mentioned above, -webkit-appearance:none has wide enough adoption that it should at least go back to the earliest adoption date of @support at-rules in the web browser. As far as I know that is sometime around May of 2013.

So in summary, the CSS above filters allows only Chrome browsers going back to version 27 in 2013 and Microsoft Edge 83 in 2020 to see the code.

WHY DO WE EVEN NEED TO APPLY CSS FOR CHROME?

HTML5 and CSS standards have changed since 2010. There are no more W3C Recommendations where carefully agreed on standards are applied by all browsers. This means browser vendors are randomly changing their browsers continually (called Evergreen) as far as CSS support. It also means CSS will change on-the-fly, code forks will rarely be aligned, CSS in all the other browsers will rarely match each other, and "hacks" above could change as well.

This failed Web Standards movement forms the basis for why new CSS has partial support between browsers and versions, browsers will increasingly not look the same, and these prefixed CSS hacks will be needed in the future. Not good :(

Answer 11

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; }
}

Answer 12

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:

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

Answer 13

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