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

Solution CSS

de https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media screen 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 
}

Answer 2

Comme nous le savons, Chrome est un Webkit Safari est également un navigateur Webkit, de même qu'Opera. Il est donc très difficile de cibler Google Chrome en utilisant des requêtes média ou des bidouillages CSS, mais Javascript est vraiment plus efficace.

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

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

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

WebKit hack :

.selector:not(*:root) {}

• Google Chrome : Toutes les versions
• Safari : Toutes les versions
• Opéra 14 ans et plus
• Android : Toutes les versions

Supports Hacks :

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

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

• Google Chrome : 28 ans et plus
• Opéra 14 ans et plus
• Firefox : 64 ans et plus (c'est-à-dire que cela ne fonctionne plus)

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
• Opéra 14 ans et plus

JavaScript Hacks:1

var isChromium = !!window.chrome;

• Google Chrome : Toutes les versions
• Opéra 14 ans et plus
• Android : 4.0.4

JavaScript Hacks:2 {Webkit}

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

• Google Chrome : Toutes les versions
• Safari : 3 et plus
• Opéra 14 ans et plus

JavaScript Hacks:3

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

• Google Chrome : 14 ans et plus

Hacks de recherche de médias:1

@media \\0 screen {}

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

Astuces pour les requêtes média:2

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

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

Pour plus d'informations, veuillez consulter le site ce site web

Answer 3

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

Safari prend désormais en charge l'option @supports également. Cela signifie que ces hacks sont également valables pour 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;
  }
}

Answer 4

Ce site Le sélecteur de navigateur css peut vous aider. Jetez-y un coup d'œil.

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

Answer 5

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) avec vos sélecteurs :

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

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