Wie wende ich bestimmte CSS-Regeln nur auf Chrome an?

Gibt es eine Möglichkeit, das folgende CSS divnur in Google Chrome auf ein bestimmtes anzuwenden ?

position:relative;
top:-2px;

CSS-Lösung

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

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media 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-Lösung

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Wie wir wissen, ist Chrome ein Webkit- Browser, Safari ist auch ein Webkit-Browser und auch Opera. Daher ist es sehr schwierig, Google Chrome mithilfe von Medienabfragen oder CSS-Hacks zu erreichen, aber Javascript ist wirklich effektiver.

Hier ist der Javascript-Code, der auf Google Chrome 14 und höher abzielt.

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

und unten finden Sie eine Liste der verfügbaren Browser-Hacks für Google Chrome, einschließlich des von diesem Hack beeinflussten Browsers

WebKit-Hack:

.selector:not(*:root) {}

• Google Chrome : Alle Versionen
• Safari : Alle Versionen
• Oper : 14 und später
• Android : Alle Versionen

Unterstützt Hacks:

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

Google Chrome 28 und Google Chrome> 28, Opera 14 und Opera> 14

• Google Chrome : 28 und höher
• Oper : 14 und später

Property / Value Hacks:

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

Google Chrome 28 und Google Chrome <28, Opera 14 und Opera> 14 sowie Safari 7 und weniger als 7. - Google Chrome : 28 und früher - Safari : 7 und früher - Opera : 14 und höher

JavaScript-Hacks: 1

var isChromium = !!window.chrome;

• Google Chrome : Alle Versionen
• Oper : 14 und später
• Android : 4.0.4

JavaScript-Hacks: 2 {Webkit}

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

• Google Chrome : Alle Versionen
• Safari : 3 und später
• Oper : 14 und später

JavaScript-Hacks: 3

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

• Google Chrome : 14 und höher

Media Query Hacks: 1

@media \\0 screen {}

• Google Chrome : 22 bis 28
• Safari : 7 und später

Media Query Hacks: 2

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

• Google Chrome : 29 und höher
• Oper : 16 und später

Weitere Informationen finden Sie auf dieser Website

Ein Update für Chrome> 29 und Safari> 8:

Safari unterstützt jetzt auch diese @supportsFunktion. Das bedeutet, dass diese Hacks auch für Safari gültig sind.

ich würde empfehlen

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

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

Diese CSS-Browserauswahl kann Ihnen helfen. Schau mal.

CSS Browser Selector ist ein sehr kleines Javascript mit nur einer Zeile, das CSS-Selektoren unterstützt. Es gibt Ihnen die Möglichkeit, spezifischen CSS-Code für jedes Betriebssystem und jeden Browser zu schreiben.

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

Wenden Sie bestimmte CSS-Regeln nur .selector:not(*:root)mit Ihren Selektoren auf Chrome an :

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

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

Ich bin noch nie auf eine Instanz gestoßen, in der ich bis jetzt einen CSS-Hack nur für Chrome durchführen musste. Ich fand jedoch, dass dies den Inhalt unter eine Diashow verschiebt, wo klar ist: beides; hat nichts in Chrome beeinflusst (hat aber überall gut funktioniert - sogar im 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;
    }

So einfach. Fügen Sie Ihrem Element beim Laden einfach eine zweite Klasse oder ID hinzu, die angibt, um welchen Browser es sich handelt.

Erkennen Sie also im Grunde genommen am Frontend den Browser und setzen Sie dann die ID / Klasse. Ihr CSS wird mit diesen browserspezifischen Namensschildern versehen

Wenn Sie möchten, können wir einem bestimmten Brwoser eine Klasse hinzufügen, siehe [Geigenlink] [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>

Ich verwende ein Sass-Mixin für Chromstile, um Chrome 29+die Lösung von Martin Kristiansson oben auszuleihen .

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

Verwenden Sie es so:

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

Chrome bietet keine eigenen Bedingungen, um CSS-Definitionen nur dafür festzulegen! Dies sollte nicht erforderlich sein, da Chrome Websites wie in den w3c-Standards definiert interpretiert.

Sie haben also zwei sinnvolle Möglichkeiten:

1. Holen Sie sich den aktuellen Browser per Javascript ( siehe hier )
2. Holen Sie sich den aktuellen Browser per PHP / Server ( siehe hier )

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

Überprüfen Sie dies. Es funktioniert für mich.