Como aplicar regras CSS específicas apenas ao Chrome?

Existe uma maneira de aplicar o seguinte CSS a um div específico apenas no Google Chrome?

 position:relative; top:-2px; 

Solução 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; );} } 

Solução JavaScript

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

Como sabemos, o Chrome é um navegador Webkit , o Safari é um navegador Webkit e também o Opera, por isso é muito difícil direcionar o Google Chrome, usando consultas de mídia ou hacks de CSS, mas o JavaScript é realmente mais eficaz.

Aqui está a parte do código Javascript que segmentará o Google Chrome 14 e posterior,

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

e abaixo está uma lista de hacks disponíveis no navegador, para o Google Chrome, incluindo o navegador influenciado, por esse hack

WebKit hack:

 .selector:not(*:root) {} 
  • Google Chrome : todas as versões
  • Safari : todas as versões
  • Ópera : 14 e mais tarde
  • Android : todas as versões

Suporta Hacks:

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

Google Chrome 28 e Google Chrome> 28, Opera 14 e Opera> 14

  • Google Chrome : 28 e mais tarde
  • Ópera : 14 e mais tarde

Hacks de propriedade / valor:

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

Google Chrome 28, e Google Chrome <28, Opera 14 e Opera> 14, e Safari 7 e Menos de 7. – Google Chrome : 28 e AntesSafari : 7 e AntesOpera : 14 e posterior

Hacks de JavaScript: 1

 var isChromium = !!window.chrome; 
  • Google Chrome : todas as versões
  • Ópera : 14 e mais tarde
  • Android : 4.0.4

Hacks JavaScript: 2 {Webkit}

 var isWebkit = 'WebkitAppearance' in document.documentElement.style; 
  • Google Chrome : todas as versões
  • Safari : 3 e mais tarde
  • Ópera : 14 e mais tarde

Hacks de JavaScript: 3

 var isChrome = !!window.chrome && !!window.chrome.webstore; 
  • Google Chrome : 14 e mais tarde

Hacks de Consulta de Mídia: 1

 @media \\0 screen {} 
  • Google Chrome : 22 a 28
  • Safari : 7 e mais tarde

Hacks de Consulta de Mídia: 2

 @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} } 
  • Google Chrome : 29 e mais tarde
  • Ópera : 16 e mais tarde

Para mais informações, visite este site

Uma atualização para o chrome> 29 e o Safari> 8:

O Safari agora também suporta o recurso @supports . Isso significa que esses hacks também seriam válidos para o Safari.

eu 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 seletor de navegador CSS pode ajudá-lo. Dê uma olhada.

CSS Browser Selector é um pequeno javascript com apenas uma linha que capacita seletores CSS. Ele oferece a capacidade de escrever códigos CSS específicos para cada sistema operacional e cada navegador.

Nunca passei por uma instância em que precisei fazer apenas uma invasão de CSS do Chrome até agora. No entanto, achei isso para mover conteúdo abaixo de uma apresentação de slides, onde claro: ambos; não afetou nada no Chrome (mas funcionou bem em qualquer outro lugar – até mesmo o 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; } 

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

Aplique regras CSS específicas ao Chrome usando apenas .selector:not(*:root) com seus seletores:

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

O Chrome não fornece condicionais próprios para definir as definições CSS apenas para isso! Não deve haver necessidade de fazer isso, porque o Chrome interpreta sites como definidos nos padrões da w3c.

Então, você tem duas possibilidades significativas:

  1. Obtenha o navegador atual por javascript ( veja aqui )
  2. Obtenha o navegador atual por php / serverside ( veja aqui )
 /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { /*your rules for chrome*/ #divid{ position:relative; top:-2px; } } 

confira this.it trabalho para mim.

se você quiser, podemos adicionar a class para brwoser específico ver [fiddle link] [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; } 
   

Eu estou usando um sass mixin para estilos cromados, isto é para o Chrome 29+ emprestando a solução de Martin Kristiansson acima.

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

Use assim:

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

Tão simples. Basta adicionar um segundo elemento class ou id to you no momento do carregamento que especifica qual navegador é.

Então, basicamente, no front-end, detecta o navegador, em seguida, defina id / class e seu css será definido usando as tags de nome específicas do navegador