No uses Internet Explorer en Navidad

Ya expliqué hace un tiempo porque no usar Internet Explorer, pero muchas personas siguen usando este programa en vez de utilizar un navegador web.

En esta oportunidad les voy a presentar otro ejemplo de porque IE es una verdadera pesadilla para los diseñadores web y un aportador de malisimas experiencias de navegación para los usuarios, aunque muchas veces estos no lo sepan y algunos hasta lo tengan merecido.

Hace unos minutos leia el tutorial How to Create CSS3 Christmas Tree Ornamentos, o como crear adornos navideños en CSS3. Hace un tiempo CSS3 era algo avanzado pero hace mucho que los navegadores web soporta CSS3 y trae muchas ventajas que acompañaran muy bien a HTML5.

En el tutorial nos muestra como crear adornos navideños utilizando listas HTML para cada adorno:

<ul id="bauble-container">
  <li>
    <divfont-weight: bold; color: rgb(0, 153, 102); ">bauble red-bauble"></div>
  </li>
  <li>
    <divfont-weight: bold; color: rgb(0, 153, 102); ">bauble blue-bauble"></div>
  </li>
  <li>
    <divfont-weight: bold; color: rgb(0, 153, 102); ">bauble yellow-bauble"></div>
  </li>
  <li>
    <divfont-weight: bold; color: rgb(0, 153, 102); ">bauble green-bauble"></div>
  </li>
</ul>

Y luego CSS3 para aplicar el color y diseño:

/* General */
html
{
	background: #f2f5f6; /* Fallback background color if gradients are not supported */
	background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6));
	height: 100%;
}

#bauble-container
{
  list-style: none; /* Remove bullets */
  width: 568px;
  margin: 150px auto; /* Center it */
  padding: 0; /* In production, this may not be needed if you reset your styles in your global stylesheet:
                 http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ */
}

#bauble-container li
{
  margin: 0 20px; /* let's add some space */
  float: left; /* place them in line */
}

/* This is the part where the Christmas bauble string is added */
#bauble-container li:before
{
	content: "";
	background: #dadada; /* Fallback */	
	background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
	background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
	height: 50px;
	width: 2px;
	display: block;
	margin: 0 auto;
}

/* Alernatively rotate them */
#bauble-container li:nth-child(odd)
{
	-moz-transform: rotate(-5deg); /* Firefox */
	-webkit-transform: rotate(-5deg); /* Chrome and Safari */
	-o-transform: rotate(-5deg); /* Opera */
	-ms-transform: rotate(-5deg); /* Surprise! IE9 with its own prefix */
}

#bauble-container li:nth-child(even)
{
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
}

/* Style the bauble */
.bauble
{
	-moz-border-radius: 100px;
	border-radius: 100px;

	-moz-box-shadow: 0 0 5px #777777;
	box-shadow: 0 0 5px #777777;
	-webkit-box-shadow: 0 0 5px #777777;

	border: 1px solid rgba(0,0,0,0.3);
	position: relative;
	height: 100px;
	width: 100px;
}

/* Style the bauble head */
.bauble:before
{
	content: "";

	background: #fff; /* Fallback */
	background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
	background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c)); 

	-moz-border-radius: 2px;
	border-radius: 2px;

	-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
	box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;

	border: 1px solid #dadada ;
	height: 10px;
	width: 20px;
	position: absolute;
	left: 50%;
	top: -12px;
	margin-left: -10px;
}

/* Add bauble light reflection */	
.bauble:after
{
	content: "";

	-moz-border-radius: 100px;
	border-radius: 100px;

	background: #fff; /* Fallback */
	background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
	background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1))); 

	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -40px;
	opacity: 0.15;
	height: 80px;
	width: 80px;
}

/* Colorize them */
.red-bauble
{
	background: #c8171f;
	background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
	background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}

.blue-bauble
{
	background: #00a1ee; /* Fallback */
	background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
	background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}

.yellow-bauble
{
	background: #fcb83d; /* Fallback */	
	background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
	background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}

.green-bauble
{
	background: #4d8d00; /* Fallback */
	background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
	background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}

el resultado en todos los navegadores como FireFox, Chrome, Opera, Safari es el de la imagen superior, pero en Internet Explorer el resultado es el siguiente:

como pueden ver, Internet Explorer deja las bolas cuadradas, que casualmente es lo que muchos diseñadores web comentan al torturarse trabajando en el, siempre hablando de adornos navideños claro.