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


102

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

position:relative;
top:-2px;


1
Quel problème rencontrez-vous qui vous oblige à faire cela? Cibler les règles CSS pour des navigateurs spécifiques n'est pas une excellente conception et dans la plupart des cas, cela ne devrait plus être nécessaire de nos jours.
Pekka

@Pekka c'est mon problème stackoverflow.com/questions/9311965/… , et j'ai trouvé que la seule solution est de les ajouter mais uniquement pour le chrome, veuillez aider :(
user1213707

La réponse à votre question initiale n'a-t-elle pas aidé?
Pekka

2
Personnellement, je développe pour Chrome (qui a tendance à copier sur Firefox) et je m'inquiète pour IE à la fin.
SpaceBeers

Réponses:


196

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 
}

16
Cette règle s'appliquera à la fois safari et chrome
Miuranga

1
@AlirezaNoori probablement parce qu'il s'applique à la fois à Chrome et à Safari, pas seulement à Chrome.
thom_nic

2
Cela fonctionne également dans IE Edge, vérifiez ce jeffclayton.wordpress.com/2015/08/10/1279
llamerr

1
J'ai utilisé data-ng-classpour angular et ajouté une .chromeclasse avec l'expression JS. A fonctionné comme un charme. Merci
Kraken

1
J'ai trouvé qu'il était utile d'avoir les requêtes des médias en bas.
Brownrice le

27

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


comme Sebastian l'a dit @supports (-webkit-looks: none) {} affecte Safari, testé sur la v.10
Dmitrii Malyshev

1
@supports (-webkit-appearance:none) { }travaille maintenant pour MS Edge.
Vadim Ovchinnikov

@media all et (-webkit-min-device-pixel-ratio: 0) et (min-resolution: .001dpcm) {.selector {}} affectent désormais Firefox aussi
Joe Salazar

13

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

4
Le texte est également rouge dans FireFox pour moi.
Kerry7777

9

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.


La déclaration "css browser selector" est un peu déroutante pour un simple javascript. CSS lui-même ne prend en charge aucune sélection par les navigateurs!
Armin

Désolé mais c'est ainsi que son créateur l'a appelé. Je viens de le citer :(
tarashish

Phrase très luride de l'auteur ;-)
Armin

1
vous, ne voulez pas vraiment ajouter une charge entière de js juste pour cela: (mais sinon, cela pourrait être utile.
Jamie Hutber

Le problème principal est qu'il devient un point de défaillance unique fragile car il dépend d'un seul programmeur dédié, et qu'il faudrait continuer à suivre leurs modifications pour rester à jour. Fondamentalement, une façon douteuse de traiter un problème en cours, car si cela peut aider à court terme, cela ne résout pas le problème.
Patanjali le

7

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>


2
Ce hack a fonctionné pour moi. Les solutions basées sur la résolution d'écran ont également affecté Firefox.
Steve Breese

@stevebreese l'a remarqué, je suppose que c'est uniquement pour les navigateurs modernes.
Shasha le

3

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

1

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>


1

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

5
Firefox lit maintenant cette règle également, donc ce n'est plus bon si vous voulez cibler uniquement Chrome.
Mahn

0

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 )

2
Il y a certainement des raisons pour lesquelles vous voudriez appliquer à Chrome mais pas par exemple Safari ou Firefox, par exemple des différences dans la façon dont les navigateurs rendent les éléments <select>. Une solution uniquement CSS serait beaucoup plus propre que d'avoir à impliquer du code côté serveur ou client.
thom_nic

1
Chrome n'est pas parfait. Comme tout autre logiciel, il présente des bogues, y compris dans le moteur de rendu, et certains ne sont pas corrigés après quelques années. Il est donc important de pouvoir détecter Chrome pour contrer les effets de ces bogues. 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; 
     }
}

vérifier this.it fonctionne pour moi.


0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.