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

Existe-t-il un moyen d'appliquer le CSS suivant à un spécifique divuniquement dans Google Chrome?

position:relative;
top:-2px;

Solution CSS

sur 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 également un navigateur Webkit, ainsi que Opera, il est donc très difficile de cibler Google Chrome, en utilisant des requêtes multimédias ou des hacks CSS, mais Javascript est vraiment plus efficace.

Voici le morceau de code Javascript qui ciblera Google Chrome 14 et versions ultérieures,

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

et ci-dessous est une liste des hacks de navigateur disponibles, pour le Google Chrome, y compris le navigateur influencé, par ce hack

Piratage WebKit:

.selector:not(*:root) {}

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

Prend en charge Hacks:

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

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

• Google Chrome : 28 et versions ultérieures
• Opera : 14 et plus tard

Hacks de propriété / valeur:

.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 - Opera : 14 et plus tard

Hacks JavaScript: 1

var isChromium = !!window.chrome;

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

Hacks JavaScript: 2 {Webkit}

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

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

Hacks JavaScript: 3

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

• Google Chrome : 14 et versions ultérieures

Hacks de requête multimédia: 1

@media \\0 screen {}

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

Hacks de requête multimédia: 2

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

• Google Chrome : 29 et versions ultérieures
• Opera : 16 et plus tard

Pour plus d'informations, veuillez visiter ce site Web

Une mise à jour pour Chrome> 29 et Safari> 8:

Safari prend désormais également en charge la @supportsfonctionnalité. Cela signifie que ces hacks seraient également valables pour Safari.

je recommanderais

@ 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 sélecteur de navigateur css peut vous aider. Regarde.

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

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

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

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

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

Je n'ai jamais rencontré d'instance où je devais faire un hack css uniquement Chrome jusqu'à présent. Cependant, j'ai trouvé cela pour déplacer le contenu sous un diaporama où il était clair: les deux; n'a rien affecté dans Chrome (mais a bien fonctionné 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;
    }

si vous le souhaitez, nous pouvons ajouter une classe à un navigateur spécifique, voir [lien violon] [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 chromés, c'est pour Chrome 29+emprunter 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; }
}

Chrome ne fournit pas de conditions propres pour définir des définitions CSS juste pour cela! Cela ne devrait pas être nécessaire, car Chrome interprète les sites Web comme défini dans les normes w3c.

Donc, vous avez deux possibilités significatives:

1. Obtenez le navigateur actuel par javascript ( regardez ici )
2. Obtenez le navigateur actuel par php / serverside ( regardez ici )

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

vérifier this.it fonctionne pour moi.

Si simple. Ajoutez simplement une deuxième classe ou un identifiant à votre élément au moment du chargement qui spécifie de quel navigateur il s'agit.

Donc, fondamentalement, à l'avant, détectez le navigateur puis définissez l'id / la classe et votre css sera défini à l'aide de ces étiquettes de nom spécifiques au navigateur.