web-dev-qa-db-fra.com

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

Existe-t-il un moyen d'appliquer le code CSS suivant à un div uniquement dans Google Chrome?

position:relative;
top:-2px;
cssgoogle-chromecss-hack
95
user1213707

Solution CSS

à partir 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 
}
189
Martin Kristiansson

Comme nous le savons, Chrome est un navigateur Webkit , Safari est également un navigateur Webkit, ainsi qu'Opera. Il est donc très difficile de cibler Google Chrome, à l'aide de requêtes multimédia ou de piratages CSS, mais Javascript est vraiment plus efficace.

Voici le code Javascript qui ciblera Google Chrome 14 ans et plus,

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

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

WebKit pirater:

.selector:not(*:root) {}
  • Google Chrome : Toutes les versions
  • Safari : Toutes les versions
  • Opera : 14 ans et plus
  • 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 ans et plus
  • Opera : 14 ans et plus

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 inférieur à 7. - Google Chrome : 28 et avant - Safari : 7 et avant - Opera : 14 ans et plus tard

Hacks JavaScript: 1

var isChromium = !!window.chrome;
  • Google Chrome : Toutes les versions
  • Opera : 14 ans et plus
  • 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 ans et plus

Hacks JavaScript: 3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome : 14 ans et plus

Requêtes de médias: 1

@media \\0 screen {}
  • Google Chrome : 22 à 28
  • Safari : 7 ans et plus

Requêtes de médias: 2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • Google Chrome : 29 ans et plus
  • Opera : À partir de 16 ans

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

24
Hbirjand

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

Safari prend désormais en charge la fonction @supports. 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;
  }
}
12
sebilasse

This Le sélecteur de navigateur CSS peut vous aider. Regarde.

CSS Browser Selector est un très petit javascript avec une seule ligne qui habilite 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.

6
tarashish

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

Appliquez des règles CSS spécifiques à Chrome uniquement à l'aide de .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>
4
CodeGust

J'utilise un sass mixin pour les styles chrome, ceci 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; }
}
2
svnm

Je n'ai jamais rencontré un cas où je devais faire un hack css pour Chrome uniquement jusqu'à maintenant. Cependant, j'ai trouvé que cela déplaçait le contenu en dessous d'un diaporama où clair: les deux; n'a affecté rien dans Chrome (mais a bien fonctionné 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;
    }
2
Elaine

Chrome ne fournit aucune condition propre pour définir des définitions CSS uniquement pour cela! Cela ne devrait pas être nécessaire, car Chrome interprète les sites Web tels que définis dans 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 )
1
Armin

Si simple. Ajoutez simplement une seconde classe ou un identifiant à votre élément au moment du chargement qui spécifie le navigateur.

Donc, fondamentalement, au début du système, détectez le navigateur, puis définissez id/class et vos CSS seront définis à l’aide de ces étiquettes d’identification spécifiques au navigateur.

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

vérifiez this.it travail pour moi.

1
ashanrupasinghe

si vous le souhaitez, nous pouvons ajouter une classe à un 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>
1
neel upadhyay