¿Hay un hack CSS de Google Chrome solamente?

Question

¿Hay un truco CSS de Google Chrome solamente? Mire, Mozilla también lo lee correctamente. Busqué diez veces más pero no encontré nada, así que aquí estoy.

Answer 1

Claro es:

@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    #element { properties:value; } 
} 

Y un poco de violín a verlo en acción - http://jsfiddle.net/Hey7J/

hay que añadir ... aunque esto es generalmente una mala práctica, que en realidad no debería estar en el punto donde comienzas a necesitar hacks de navegador individuales para que CSS funcione. Intente usar reset style sheets al comienzo de su proyecto, para ayudar a evitar esto.

Además, estos hacks pueden no ser a prueba de futuro.

Answer 2

para trabajar sólo Chrome o Safari, probarlo:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome */ 
.myClass { 
color:red; 
} 

/* Safari only override */ 
::i-block-chrome,.myClass { 
color:blue; 
}} 

Answer 3

Se podría usar javascript. Las otras respuestas hasta la fecha parecen también dirigidas a Safari.

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 
    alert("You'll only see this in Chrome"); 
    $('#someID').css('background-position', '10px 20px'); 
} 

Answer 4

Sólo Chrome CSS Hack:

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

Answer 5

He encontrado que esto sólo funciona en Chrome (donde es de color rojo) y no Safari y otros navegadores (donde es verde) ...

.style { 
color: green; 
(-bracket-:hack; 
    color: red; 
); 
} 

de http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm

Answer 6

intenta utilizar la nueva función de '' @supports, aquí es una buena corte t sombrero que te puede gustar:

* ACTUALIZACIÓN !!! * Microsoft Edge y Safari 9 tanto Añadido soporte para la función de @supports en el otoño de 2015, Firefox también - por lo que aquí está mi versión actualizada para usted:

/* Chrome 29+ (Only) */ 

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) 
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
    .selector { color:red; } 
} 

Más información sobre este aquí (a la inversa ... Safari pero no cromo): [] is there a css hack for safari only NOT chrome?

El anterior CSS Hack [ante Edge y Safari 9 o versiones más recientes de Firefox]:

/* Chrome 28+ (now also Microsoft Edge, Firefox, and Safari 9+) */ 

@supports (-webkit-appearance:none) { .selector { color:red; } } 

Esto funcionó para (cromo solamente), versión 28 y posteriores.

(El cromo por encima de 28+ truco no era una de mis creaciones. He encontrado esto en la web y ya que era tan bueno que lo envié a BrowserHacks.com recientemente, hay otros que viene.)

agosto 17th, 2014 actualización: Como mencioné, he estado trabajando para llegar a más versiones de Chrome (y muchos otros navegadores), y aquí hay uno que diseñé que maneja Chrome 35 y versiones más nuevas.

/* Chrome 35+ */ 

_::content, _:future, .selector:not(*:root) { color:red; } 

En los comentarios a continuación fue mencionado por @BoltClock sobre el futuro, pasado, no ... etc ... Podemos, de hecho, los utilizan para ir un poco más atrás en el historial de Chrome.

Así que este es uno que también funciona, pero no 'solo Chrome', es por eso que no lo puse aquí. Aún debe separarlo mediante un hack de solo Safari para completar el proceso. He creado css hacks para hacer esto, sin embargo, no te preocupes. Aquí están algunos de ellos, empezando por la más simple:

/* Chrome 26+, Safari 6.1+ */ 

_:past, .selector:not(*:root) { color:red; } 

O por el contrario, éste que se remonta a Chrome 22 y más nuevo, pero Safari, así ...

/* Chrome 22+, Safari 6.1+ */ 

@media screen and (-webkit-min-device-pixel-ratio:0) 
and (min-resolution:.001dpcm), 
screen and(-webkit-min-device-pixel-ratio:0) 
{ 
    .selector { color:red; } 
} 

El bloque de versiones de cromo 22-28 (más complicado, pero funciona muy bien) también son posibles para apuntar a través de una combinación que funcionó:

/* Chrome 22-28 (Only!) */ 

@media screen and(-webkit-min-device-pixel-ratio:0) 
{ 
    .selector {-chrome-:only(; 

     color:red; 

    );} 
} 

Ahora sigue con este par también creé que se dirige a Safari 6.1+ (sólo) en orden para hasta separar Chrome y Safari. actualizado para incluir Safari 8

/* Safari 6.1-7.0 */ 

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) 
{ 
    .selector {(; color:blue; );} 
} 


/* Safari 7.1+ */ 

_::-webkit-full-page-media, _:future, :root .selector { color:blue; } 

Así que si se pone uno de los hacks Chrome + Safari anterior, y luego el Safari 6.1-7 y 8 cortes en sus estilos de forma secuencial, tendrá elementos de cromo en rojo, y artículos de Safari en azul.