css3-compatible-ie

Compatibilidad de CSS3 en Internet Explorer

Adoramedia
Menú

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

Herramienta 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

Herramienta CSS3Pie

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'); }
Compartir

Tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de privacidad y protección de datos, pinche en el enlace para más información. ACEPTAR

Aviso de cookies