La irrupción de HTML5 y CSS3 en nuestros códigos de desarrollo es un hecho, y por más que sus detractores se empeñen en infravalorar su eficiencia, acabarán enterrando esa idea tal y como ocurrió con las tablas de maquetación.
La vieja escuela aboga por la «incompatibilidad» de estas tecnologías con algunos navegadores, pero existen soluciones para que sus estilos y funcionalidades sean perfectamente compatibles en exploradores arcáicos como IE.
-Prefix-free
Esta librería de JavaScript permite utilizar las propiedades de CSS3 sin necesidad de utilizar los prefijos de renderizado de cada navegador.
Tan sólo hay que agregar el código al header y cualquier propiedad será identificada en Firefox, Chrome, IE, Opera, Safari, etc
<script src="js/prefixfree.min.js"></script>
Y mágicamente, la herramienta traducirá los estilos…
.main{ width: 960px; padding:15px 0; -webkit-box-shadow: 20px; -moz-box-shadow: 10px; box-shadow: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
…para convertirlos en el estándar:
.main{ width: 960px; padding:15px 0; box-shadow: 10px; border-radius: 6px; }
CSS3 Pie
Uno de los principales atractivos de CSS3 es su facilidad para crear formas bidimensionales y jugar con la profundidad de campo a través de sombras, bordes redondeados o degradados.
A través de esta herramienta online, su compatibilidad con IE está totalemente asegurada. Añadiendo una línea de código en un archivo .htc se produce una simulación automática lista para ser usada.
Otra alternativa con un funcionamiento similar es Fetchak, con el valor añadido de poder utilizarse también para la propiedad text-shadow.
Transparencia de colores
La incompatibilidad de las transparencia alpha en Internet Explorer se soluciona mediante los atributos filter y -ms-filter, actuando como simuladores de los filtros DirectX que utiliza el navegador.
#transparencia{ background: rgba(255, 255, 255, .6); filter progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr='#333333' endColorstr='#999999') -ms-filter progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr='#333333' endColorstr='#999999'); }