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

102

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

position:relative;
top:-2px;
usuario1213707
fuente
1
¿Qué problema está enfrentando que lo obliga a hacer esto? Dirigirse a las reglas de CSS para navegadores específicos no es un gran diseño y, en la mayoría de los casos, ya no debería ser necesario hoy en día.
Pekka
@Pekka, este es mi problema stackoverflow.com/questions/9311965/… , y descubrí que la única solución es agregarlos, pero solo para Chrome, por favor ayuda :(
user1213707
¿No ayudó la respuesta de su pregunta original?
Pekka
2
Personalmente desarrollo para Chrome (que tiende a copiar a Firefox) y me preocupo por IE al final.
SpaceBeers

Respuestas:

196

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 
}
Martin Kristiansson
fuente
16
Esta regla se aplicará tanto a Safari como a Chrome
Miuranga
1
@AlirezaNoori probablemente porque se aplica tanto a Chrome como a Safari, no solo a Chrome.
thom_nic
2
También funciona en IE Edge, consulte este jeffclayton.wordpress.com/2015/08/10/1279
llamerr
1
Usé data-ng-classpara angular y agregué una .chromeclase con la expresión JS. Trabajado como un encanto. Gracias
Kraken
1
Descubrí que me ayudó tener las consultas de medios en la parte inferior.
Brownrice
27

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.

Hbirjand
fuente
como dijo Sebastian @supports (-webkit-apariencia: ninguno) {} afecta a Safari, probado en la versión 10
Dmitrii Malyshev
1
@supports (-webkit-appearance:none) { }ahora está trabajando para MS Edge.
Vadim Ovchinnikov
@media all y (-webkit-min-device-pixel-ratio: 0) y (min-resolution: .001dpcm) {.selector {}} ahora también afecta a Firefox
Joe Salazar
13

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;
  }
}
sebilasse
fuente
4
El texto también es rojo en FireFox para mí.
Kerry7777
9

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.

tarashish
fuente
La declaración "selector de navegador css" es un poco confusa para un javascript simple. ¡CSS en sí no admite ninguna selección por parte de los navegadores!
Armin
Lo siento pero así lo ha llamado su creador. Lo acabo de citar :(
tarashish
Frase muy espeluznante del autor ;-)
Armin
1
sí, realmente no quiero agregar una gran cantidad de js solo para esto :( pero de lo contrario podría ser útil.
Jamie Hutber
El principal problema es que se convierte en un frágil punto único de falla, ya que depende de que un solo programador esté dedicado, y que uno necesitaría seguir rastreando sus cambios para mantenerse actualizado. Básicamente, una forma dudosa de lidiar con un problema continuo, ya que si bien puede ayudar a corto plazo, no resuelve el problema.
Patanjali
7

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>

CodeGust
fuente
2
Este truco funcionó para mí. Las soluciones que dependían de la resolución de la pantalla también afectaron a Firefox.
Steve Breese
@stevebreese Lo noté, sospecho que es solo para navegadores modernos.
Shasha
3

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;
    }
Elaine
fuente
1

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>

neel upadhyay
fuente
1

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; }
}
svnm
fuente
5
Firefox ahora también lee esta regla, por lo que ya no es bueno si desea apuntar únicamente a Chrome.
Mahn
0

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í )
Armin
fuente
2
Definitivamente hay razones por las que querría aplicar a Chrome pero no, por ejemplo, Safari o Firefox, por ejemplo, diferencias en cómo los navegadores representan los elementos <select>. Una solución de solo CSS sería mucho más limpia que tener que involucrar código del lado del servidor o del cliente.
thom_nic
1
Chrome no es perfecto. Al igual que cualquier otra pieza de software, tiene errores incluidos en el motor de renderizado, y algunos no se solucionan después de unos años. Por lo tanto, es importante poder detectar Chrome para contrarrestar los efectos de esos errores. 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; 
     }
}

mira esto funciona para mí.

ashanrupasinghe
fuente
0

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

yan bellavance
fuente