CSS3 pie logo

Si aún estás con el engorroso trabajo de compatibilizar tus proyectos con las versiones de Internet Explorer antiguas, probablemente hayas buscando un sin fin de hacks, plugins, fixes, etc. para  lograr que en esas versiones se puedan ver bordes redondeados y sombras.

Esta librería (.HTC) lo que hace es emular algunas características de CSS 3 en Internet Explorer mediante un script especial, que si bien puede que encuentres varios HTC por la red, este sin duda es el mejor ya que dispone de las siguientes características:

Ventajas:

  • CSS3: border-radius, box-shadow y gradientes.
  • Box-shadow de calidad superior a otros htc en la web.
  • Compatiblidad para ie 6-9.
  • Buena velocidad de procesamiento ya que es casi invisible cuando se aplica el hack en IE.
  • Acepta el efecto :hover cuando ya haz procesado el elemento. (muchos .HTC que están en la web redondean un elemento pero no disponen del efecto :hover)
  • Compatibilidad para elementos con ancho dinámico.
  • Dispone de una version HTC, una JS y además un PHP para cuando no tienes otra alternativa y no funcionan las rutas relativas ni absolutas.

Contras:

  • Es un hack un poco pesado por lo que en IE te alentara un poco la petición del mismo.
  • Si saturas de elementos con bordes redondeados o con sombras,  las animaciones (ejemplo sliders o efectos en jQuery) se veran afectadas en rendimiento.

Recomendaciones:

  • Utilizarlo en una cantidad prudente de elementos.
  • No utilizarlo sobre un slider,  ya que las imágenes que van rotando no tendrian razón de tener sombras ya que saturarías el procesamiento. En ese caso seria mejor utilizar un fondo hecho con imágenes.
  • Utilizalo en aquellos elementos que sabes que su ancho siempre cambiará.
  • En mi caso lo utilizo cuando tengo que realizar sitios web redondeados y se hace muy tedioso estar creando un sprite para cada elemento.
  • Es muy recomendable utilizarlo en cuadros que son de contenido, como por ejemplo un articulo, ya que no tiene efectos extras como :hover y esto no satura el procesamiento.

Para complementar este tutorial realizaremos la aplicación del hack con su correspondiente demo.

Maquetación del HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejemplo CSS 3 PIE</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<style type="text/css">.rounded{ behavior: url(PIE.htc); }</style>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
    <div id="wrapper">
        <section class="content rounded">
            <h1>Demostración de CSS 3 PIE</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in erat ligula, a tristique dolor. Donec consequat massa quis dui sagittis imperdiet. Quisque non sem quis turpis sagittis mollis. Donec nibh libero, malesuada a blandit eget, rutrum ut magna. Etiam dapibus tortor ac nunc </p>
            <p>euismod egestas suscipit elit eleifend. Maecenas tempus tempor enim, ut fermentum ligula gravida ac. Suspendisse potenti. Vestibulum luctus vehicula ipsum, a placerat nisl congue eu. Nullam rutrum neque nec nisi porttitor a auctor libero rutrum. Etiam pulvinar turpis a enim accumsan congue.</p>
            <p>Phasellus at leo et turpis scelerisque luctus in eu lorem. Vestibulum nisi libero, adipiscing non commodo sit amet, adipiscing non tellus. Fusce porta ligula vel purus viverra porta. Aliquam turpis lacus, consectetur id lacinia sit amet, iaculis sit amet risus. Morbi neque metus, volutpat sed cursus </p>
            <p>sagittis, dapibus ut augue. Sed aliquet, nisl eu iaculis rhoncus, risus odio rhoncus libero, in ultricies enim tellus et libero. Fusce sollicitudin aliquam augue id lacinia. Vestibulum imperdiet, lorem quis placerat volutpat, elit turpis semper elit, id molestie neque metus sed eros. Sed ut dui augue, vel mattis sem. Nam ac magna vitae orci euismod aliquam pellentesque sed dui. Morbi pretium magna</p>
            <a href="#" class="rounded">Enlace</a>
        </section>
    </div>
</body>
</html>

Desarrollo del CSS:

/* CSS Document */

/* Reset */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

html{ overflow: auto; }
body{ font: 14px Arial, Helvetica, sans-serif; color: #333; }
h1, p{ padding-bottom: 20px; }
a{ text-decoration: none; }

/* End Reset */

/* Content */

#wrapper{ width: 960px; margin: 50px auto; }
section.content{
	width: 920px;
	background-color: #f5f5f5;
	border: 1px solid #fff;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0px 0px 10px #ccc;
}
section.content h1{ font-size: 18px; font-weight: bold; text-align: center; }
section.content a{
	display: block;
	width: 150px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	background: #333;
	border-radius: 10px;
	color: #fff;
	box-shadow: 0px 0px 5px #333;
}
section.content a:hover{ background: #666; }

/* End Content */

Puntos a tener cuenta a la hora de programar el CSS:

  • Debes tener cuidado con el elemento que esta siendo afectado, generalmente en IE7 e inferiores si le aplicas margenes o paddings no se vera igual que en IE8+. En este ejemplo especifico hay un contenedor #wrapper que sirve para arreglar ese detalle.
  • Aplicar el CSS Reset antes que nada.
  • Declara el behavior dentro del hack de IE < 9 que se incrusto en el HTML, así evitas que se llame en exploradores que si poseen compatibilidad con border-radius y box-shadow.
  • Este ejemplo utiliza HTML 5, si tienes dudas para que sirve el script y el reset, puedes visitar introducción a html 5.

Demo: referenteweb.com/demos/css3pie

Espero haberles sido de ayuda.