Funcionalidades HTML5/CSS3 en IE
HTML5 y CSS3 toma cada día mas fuerza pero aún esta muy limitado en cuanto a soporte por parte de los browsers. Como no podía ser de otra forma, Internet Explorer se lleva la palma aunque algunos desarrolladores parecen negarse a esperar un nuevo navegador de MS compatible con los últimos estándares.
A continuación os dejo algunas técnicas con las que añadir/simular funcionalidades propias de los browsers más punteros en el navegador de microsoft (Extraído de un estupendo post de catswhocode).
Compatibilidad con los nuevos tags HTML5
El siguiente script debe ser incluido dentro del head del documento para que IE sea capaz de interpretar los elementos antes de renderizar la página.
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> <![endif]-->
Text-shadow
p.shadowed {
text-shadow: #0000ff 0px 0px 3px; /* Navegadores modernos */
filter: glow(color=#0000ff,strength=3); /* IE */
}
box-shadow
.shadowed{
box-shadow: 10px 10px 5px #888;
}
.shadowed {
filter:
progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}
Rounded corners
.round{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
Para IE:
<script type="text/javascript" src="DD_roundies.js">
<script type="text/javascript">
DD_roundies.addRule('.roundify', '10px');
</script>
Opacity
.element{
opacity:.7; /* Standard CSS */
filter:alpha(opacity=70); /* IE patch */
}
Soporte RGBa
.color-block {
width: 50%;
background-color: rgba(0, 0, 255, 0.2); /* Modern browsers */
}
/*IE*/
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
Ningun post realacionado
