Comment appliquer des règles CSS spécifiques à Chrome uniquement?

CSS Solution

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

Solution JavaScript

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

comme nous le savons,Chrome est un navigateur Webkit , Safari est aussi un navigateur Webkit,et aussi Opera,il est donc très difficile de cibler Google Chrome,en utilisant des requêtes médias ou des hacks CSS,mais Javascript est vraiment plus efficace.

voici le morceau de code Javascript qui ciblera Google Chrome 14 et plus tard,

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

et ci-dessous est une liste de piratages de navigateur disponibles,pour le Google chrome, y compris les influencés navigateur, par ce hack

WebKit hack:

.selector:not(*:root) {}

• Google Chrome : toutes les versions
• Safari : toutes les versions
• Opera : 14 et plus tard
• Android : toutes les versions

Prend En Charge Des Hacks:

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

Google Chrome 28,et Google Chrome > 28, Opera 14 et Opera > 14

• Google Chrome : 28 et plus tard
• Opéra : 14 et plus tard

Propriété/Valeur Hacks:

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

Google Chrome 28, et Google Chrome < 28, Opera 14 et Opera > 14, et Safari 7 et moins de 7. - Google Chrome : 28 et avant - Safari : 7 et avant - Opéra : 14 et plus tard

Piratages JavaScript: 1

var isChromium = !!window.chrome;

• Google Chrome : toutes les versions
• Opera : 14 et plus tard
• Android : 4.0.4

Piratages JavaScript: 2 {Webkit}

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

• Google Chrome : toutes les versions
• Safari : 3 et plus tard
• Opéra :14 et plus Tard

Hacks JavaScript: 3

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

• Google Chrome : 14 et plus tard

Media Query Hacks:1

@media \0 screen {}

• Google Chrome : 22 à 28
• Safari : 7 et plus tard

Media Query Hacks:2

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

• Google Chrome : 29 et plus tard
• Opéra : 16 et plus tard

Pour plus d'information s'il vous plaît visitez ce site web

une mise à jour pour chrome > 29 et Safari > 8:

Safari supporte maintenant la fonctionnalité @supports aussi. Cela signifie que ces hacks seraient également valables pour le Safari.

je recommande

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

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

Ce css navigateur sélecteur peut vous aider. Prendre un coup d'oeil.

CSS Browser Selector est un petit javascript avec une seule ligne qui habilitent les sélecteurs CSS. Il vous donne la possibilité d'écrire code CSS spécifique pour chaque système d'exploitation et chaque navigateur.

N'ont jamais couru sur une instance où j'ai dû faire un hack Chrome-seulement css jusqu'à maintenant. Cependant, j'ai trouvé ceci pour déplacer le contenu sous un diaporama où clair: les deux; affecté rien dans le Chrome (mais travaillé bien partout ailleurs - même 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;
    }

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

appliquez les règles CSS spécifiques à Chrome uniquement en utilisant .selector:not(*:root) avec vos sélecteurs:

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

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

Chrome ne fournit pas de conditions propres à définir CSS juste pour elle! Il ne devrait pas être nécessaire de le faire, car Chrome interprète les sites Web tels que définis dans les normes w3c.

donc, vous avez deux possibilités significatives:

1. en cours de navigateur en javascript ( regardez ici )
2. en cours de navigateur en php/server-side ( regardez ici )

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

vérifiez ceci.ça marche pour moi.

si vous voulez, nous pouvons ajouter la classe à brwoser spécifique Voir [lien fiddle][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>

j'utilise un mixin sass pour les styles chrome, c'est pour Chrome 29+ en empruntant la solution de Martin Kristiansson ci-dessus.

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

utilisez - le comme ceci:

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

si simple. Il suffit d'ajouter une deuxième classe ou de l'identification de l'élément au moment du chargement qui spécifie le navigateur, il est.

donc essentiellement à l'avant, détecter le navigateur, puis Définir id / class et votre css sera affiné en utilisant ces balises spécifiques de navigateur