¿Hay alguna manera para poder cambiar un estilo solo en un navegador en concreto?
-
1Échale un vistazo a esta pregunta de SO: stackoverflow.com/questions/32547370/… – Kiko_L el 11 abr. 18 a las 9:58
-
Hola davescode, deberías añadir algo más de información a la pregunta: ¿Es un estilo específico o quieres que toda la página se vea diferente? ¿Puedes usar JavaScript o lenguajes del lado del servidor? Lee Cómo preguntar para más información y consejos. Generalmente tener estilos dependientes del navegador no es algo ideal, ¿qué es lo que estás intentando hacer? – Alvaro Montoro♦ el 11 abr. 18 a las 18:18
1 respuesta
Podes generar una clase padre para que muestre un estilo u otro dependiendo del navegador y con una función en javascript obtengo el navegador para agregarlo como class
. Por ejemplo:
function getBrowser() {
// Opera 8.0+
if ((!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0) {
return 'opera';
}
// Firefox 1.0+
if (typeof InstallTrigger !== 'undefined') {
return 'firefox';
}
// Safari 3.0+ "[object HTMLElementConstructor]"
if (/constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification))) {
return 'safari';
}
// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document.documentMode) {
return 'ie';
}
// Edge 20+
if (!!window.StyleMedia) {
return 'edge';
}
// Chrome 1+
if (!!window.chrome && !!window.chrome.webstore) {
return 'chrome';
}
// Blink engine detection
if ((isChrome || isOpera) && !!window.CSS) {
return 'blink';
}
}
// agrego la clase al #container
document.getElementById('container').classList.add(getBrowser());
.nombre {
color: white;
background: green;
display: inline-block;
}
.chrome .nombre {
color: red;
background: yellow;
}
.firefox .nombre {
color: blue;
background: red;
}
.ie .nombre {
color: yellow;
background: green;
}
.edge .nombre {
color: white;
background: black;
}
<div id="container">
<div class="nombre">
Stackoverflow
</div>
</div>