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.

Por juramy el 11 de Julio de 2011

El hack no muestra los canvas es por eso que les adjunté el refuerzo del hack <If IE> en el post anterior.

*editado _mx*
Por adrianengine el 08 de Agosto de 2011

IE PIE es un excelente recurso, en mi experiencia usandolo en sitios de clientes, surgen algunos problemas con el zoom (hay clientes que usan el zoom en Internet Explorer) el cual deja de funcionar en los elementos a los que se les aplica PIE? Usénlo! en proyectos personales donde tengan el control? es excelente!
Por Inyaka el 08 de Agosto de 2011

Buen recurso, felicitaciones
Por noIE6 el 08 de Agosto de 2011

Tu intención vale mucho pero... la verdad es que para empezar tu html esta algo mal... tu css de igual manera desordenado... es decir, no tienes buenas practicas.
Y para terminar... olvida el IE6 que ya nadie quiere ni debe preocuparse por el.
Para la próxima seria mejor que ofrecieras un articulo del cual se obtenga realmente un buen provecho.
Aun así, una vez mas, gracias por la intención
Por jask05 el 08 de Agosto de 2011

Que tiquismiquis somos @noIE6. Eso es maquetación, y se puede cambiar en un segundo y medio.

Por otro lado, para la gente que aún es bastante purista y sigue dando soporte a IE6 viene bastante bien, en realidad todos tendríamos que hacerlo pero cada uno con lo suyo. El artículo es muy interesante a si que nada, si no te interesa a ti no tiene porque no interesarle a los demás
Por noctam el 08 de Agosto de 2011

Doy la razón a noIE6, no merece la pena dar soporte a este navegador que ya debería haber desaparecido...

Pero el hack no solo es para IE6 si no tb para el 7 y el 8 y este ultimo si que se utiliza, y bastante.

Así que este recurso SI que es util a día de hoy.

Buen aporte jumary
Por locx24 el 08 de Agosto de 2011

Sinceramente no creo que se trate de darle soporte a IE6 o 7 así nomas, hay empresas, instituciones gubernamentales, y escuelas que todavía trabajan con equipos antiguos y sin ninguna intención y posibilidad de actualizarlo. Entonces en esos casos es bueno saber como hackear tu código para que funcione decentemente.

Saludos
Por Raxiro el 08 de Agosto de 2011

Mas allá de la discusión de dar soporte a ie6/7 o no (eso depende de c/u, c/empresa y c/cliente) y de que el código puede estar un poco desprolijo, creo que el ejemplo sirve, si bien hay muchas formas de hacer funcionar html5 y css3 en ie 6/7, ésta no la conocía y es una opción más, lo cual me parece un gran aporte.
Pero mi deber como humano me hace recalcar un grave error al inicio del tutorial, FLEX 4 (3.5,3,2,etc) NO se usa para hacer páginas web! Flex es para web-apps!!! OMG!
Por Webtursos el 07 de Septiembre de 2011

PIE da problemas :/
Por 1222 el 10 de Septiembre de 2011

222222222222
Por Omegakenshin el 02 de Diciembre de 2011

Alguien puede hacer funcionar esto en wordpress Thematic??
Por xamla22 el 28 de Abril de 2012

creo que el mayor inconveniente es que uno aprende a trabajar en css3 pero se forma un despelote con ie.
es verdad no todos los lugares cuentan con tecnologia de punta para decir, si lo queres ver bien pon ie9.
uno no trabaja para uno, trabaja para los clientes, a mis si me ha sucedido que hago un buen trabajo y el cliente tiene una ie6 y yo por dentro he dicho WTF
no sirve para todo pero si para la mayoria me parece interesante, lo estoy probando en este momento...
gracias por el aporte, muy indistinto si tiene errores... o no...
me sirvio de mucho
Por malagan el 06 de Mayo de 2012

Este gato no sirvio, se ve terribleen ie8
Por elmismo el 18 de Mayo de 2012

Alguien sabe como hacerlo funcionar dentro de joomla??
Por daletsin el 08 de Julio de 2012

css3PIE es una excelente herramienta para algunas caracteristicas css3, pero hay que tener en cuenta que si hay muchos elementos para reenderizar, por ejemplo los bordes redondeados, puede ocasionar que la pagina se vea lento o en algunos casos ni siquiera llegue a cargar, me paso en un carrito de compras donde los resultados de busqueda mostraban muchisimos resultados en cuadros con bordes redondeados, hay que tener en cuenta este detalle que por ahi pasa desapercibido y recien te das cuenta en la experiencia
Por alguienqpasoporqui el 15 de Octubre de 2012

WTF!!! Gracias
Por joseluis el 26 de Julio de 2013

@daletsin
como arreglar ese problema entonces??

joder, es que a mi me esta pasando y me estoy volviendo loco para intentar hacer que la carga sea mas liviana pero no hay manera!

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

Paso 1

Paso 2

Paso 3

Publica tu comentario

o puedes...