0

Entre las etiquetas HEAD tengo un enlace que carga la hoja de estilo para cualquier navegador, pero.. hago una condición con JS para cambiar la hoja de estilo para aquellos navegadores que no soportan ES5 (EcmaScript 5). Hasta ahí todo OK. Mi problema está con IE<10, y quizás con otros navegadores antiguos. Aunque la mira es para navegadores actualizados, sin embargo aun algunos aún siguen usado Win7 con IE9.

Empezamos. En pagina.html tengo:

<link id="css3" rel="stylesheet" href="css/main.min.css" />
<script>
<!--
(function(d) {
    'use strict';
    if (this) d.getElementById('css3').href = 'css/legacy.main.css';
})(document);
//-->
</script>

Éste código cambia la hoja de estilo sin cargar la hoja anterior, pero en IE<10 funciona en modo local, más no en servidor remote; cambia la ruta pero no descarga el archivo legacy.., por tanto la página se queda sin estilo.

Para una solución temporal hice lo siguiente:

<link id="css3" rel="stylesheet" href="css/main.min.css" />
<script>
<!--
(function(d) {
    'use strict';
    var sheet;
    if (this) {
        sheet = d.getElementById('css3');
        if( !!d.uniqueID && !d.addEventListener ) {  //Solo IE<10
            sheet.media = 'none';
            window.onload=function(){ sheet.href = 'css/legacy.main.css'; sheet.media = 'all'; }
        } else {
            sheet.href = 'css/legacy.main.css';
        }
    }
})(document);
//-->
</script>

Ahora con éste código ya aplica estilo en IE<10, sin embargo aún descarga la hoja anterior :( y esto hace que demore la carga de la página la primera vez.

Por eso pregunto: ¿Cómo detener la carga de una hoja de estilo y luego cambiarla por otra a partir de su ID?

1 respuesta 1

1

Un script en Javascript que detecta el navegador del visitante y permite enlazar con un archivo distinto de declaraciones de estilos CSS dependiendo del browser del usuario. Queremos dar una solución actual para las personas que desean tener varias hojas de estilos para su página y que, dependiendo del navegador del usuario, puedan enlazar con una hoja u otra. Esta utilidad es muy recurrida y preguntada, debido a que los navegadores a menudo interpretan de manera distinta algunos atributos de hojas de estilo. Con ello ocurre que una página con estilos CSS no se ve exactamente igual en un navegador que otra. Por ello una solución podría ser incluir una declaración de estilos específica para cada explorador de cada usuario que nos visite.

Fuente: desarrolloweb No has pensando hacer algo asi?

if (BrowserDetect.browser == "Firefox") { 
    document.write("<LINK REL='stylesheet' HREF='estilo_firefox.css' TYPE='text/css'>"); 
} 
else { 
   	if (BrowserDetect.browser == "Explorer"){ 
       if (BrowserDetect.version>=7){ 
         	document.write("<LINK REL='stylesheet' HREF='estilo_ie7.css' TYPE='text/css'>"); 
      	}else{ 
         	document.write("<LINK REL='stylesheet' HREF='estilo_ie6.css' TYPE='text/css'>"); 
      	} 
   	}else{ 
      	if (BrowserDetect.browser == "Opera"){ 
         	if (BrowserDetect.version<9){ 
            	document.write("<LINK REL='stylesheet' HREF='estilo_opera.css' TYPE='text/css'>"); 
         	}else{ 
            	document.write("<LINK REL='stylesheet' HREF='estilo_opera9.css' TYPE='text/css'>"); 
         	} 
      	}else{ 
         	document.write("<LINK REL='stylesheet' HREF='estilo_otros.css' TYPE='text/css'>"); 
      	} 
   	} 
}

Espero que te sirva, si te sirvio marcala como resuelta.

https://desarrolloweb.com/articulos/estilos-css-distintos-navegador-javascript.html

1
  • Lastimosamente no resuelve la pregunta. La pregunta es el ¿Cómo evitar la descarga de la hoja de estilo? para luego yo cambiarla por otra. Hasta el momento encontré desactivar el uso de la hoja de estilo en el navegador ´sheet.disabled = true;´ y luego cambiarla y activarla.... pero no es posible evitar la descarga :( el 6 jun. 2017 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.