CSS Condição If pra cada tipo de navegador

[Thyago Barbosa]

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.)

[DiF]

@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 .

[Thyago Barbosa]

@DiF Entendi, pior que tem que ser html puro mesmo :/ Não tem nenhuma gambiarra com Javascript que consiga fazer isso mais ou menos?

[DiF]

@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