Ir ao conteúdo
  • Cadastre-se
Thyago Barbosa

CSS Condição If pra cada tipo de navegador

Recommended Posts

Galera, tenho um código que estou usando o estilo "padding" só que o valor que coloco dentro do padding, tipo "padding: 0px 4px" mostra um estilo diferente em cada navegador. Tipo, no Firefox fica um quadrado, e no Chrome fica um retângulo (altura > largura), daí existe alguma condição do tipo (só exemplificando) "If (navegador = Firefox){padding: 0px 4px} If (navegador = Chrome){padding: 8px 2px}. Tipo nesse esquema (sei que não existe desse jeito, mas foi só pra ilustrar.)

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Thyago Barbosa Com CSS  só dá para fazer uma condicional assim se usar um pré-processador como   Sass.

Mas você fazer com PHP também,   detectando o tipo de navegador e fazendo a cadeia de IF .

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Thyago Barbosa

51 minutos atrás, Thyago Barbosa disse:

Não tem nenhuma gambiarra com Javascript que consiga fazer isso mais ou menos?

Não diria uma gambiarra, mas dá para fazer sim. Você detectar o navegador e fazer o teste.

 

Veja um exemplo: https://jsfiddle.net/dife/14a7zfe0/

 

Experimente abrir no Chrome primeiro, depois pegue o link e abra no Firefox!

 

Nesse exemplo só fiz com esses dois... mas se quiser fazer um teste com vários navegadores, aí você fica adicionando um " else if"  para cada variável:

 

Cada variável, é um teste de navegador e retorna TRUE se verdadeiro.

// Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

Com isso, você pode criar diversos arquivos CSS e chama-los de acordo com o navegador :thumbsup:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×