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

Question

Existe-t-il un moyen d'appliquer la feuille de style en cascade (CSS) suivante à un élément spécifique de l'image ? div uniquement dans Google Chrome ?

position:relative;
top:-2px;

Answer 1

La réponse acceptée correspond également à Firefox 80+.

Pour cibler l'ensemble des navigateurs Webkit (Edge 79+, Chrome, Safari), trouvez une -webkit extension CSS spécifique qui n'est pas pris en charge par Firefox (utilisez https://caniuse.com ). Il s'agit d'une cible mouvante ; l'un des navigateurs Webkit peut la supprimer, et un navigateur non Webkit peut ajouter sa prise en charge.

Voici deux exemples :

@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 */
}

Si vous avez réellement besoin de Chrome uniquement, JS est probablement la seule solution.

El .selector:not(*:root) {} pirater https://stackoverflow.com/a/25496712/1218408 exclut toujours Firefox jusqu'à la version 92 mais correspond à Safari.

Answer 2

Jusqu'à présent, je n'avais jamais rencontré de cas où je devais faire un hack css uniquement pour Chrome. Cependant, j'ai trouvé ceci pour déplacer le contenu sous un diaporama où clear:both ; n'affectait rien dans Chrome (mais fonctionnait bien partout ailleurs - même dans 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 3

Si vous le souhaitez, nous pouvons ajouter une classe à un brwoser spécifique, voir [fiddle link][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>

Answer 4

C'est si simple. Il suffit d'ajouter une seconde classe ou un identifiant à votre élément au moment du chargement, qui spécifie de quel navigateur il s'agit.

En gros, au niveau de l'interface, il faut détecter le navigateur, puis définir l'id/class et votre css sera défini à l'aide de ces balises spécifiques au navigateur.

Answer 5

Chrome ne fournit pas de conditionnelles propres pour définir les définitions CSS juste pour cela ! Il ne devrait pas être nécessaire de le faire, car Chrome interprète les sites Web comme le définissent les normes W3C.

Donc, vous avez deux possibilités significatives :

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