Como aplicar regras CSS específicas apenas ao Chrome?


102

Existe uma maneira de aplicar o CSS a seguir a um específico divapenas no Google Chrome?

position:relative;
top:-2px;


1
Que problema você está enfrentando que o força a fazer isso? Segmentar regras CSS para navegadores específicos não é um ótimo design e, na maioria dos casos, não deve ser mais necessário hoje em dia.
Pekka

@Pekka, este é o meu problema stackoverflow.com/questions/9311965/… , e descobri que a única solução é adicioná-los, mas apenas para o Chrome, ajude :(
usuário1213707

A resposta da sua pergunta original não ajudou?
Pekka

2
Pessoalmente, eu desenvolvo para o Chrome (que tende a copiar para o Firefox) e me preocupo com o IE no final.
SpaceBeers de

Respostas:


196

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 
}

16
Esta regra se aplicará tanto safari quanto chrome
Miuranga

1
@AlirezaNoori provavelmente porque se aplica tanto ao Chrome quanto ao Safari, não apenas ao Chrome.
thom_nic

2
Também funciona no IE Edge, verifique este jeffclayton.wordpress.com/2015/08/10/1279
llamerr

1
Usei data-ng-classpara angular e adicionei uma .chromeclasse com a expressão JS. Funcionou como um encanto. Obrigado
Kraken

1
Achei que ajudou ter as consultas da mídia na parte inferior.
Brownrice

27

Como sabemos, o Chrome é um navegador Webkit , o Safari também é um navegador Webkit, e também o Opera, então é muito difícil atingir o Google Chrome, usando consultas de mídia ou hacks CSS, mas Javascript é realmente mais eficaz.

Aqui está o código Javascript que terá como alvo o Google Chrome 14 e posterior,

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

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

Hack do WebKit:

.selector:not(*:root) {}
  • Google Chrome : todas as versões
  • Safari : todas as versões
  • Opera : 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 posterior
  • Opera : 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 inferior a 7. - Google Chrome : 28 e anterior - Safari : 7 e anterior - Opera : 14 e posterior

Hacks de JavaScript: 1

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

Hacks de JavaScript: 2 {Webkit}

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

Hacks de JavaScript: 3

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

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 posterior
  • Opera : 16 e mais tarde

Para obter mais informações, visite este site


como Sebastian disse: @supports (-webkit-appear: none) {} afeta o Safari, testado na v.10
Dmitrii Malyshev

1
@supports (-webkit-appearance:none) { }agora está trabalhando para o MS Edge.
Vadim Ovchinnikov

@media all e (-webkit-min-device-pixel-ratio: 0) e (min-resolution: .001dpcm) {.selector {}} agora afetam o Firefox também
Joe Salazar

13

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

O Safari agora também suporta o @supportsrecurso. 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;
  }
}

4
O texto também é vermelho no FireFox para mim.
Kerry7777

9

Este seletor de navegador css pode ajudá-lo. Dê uma olhada.

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


A declaração "seletor de navegador css" é um pouco confusa para um javascript simples. O próprio CSS não oferece suporte a nenhuma seleção por navegadores!
Armin

Desculpe, mas é assim que seu criador o chamou. Acabei de citá-lo :(
tarashish de

Frase muito sinistra do autor ;-)
Armin

1
sim, realmente não quero adicionar uma carga inteira de js apenas para este :( mas de outra forma poderia ser útil.
Jamie Hutber

O principal problema é que ele se torna um ponto único de falha frágil, pois depende da dedicação de um único programador e que seria necessário manter o rastreamento de suas alterações para se manter atualizado. Basicamente, uma forma duvidosa de lidar com um problema em andamento, pois embora possa ajudar no curto prazo, não resolve o problema.
Patanjali

7

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

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

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}
<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>


2
Este hack funcionou para mim. As soluções que dependiam da resolução da tela afetaram o Firefox também.
Steve Breese

@stevebreese Reparei nisso, suspeito que seja apenas para navegadores modernos.
Shasha

3

Nunca me deparei com uma instância em que tive que fazer um hack de css somente do Chrome até agora. No entanto, descobri que isso move o conteúdo abaixo de uma apresentação de slides para onde estiver claro: ambos; não afetou nada no Chrome (mas funcionou bem em todos os outros lugares - até mesmo no 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;
    }

1

se quiser, podemos adicionar uma classe a um brwoser específico, consulte [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;
}
<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>


1

Estou usando um mixin sass para estilos cromados, isso é para Chrome 29+pegar emprestada 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-o assim:

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

5
O Firefox agora também lê essa regra, portanto, não é mais bom se você deseja segmentar apenas o Chrome.
Mahn

0

O Chrome não fornece nenhuma condição própria para definir definições CSS apenas para ele! Não deveria haver necessidade de fazer isso, porque o Chrome interpreta sites como definidos nos padrões 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 )

2
Definitivamente, existem razões pelas quais você deseja aplicar ao Chrome, mas não, por exemplo, Safari ou Firefox, por exemplo, diferenças em como os navegadores processam os elementos <select>. Uma solução somente CSS seria muito mais limpa do que ter que envolver código do lado do servidor ou do cliente.
thom_nic

1
O Chrome não é perfeito. Assim como qualquer outro software, ele apresenta bugs, inclusive no mecanismo de renderização, e alguns não são corrigidos após alguns anos. Portanto, ser capaz de detectar o Chrome para neutralizar os efeitos desses bugs é importante. 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; 
     }
}

verifique this.it funciona para mim.


0

Tão simples. Basta adicionar uma segunda classe ou id ao seu elemento no momento do carregamento que especifica qual navegador ele é.

Basicamente, no front-end, detecte o navegador e, em seguida, defina id / classe e seu css será definido usando os crachás específicos do navegador

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.