Comunidad de diseño web y desarrollo en internet online

CSS3 en Internet Explorer 6, 7 y 8 100% funcional

Hoy en día sabemos que lo de hoy es HTML 5 o Flex 4 para crear aplicaciones web, pero que gran problema nos causan en los navegadores viejitos como IE 6,7 y 8 a nosotros los desarrolladores Web. El entregar un producto completo a nuestros clientes (aunque ellos no sepan si funciona en todos los navegadores) refleja que tan buenos diseñadores o desarrolladores somos, es por eso que quiero aportarles un HACK para los estilos CSS3.


Bien, sigamos los siguientes pasos:

Todo lo guardaremos en nuestra carpeta jodido-ie


Paso 1



Vamos a crear una carpeta llamada "JODIDO-IE" donde guardaremos nuestro proyecto (guardenlo donde gusten sólo es para tener organizado nuestro proyecto).

Paso 2



Descarguemos el archivo HACK y lo descomprimimos en nuestra carpeta JODIDO-IE o ingresen a la página www.github.com para descargar la última version del hack.

Paso 3



Crearemos nuestro documento HTML5 (Pueden copiar y pegar mi código)


Código :

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilo.css" />
<title>JODIDO INTERNET EXPLORER</title>


<body>
  
  
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
   <header>
Hack de IE
      
   </header>
 </div>   
        <section>
          
          <h1>Este es un hack fregon para ver los estilos de CSS3 en IE 6, 7 y 8</h1>
     
            <form id="formulario">
               <table width="380" height="113" border="0">
  <tr>
    <td width="95" height="39">Usuario:</td>
    <td width="213"><input type="text" name="usuario" id="usuario" /></td>
  </tr>
  <tr>
    <td height="35">Contraseña:</td>
    <td><input type="password" name="contrasena" id="contrasena" /></td>
  </tr>
</table>
               
            </form>
                <form id="formBotones">
                <input type="submit" id="aceptar" value="Aceptar" />
                <input type="submit" name="cancelar" id="cancelar" value="Cancelar" />
                </form>
   </section>

        <footer>
                  Hecho por JURAMY / www.maadix.com (Pagina en construcción proximamente) / Sigueme en @Mr_yuls
        </footer>
        
 
</body>


</html>


PASO 4)

Crearemos nuestra hoja de estilos llamada estilo.css

Código :


article, footer, header, section
{
   display: block;
behavior: url(PIE.htc);
}

body
{
   background: #fff;
   font-family: "Cabin","Helvetica", Arial;
   font-size: 16px;
   text-align: center;
        color: #383838;
     behavior: url(PIE.htc);

      
}
footer, header, section
{
        behavior:url(border-radius.htc); 
   background: #FFF;
   border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
   -moz-border-radius: 0.5em;
   -o-border-radius: 0.5em;
   box-shadow: rgba(0,0,0,0.5) 0 5px 10px;
   margin: 1em auto;
   padding: 1em;
   width: 960px;
    behavior: url(PIE.htc);
   

}
header
{
        behavior:url(border-radius.htc); 
        background: url("fondo.jpg");
        text-align: center;
        height: 35px;
        behavior: url(PIE.htc);
        color: #fff;
        font-weight: bold;
        font-size: 2.0em;
}
header h1
{
        behavior:url(border-radius.htc); 
   margin: 20px 0 20px 120px;
   font-family: Arial;
   font-size: 2.5em;
        
   text-shadow: rgba(255,255,255,0.75) 5px 5px 5px;
   -webkit-text-shadow: rgba(255,255,255,0.75) 5px 5px 5px;
        -moz-text-shadow: rgba(255,255,255,0.75) 5px 5px 5px;
        -o-text-shadow: rgba(255,255,255,0.75) 5px 5px 5px;
      behavior: url(PIE.htc);

}
footer
{
        
   background: url("fondo.jpg"); /*Podemos ponerle color de background o un doble background con imagenes esto es nuevo con css3 y html5*/


   text-align: center;
        padding: 10;
        color: white;
        height: 20px;
        font-weight: bold;
behavior: url(PIE.htc);
        

        
        
}
section
{
   
   text-align: center;
        height: 28em;
        font-weight: bold;
        font-size:20px;
      behavior: url(PIE.htc);

        
        
}
h1 {
         font-size: 22pt;
         margin: 0 4 25px 0;
         text-align: center;
         text-shadow: 1px 1px 2px #888888;
         behavior: url(PIE.htc);
      }
#formulario
{
   background: #dcdcdd;
   border-radius: 0.5em;
   color: #383838;
   font-size: 1.5em;
   margin: 0 auto 1em;
   padding: 0.5em;
        
   text-align: justify;
   height: 150px;    
   width: 500px;
      behavior: url(PIE.htc);

}
#formulario input
{
        border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        -o-border-radius: 0.5em;
        text-align: center;
        color: #383838;
        border-style: solid;
   font-size: 24px;
   margin: 0.5em auto 0;
   width: 100;
behavior: url(PIE.htc);
        
}
#formBotones input[type="submit"], #menu button
{
   background: #203d88;
   
   border-radius: 0.5em;
   color: #fff;
   font-size: 24px;
behavior: url(PIE.htc);
}





También cabe señalar que pueden realizar condiciones en el <head> para reforzar el hack: les dejo un if general (aunque no funciona con algunas etiquetas)...

El siguiente código lo pegan dentro del head:

Código :


<!--[if IE]>

<script type="text/javascript">
var e = ("abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video").split(',');
for (var i=0; i<e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->


La etiqueta "" behavior: url(PIE.htc); "" nos ayudara a jalar el hack desde el archivo estilo.css



Hasta la próxima =)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate