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

102

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

position:relative;
top:-2px;
user1213707
quelle
1
Vor welchem ​​Problem stehen Sie, das Sie dazu zwingt? Das Targeting von CSS-Regeln für bestimmte Browser ist kein großartiges Design und sollte heutzutage in den meisten Fällen nicht mehr erforderlich sein.
Pekka
@ Pekka das ist mein Problem stackoverflow.com/questions/9311965/… , und ich fand, dass die einzige Lösung darin besteht, diese hinzuzufügen, aber nur für Chrom, bitte helfen Sie :(
user1213707
Hat die Antwort in Ihrer ursprünglichen Frage nicht geholfen?
Pekka
2
Persönlich entwickle ich für Chrome (das dazu neigt, nach Firefox zu kopieren) und mache mir am Ende Sorgen um den Internet Explorer.
SpaceBeers

Antworten:

196

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 
}
Martin Kristiansson
quelle
16
Diese Regel gilt sowohl für Safari als auch für Chrom
Miuranga
1
@AlirezaNoori wahrscheinlich, weil es sowohl für Chrome als auch für Safari gilt, nicht nur für Chrome.
thom_nic
2
Es funktioniert auch in IE Edge, überprüfen Sie diese jeffclayton.wordpress.com/2015/08/10/1279
llamerr
1
Ich habe data-ng-classfür Angular verwendet und eine .chromeKlasse mit dem JS-Ausdruck hinzugefügt . Lief wie am Schnürchen. Danke
Kraken
1
Ich fand es hilfreich, die Medienabfragen unten zu haben.
Brownrice
27

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

Hbirjand
quelle
wie Sebastian sagte @supports (-webkit-Erscheinung: keine) {} beeinflusst Safari, getestet auf v.10
Dmitrii Malyshev
1
@supports (-webkit-appearance:none) { }arbeitet jetzt für MS Edge.
Vadim Ovchinnikov
@media all und (-webkit-min-device-pixel-ratio: 0) und (min-auflösung: .001dpcm) {.selector {}} wirken sich jetzt auch auf Firefox aus
Joe Salazar
13

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;
  }
}
Sebilasse
quelle
4
Der Text ist für mich auch in FireFox rot.
Kerry7777
9

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.

Tarashish
quelle
Die Deklaration "CSS Browser Selector" ist für ein einfaches Javascript etwas verwirrend. CSS selbst unterstützt keine Auswahl durch Browser!
Armin
Sorry, aber so hat es sein Schöpfer genannt. Ich habe ihn gerade zitiert :(
Tarashish
Sehr greller Satz des Autors ;-)
Armin
1
ye, möchte nicht wirklich eine ganze Ladung js nur dafür hinzufügen :( aber sonst könnte hilfreich sein.
Jamie Hutber
Das Hauptproblem besteht darin, dass es zu einem fragilen Single Point of Failure wird, da es davon abhängt, dass ein einzelner Programmierer dediziert ist, und dass man seine Änderungen weiter verfolgen muss, um auf dem neuesten Stand zu bleiben. Grundsätzlich ein zweifelhafter Weg, um mit einem laufenden Problem umzugehen, da es zwar kurzfristig helfen kann, das Problem aber nicht löst.
Patanjali
7

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>

CodeGust
quelle
2
Dieser Hack hat bei mir funktioniert. Die Lösungen, die sich auf die Bildschirmauflösung stützten, wirkten sich auch auf Firefox aus.
Steve Breese
@stevebreese Ich habe es bemerkt, ich vermute, es ist nur für moderne Browser.
Shasha
3

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;
    }
Elaine
quelle
1

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

Yan Bellavance
quelle
1

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>

neel upadhyay
quelle
1

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; }
}
svnm
quelle
5
Firefox liest jetzt auch diese Regel, sodass es nicht mehr gut ist, wenn Sie ausschließlich auf Chrome abzielen möchten.
Mahn
0

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 )
Armin
quelle
2
Es gibt definitiv Gründe, warum Sie sich für Chrome bewerben möchten, aber nicht zB Safari oder Firefox, z. B. Unterschiede in der Darstellung von <select> -Elementen durch Browser. Eine reine CSS-Lösung wäre viel sauberer als die Verwendung von server- oder clientseitigem Code.
thom_nic
1
Chrome ist nicht perfekt. Wie bei jeder anderen Software gibt es auch in der Rendering-Engine Fehler, und einige sind nach einigen Jahren nicht mehr behoben. Es ist daher wichtig, Chrome erkennen zu können, um den Auswirkungen dieser Fehler entgegenzuwirken. bugs.chromium.org/p/chromium/issues/…
Joe Salazar
0
/* 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.

ashanrupasinghe
quelle