La utilización de CSS3 es probablemente la última tendencia en diseño web, permitiendo a los desarrolladores la oportunidad de implementar soluciones en sus diseños con selectores CSS más sencillos y evitando tener que recurrir a marcas no semánticas, utilización de imágenes adicionales y complejos códigos JavaScript.
Desafortunadamente, incluso en sus versiones mas actuales, Internet Explorer continua sin dar soporte a la release 3 de la especificación de hojas de estilo en cascada. Windows Internet Explorer 8 es completamente compatible con la especificación de CSS 2.1 y soporta solamente algunas funcionalidades de CSS 3 (ver nota del msn sobre la compatibilidad de CSS e Internet Explorer).
En el artículo publicado en Smashing Magazine titulado “CSS3 Solutions for Internet Explorer”, nos dan pistas y soluciones sobre como utilizar una serrie de opciones que los desarrolladores pueden considerar para aquellas circunstancias en que se requiere compatibilidad con una característica de CSS3 para todas las versiones de Internet Explorer (IE6, IE7 e IE8).
En nuestra opinión se trata únicamente de recursos que pueden utilizarse exclusivamente en caso de necesidad, ya que, como se indica para cada uno de ellos, todos originan algún tipo de problema y, en su mayoría, provocan que nuestro código CSS no sea válido según los estándares de W3C.
En este post resumimos estas posibilidades para intentar hacer nuestros diseños basadaos en CSS3 más compatibles con el navegador de Microsoft.
Opacidad / Transparencia
IE no ofrece apoyo a la propiedad opacity, pero ofrece una solución similar con la propiedad filter.
Sintaxis:
1 | #myElement { |
2 | opacity: .4; /* otros navegadores*/ |
3 | filter:progid:DXImageTransform.Microsoft.Alpha(opacity=
|
4 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* para IE8 solamente*/ |
5 | } |
La segunda línea permite la aplicación de la propiedad en las tres versiones de IE, pero si necesitamos fijar la opacidad solamente para IE8 y no para IE6 / 7 podemos aplicar la tercera.
Demo:
Elemento con background color (#0000FF), y 60% de transparencia
Problemas:
- Filter es una propiedad que solo aplica a navegadores de Microsoft, así que el CSS no se validará
- Como en el caso de la propiedad
opacity, las propiedades del filtro serán heredadas
Esquinas redondeadas (border-radius)
El border-radius es una propiedad de CSS3 que permite redondear las esquinas de determinados elementos, evitando la necesidad del uso de código JavaScript o de elementos extra.
Para solventar el hecho de que no es una propiedad soportada por IE, Remiz Rahnas de HTML REMIX ha creado un archivo HTC llamado CSS Curved Corner que se puede descargar de Google Code y que permite, sin ningún ajuste adicional, configurar el radio de redondeo.
Sintaxis:
1 | .box-radius { |
2 | border-radius: 15px; |
3 | behavior: url(border-radius.htc); |
4 | } |
Demo:
Problemas:
- El archivo de HTC es de 142 líneas, lo que incrementa el peso de nuestra página y su tiempo de descarga
- La propiedad
behaviorprovoca que el código CSS no sea válido - El servidos debe ser capaz de cargar ficheros HTC
- En determinadas circunstancias, IE8 muestra algunos problemas cuando se ajustan valores negativos para z-index
Box shadow
La propiedad box-shadow es otra interesante característica de CSS3 que puede ser utilizada incluso en cajas con esquinas redondeadas mediante la propiedad border-radius. Para reproducir su efecto en IE se pueden utilizar de nuevo los filtros.
También tenemos que tener en cuenta que esta propiedad esta siendo eliminada del estándar CSS3, por lo que debemos plantearnos si es necesario y adecuado su uso.
Sintaxis:
1 | .box-shadow { |
2 | -moz-box-shadow: 2px
|
3 | -webkit-box-shadow: 2px
|
4 | filter:progid:DXImageTransform.Microsoft.Shadow(color=
|
5 | } |
Demo:
En el código de ejemplo también figura como aplicar otra solución mediante WebKit (Safari y Chrome) y propiedades de Mozilla (Firefox).
Problemas:
- Los ajustes para el filtro de IE no coinciden exactamente con la propiedad de CSS3, así que para hacer que parezca lo mismo, requiere “pelearse” con los valores
- Como ya hemos comentado antes, la propiedad Filter no valida, pero tampoco lo hace el WebKit y las propiedades de Mozilla , así que esto es una desventaja en todos los navegadores
Text shadow
La inclusión de sombras a los elementos de texto se ha practicado en el diseño de páginas web durante años. Esto se hace normalmente con imágenes y en ocasiones mediante texto duplicado al que se le aplican características específicas de posicionamiento. CSS3 permite a los desarrolladores agregar fácilmente sombras altexto mediante la propiedad text-shadow.
Para generar este efecto en Internet Explorer podemos recurrir a un plugin de jQuery desarrollado por Kilian Valkhof.
Uso del plugin:
En primer lugar debemos ajustar en nuestro fichero CSS la propiedad text-shadow , especificando los valores de color y posición:
1 | .text-shadow { |
2 | text-shadow: #aaa 1px 1px 1px; |
3 | } |
Después incluimos la librería de jQuery y el plugin en nuestro documento HTML:
1 | // incluir la librería jQuery en la página |
2 | // incluir el enlace al plugin en la página |
3 |
4 | $(document).ready(function(){ |
5 | $(".text-shadow").textShadow(); |
6 | }); |
El plugin también permite el uso de selectores CSS que sobreseen los ajustados en nuestro código CSS. Para más detalles podéis leer la documentación original del plugin.
Demo:
Ver la demostración en este lugar.
Problemas:
- Para conseguir un efecto similar en todos los navegadores se deben realizar unos cuantos ajustes en los selectores CSS específicos de IE, lo que nos obliga a diferenciar bloques de código dedicados a ellos, dificultándonos el mantenimiento posterior del nuestras hojas de estilo
- Requiere añadir la librería de jQuery si no la estamos utilizando para otras funcionalidades de nuestra página, lo que incrementa el peso de esta
- A diferencia de lo que ocurre ci usamos CSS3, el plugin no es compatible con sombras múltiples
- Si queremos que funcione en IE8, necesitamos dar valores con
z-indexa los distintos elementos
Colores de fondo transparentes (RGBA)
CSS3 ofrece otro método para poner en práctica la transparencia, haciendolo a través de un canal alfa que se especifica en un color de fondo.
Sintaxis:
Para los navegadores compatibles con CSS3, aquí está la sintaxis para establecer un canal alfa como fondo de un elemento:
1 | #rgba p { |
2 | background: rgba(98, 135, 167, .4); |
3 | } |
Con el anterior CSS, el color de fondo se establecerá en los valores RGB indicados, además se ha ajustado la opción “alpha” a “0,4″. Para imitar esto en Internet Explorer, puede utilizar una imagen PNG semitransparente de 1-pixel y establecerla como fondo ajustar la opción como de repetición en hortizontal y vertical :
1 | #rgba p { |
2 | background: transparent url(rgba-ie.png) repeat
|
3 | } |
Demo:
Esta demostración se muestra igual en IE7 e IE8 .
Este parrafo tiene un color de fondo con opacidad del 40% ajustado mediante RGBA (no funciona en IE)
Este parrafo tiene un fondo construido con la repetición de un pixel PNG).
Problemas:
- Requiere la creación de un nuevo archivo PNG cada vez queremos cambiar el color o la transparencia
- Agrega una solicitud HTTP extra haciendo para cada imagen PNG
- IE6 no soporta la transparencia nativa PNG
Degradados (Gradients)
La facilidad para degradados personalizados como fondos de elementos, es otra posibilidad incluida en CSS3 y que nos permite ahorrar tiempo y código . Aunque Internet Explorer no es compatible con las capacidades de CSS3 para generar degradados es bastante fácil para poner en práctica algo similar utilizando la sintaxis propietaria de IE.
Sintaxis:
Para declarar un degradado podemos utilizar el siguiente código. Para los filtros de Internet Explorer, el GradientType se puede establecer en “1″ (horizontal) o “0″ (vertical).
1 | #gradient { |
2 | background-image:-moz-linear-gradient(
|
3 | background-image:-webkit-gradient(linear,
Chrome */ |
4 | filter:progid:DXImageTransform.Microsoft.gradient(GradientType=
endColorstr=
*/ |
5 | -ms-filter:
endColorstr=’#4477a1′)”
|
6 | } |
Demo:
Este elemento es un degradado lineal generado para Internet Explorer.
Problemas:
- El CSS no validará, aunque eso ocurre también si utilizamos el WebKit y las caracteristicas particulares de Mozilla
- Se precisa código distinto para IE8, lo que aumenta las necesidades de mantenimiento de la página
- Al contrario de WebKit y Mozilla, no parece soporta degradados radiales
Múltiples fondos
En la actualidad, IE y Opera son los navegadores que no son compatibles con esta característica. Pero es de destacar que IE desde la versión 5.5 ha permitido implementar varios fondos en el mismo elemento con un filtro.
Sintaxis:
CSS para utilizar fondos múltiples en Firefox, Safari, Chrome:
1 | #multi-bg { |
2 | background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat; |
3 | } |
Para aplicar dos fondos para el mismo elemento en Internet Explorer, tenemos que incluir esta sintaxis en un bloque específico para el navegador:
1 | #multi-bg { |
2 | background: transparent url(images/bg-image-1.gif) top left repeat; |
3 | filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=
sizingMethod=
|
4 | -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif',sizingMethod=’crop’)”
|
5 | } |
Demo:
Fondos multiples en Chrome, Firefox, and Safari:
Multiples fondos en Internet Explorer 6-8 (se mostrará un fondo único en los otros navegadores):
Problemas:
- El CSS no será válido
- La segunda imagen de fondo aplicada, utilizando la propiedad
filtersiempre estará en la parte superior izquierda, y no puede repetir, por lo que este método es extremadamente inflexible y, probablemente, sólo podrá utilizarse en un número limitado de circunstancias - Con el fin de obtener el elemento del centro (como en otros navegadores), debemos de crear una imagen con la cantidad exacta de espacio en blanco a su alrededor, para imitar el centrado
Rotación de elementos (transformaciones en CSS3)
CSS3 ha introducido una serie de capacidades de transformación y animación de elementos animación que se pueden “imitar”, aunque de forma limitada, para Internet Explorer.
Sintaxis:
Para rotar un elemento 180 grados, la sintaxis en CSS3 es:
1 | #rotate { |
2 | -webkit-transform: rotate(180deg); |
3 | -moz-transform: rotate(180deg); |
4 | } |
Para crear la misma rotación en Internet Explorer, volvemos a utilizar la propiedad filter. El valor de la rotación puede ser 1, 2, 3 o 4, que indican 90, 180, 270 0 360 grados, respectivamente:
1 | #rotate { |
2 | filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=
|
3 | } |
Demo:
El elemento siguiente deberá aparecer al revés en Internet Explorer, con una rotación de 180 grados establecidos a través de la propiedad filter.
Este elemento debe aparecen rotado 180 grados en Internet Explorer.
Problemas:
- El CSS no será válido, pero tampoco con WebKit o los códigos de Mozilla
- Estos últimos permiten cambios para variar la rotación de un grado, el filtro de IE sólo permite 4 etapas de la rotación, minimizando su flexibilidad
Fuente: CSS3 Solutions for Internet Explorer – Smashing Magazine.
Related articles by Zemanta
- So, what can you do with HTML5? (psyked.co.uk)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=fd3e202f-113c-4463-b718-d4d28fc74753)
The CSS3: soluciones para Internet Explorer by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.
[...] This post was mentioned on Twitter by Stylesheet, aws. aws said: #CSS3: soluciones para Internet Explorer http://goo.gl/fb/a1PN9 #css #estándares #html #diseñoweb #navegadores [...]