Trayendo propiedades de CSS3 a Internet Explorer

June 18, 2021
CSS

 

CSS3 + Internet Explorer = No funciona. Es una realidad en nuestro día a día. Hasta la salida de IE9, la gran mayoría de efectos que servían en Firefox, Chrome, Safari, Opera, simplemente no funcionaban en IE. Como referencia de las propiedades que soportan los diferentes navegadores, les dejo éste enlace y éste otro. Aún así, con IE9 tratando de ponerse al día con los demás exploradores, el porcentaje de usuarios de IE8, IE7 es considerable. Es en esta situación donde entra PIE (Progressive Internet Explorer). Según lo describe su sitio, PIE es un "IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.". Simplemente al añadirle behavior: url(PIE.htc); al selector en el que estemos usando una propiedad CSS3 que IE no soporta, automáticamente la soportará. Las propiedades que soporta son:

 

  • border-radius
  • box-shadow
  • border-image
  • multiples imagánes de background.
  • linear-gradient como una imagen de background
  •  

El funcionamiento es bastante básico, tenemos nuestro selector con una propiedad en CSS3, en este caso es el border-radius: [prism:css] #block-menu-menu-main-menu a { background: #154596; padding: 8px 10px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } [/prism:css] Simplemente le añadimos al final, la siguiente declaración. [prism:css] #block-menu-menu-main-menu a { ... behavior: url(PIE.htc); } [/prism:css] Para Drupal, podemos hacerlo de manera manual (editando cada CSS que tenemos y añadiéndole la línea de behavior), o simplemente instalamos el módulo que nos va a ayudar mucho para manejar esto. Necesitamos los siguientes módulos para implementarlo: http://drupal.org/project/css3pie http://drupal.org/project/libraries http://drupal.org/project/ctools y descargar el HTC http://css3pie.com/download-latest Para los que usamos Drush, descargamos los módulos: [prism:bash] drush dl css3pie ctools libraries [/prism:bash] ... y los instalamos [prism:bash] drush en -y css3pie ctools libraries [/prism:bash] Descargamos la librería de PIE y la extraemos en sites/all/libraries/PIE En nuestra página de administración de Drupal, nos vamos a admin/config/user-interface/css3pie, y en el cuadro de CSS Selectors, colocamos los selectores en el que estemos usando las propiedades que queremos que se vean en IE. 

 

De esta manera podemos mantener nuestro código más fácil que editando nuestras hojas de estilo. Nosotros usamos CSS3Pie en Latamapps y como pueden apreciar en la siguiente imagen, usando IE8 (modo de compatibilidad de IE9), se ven los bordes con la propiedad border-radius.

 

 Si tienen problemas implementando ciertos gradientes como imágenes de background, consideren añadir la propiedad position:relative; al selector. Ésto se debe a que el PIE añade un elemento al HTML (como pueden ver en la imagen)<css3-container>. Nos gustaría saber que otras herramientas utilizan ustedes o de qué forma tratan de darle soporte a versiones viejas de IE, o si no le dan soporte para nada.