Soluciones de CSS3 en Internet Explorer

Estos códigos muestran algunas propiedades específicas de CSS3 para IE con las que estamos acostumbrados a trabajar en otros navegadores como Firefox, Chrome, etc, pero que por algún motivo de Microsoft en IE no están soportadas y a menudo esto se convierte en un dolor de cabeza para los que nos interesa el desarrollo web, porque queremos que nuestro sitio web sea compatible con todos los navegadores posibles, incluyendo el odiado Internet Explorer, veamos algunos ejemplos.

Opacidad – Transparencia

#myElement {
	opacity: .4; /* otros navegadores y IE9+ */
	filter: alpha(opacity=40); /* IE6+ */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* Solo en IE8 */
}

Esquinas Redondas

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

Sombras

.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* en Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* en Safari y Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /*  en el puto IE */
}

Sombras en los Texto, algo tan simple como esto, IE no lo soporta para ello Kilian Valkhof desarrolló un plugin en jQuery para que pueda ser compatible.

.text-shadow {
	text-shadow: #aaa 1px 1px 1px; /* en otros navegadores */
}

Gradientes

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* en Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 y IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Color de Fondo Transparente con RGBA

#rgba p {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

Rotar un Elemento

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* Solo en IE8 */
}

No es una sorpresa que Internet Explorer, incluso en su versión más reciente, todavía no es compatible con la mayoría de las propiedades y características introducidas en CSS3.

Este blog también es victima de IE, pero seguiremos esforzándonos para hacer que sea lo mas compatible posible con este odiado navegador que usan millones de personas.

Recomendado