¿Cómo aplicar reglas CSS específicas solo a Chrome?

¿Hay alguna forma de aplicar el siguiente CSS a un específico divsolo en Google Chrome?

position:relative;
top:-2px;

Solución CSS

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

Solución JavaScript

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Como sabemos, Chrome es un navegador Webkit , Safari también es un navegador Webkit y también Opera, por lo que es muy difícil apuntar a Google Chrome, utilizando consultas de medios o hacks CSS, pero Javascript es realmente más efectivo.

Aquí está el fragmento de código Javascript que se dirigirá a Google Chrome 14 y versiones posteriores,

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

y a continuación hay una lista de hacks de navegador disponibles, para Google Chrome, incluido el navegador influenciado, por ese hack

Hack de WebKit:

.selector:not(*:root) {}

• Google Chrome : todas las versiones
• Safari : todas las versiones
• Opera : 14 y posteriores
• Android : todas las versiones

Soporta Hacks:

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

Google Chrome 28 y Google Chrome> 28, Opera 14 y Opera> 14

• Google Chrome : 28 y posterior
• Opera : 14 y posteriores

Trucos de propiedad / valor:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28 y Google Chrome <28, Opera 14 y Opera> 14, y Safari 7 y menos de 7. - Google Chrome : 28 y antes - Safari : 7 y antes - Opera : 14 y posterior

Hacks de JavaScript: 1

var isChromium = !!window.chrome;

• Google Chrome : todas las versiones
• Opera : 14 y posteriores
• Android : 4.0.4

Hacks de JavaScript: 2 {Webkit}

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

• Google Chrome : todas las versiones
• Safari : 3 y posterior
• Opera : 14 y posteriores

Hacks de JavaScript: 3

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

• Google Chrome : 14 y posterior

Hacks de consulta de medios: 1

@media \\0 screen {}

• Google Chrome : 22 a 28
• Safari : 7 y posterior

Hacks de consulta de medios: 2

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

• Google Chrome : 29 y posterior
• Opera : 16 y posteriores

Para obtener más información, visite este sitio web.

Una actualización para Chrome> 29 y Safari> 8:

Safari ahora también admite la @supportsfunción. Eso significa que esos trucos también serían válidos para Safari.

yo recomendaria

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Este selector de navegador css puede ayudarte. Echar un vistazo.

CSS Browser Selector es un javascript muy pequeño con solo una línea que habilita los selectores CSS. Le brinda la capacidad de escribir código CSS específico para cada sistema operativo y cada navegador.

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

Aplique reglas CSS específicas a Chrome solo .selector:not(*:root)con sus selectores:

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

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

Nunca me he encontrado con una instancia en la que tuve que hacer un truco CSS solo para Chrome hasta ahora. Sin embargo, encontré que esto movía el contenido debajo de una presentación de diapositivas donde estaba claro: ambos; no afectó nada en Chrome (pero funcionó bien en cualquier otro lugar, ¡incluso en 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 lo desea, podemos agregar una clase a un brwoser específico, ver [enlace de violín] [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>

Estoy usando un mixin sass para estilos cromados, esto es para Chrome 29+tomar prestada la solución de Martin Kristiansson anterior.

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

Úselo así:

@include chrome-styles {
  .header { display: none; }
}

Chrome no proporciona condiciones propias para establecer definiciones CSS solo para él. No debería ser necesario hacer esto, porque Chrome interpreta los sitios web como se define en los estándares w3c.

Entonces, tienes dos posibilidades significativas:

1. Obtenga el navegador actual mediante javascript ( busque aquí )
2. Obtenga el navegador actual por php / serveride ( busque aquí )

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

mira esto funciona para mí.

Tan sencillo. Simplemente agregue una segunda clase o identificación a su elemento en el momento de la carga que especifique qué navegador es.

Básicamente, en la interfaz, detecte el navegador, luego configure id / class y su css se definirá utilizando esas etiquetas de nombre específicas del navegador