Share
Lo has visto una y otra vez en Webdesigntuts +; Un tutorial de CSS3 que está tentado a seguir, pero la falta de soporte en navegadores antiguos le impide seguir buscando. Sin embargo, hay una serie de herramientas para ayudar en situaciones como estas. Hoy vamos a descubrir cómo conquistar CSS3 en navegadores más antiguos., incluso explorador de Internet?
Echemos un vistazo a una serie de técnicas para representar las propiedades más importantes de CSS3 en versiones anteriores del navegador..
Para comenzar, descargue e incluya todos los scripts necesarios para este tutorial. Para el propósito de este ejercicio, coloque todos los scripts en la misma carpeta que sus archivos CSS. Aquí están las herramientas que necesitaremos:
CSS3PIE es nuestro asistente de IE. PIE significa Internet Explorer progresivo, y amplía el comportamiento de Internet Explorer para ayudarlo a reconocer y mostrar las propiedades de CSS3.
Echa un vistazo a la carpeta de descargas CSS3PIE donde encontrarás varios archivos. Vamos a utilizar PIE.htc, y lo llamaremos desde nuestro CSS, así que te sugiero que lo pongas en la misma carpeta que nuestra hoja de estilo.
Selectivizr se utiliza para manejar los selectores de CSS3. Se utiliza junto con una biblioteca de JavaScript, como jQuery o Mootools. Recomiendo optar por Mootools ya que soporta todas las funciones Selectivizr (selectores de CSS).
Para este tutorial, voy a utilizar la biblioteca de Mootools alojada en Google, así que, simplemente la incluiremos en nuestra cabeza:
Podemos usar jQuery para representar una alternativa a la propiedad text-shadow de CSS3. Simplemente necesitamos descargar el complemento jQuery text-shadow, luego incluirlo con jQuery:
OK, eso está cubierto en nuestro kit de herramientas, ahora veamos cómo usamos esas herramientas para resolver nuestros dolores de cabeza CSS3?
El radio de borde es probablemente la más familiar de las propiedades de CSS3. Afortunadamente, representarlo en Internet Explorer es simplemente un caso de usar CSS3PIE.
.cuadro radio-borde: 10px; comportamiento: url (PIE.htc);
Como puede ver, solo tenemos que "llamar" al script PIE, después de haber definido nuestra regla de radio de borde.
De manera similar al radio de borde, para que Internet Explorer reconozca box-shadow, solo tenemos que incluir el script PIE. Tenga en cuenta que también podemos declarar el color de sombra utilizando valores RGBA.
.caja caja-sombra: 5px 5px 5px rgba (0, 0, 0, .75); comportamiento: url (PIE.htc);
También puede utilizar colores RGBA al declarar un color de fondo.
Para permitir que CSS3 PIE genere gradientes de fondo, nosotros anteponemos fondo: de la siguiente manera:
-fondo circular: lineal-gradiente ([|| ,]? , El, ] *);
En realidad, es muy similar a las otras reglas de otros proveedores de navegadores. Recuerda llamar al comportamiento de CSS3 PIE después.!
.cuadro fondo: -webkit-linear-gradient (arriba, # 0072bc, # 00bff3); / * Safari, Chrome * / background: -moz-linear-gradient (top, # 0072bc, # 00bff3); / * Firefox * / background: -o-linear-gradient (top, # 0072bc, # 00bff3); / * Opera * / background: -ms-linear-gradient (top, # 0072bc, # 00bff3); / * IE10 * / -pie-background: gradiente lineal (# 0072bc, # 00bff3); / * IE6 + * / behavior: url (PIE.htc);
Una vez más, en este caso, tenemos que utilizar el -tarta- prefijo:
.cuadro fondo: url (img / flash.png) 20px 20px no-repetir, url (img / airplane.png) 90px 50px no-repetir, # 00BFF3; / * Modern Browsers * / -pie-background: url (img / flash.png) 20px 20px sin repetición, url (img / airplane.png) 90px 50px no-repeat, # 00BFF3; / * IE6 + * / behavior: url (PIE.htc);
La última propiedad que ofrece CSS3 PIE es la imagen de borde:
.cuadro borde-imagen: url (border.png) 27 27 27 27 redondeo redondo; comportamiento: url (PIE.htc);
Ahora es el momento de ensuciarse con Selectivizr. Incluya la biblioteca de JavaScript como se muestra al comienzo de la guía, luego IE6 reconocerá todos los selectores de CSS3.+!
tabla tr: primer hijo background: # 252525; table tr: nth-child (2n + 1) background: #ebebeb;
Este efecto se puede representar en varios navegadores utilizando la biblioteca jQuery. Una vez incluido, simplemente llame al sombra de texto() función, apuntando a su selector:
Para completar el efecto, solo agrega la sombra de texto a tu CSS.
.txt text-shadow: 2px 2px 2px negro;
Para reemplazar algunas propiedades de CSS3 también puedes usar filtros de IE. Este primer ejemplo es para gradientes de fondo:
.cuadro fondo: #FFFFFF; filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 444444', EndColorStr = "# 999999"); / * IE6-IE9 * /
Este segundo, es el equivalente a la propiedad de transformación. Sin embargo, la sintaxis es un dolor de cabeza tal que se recomienda usar un generador para calcularlo.
.cuadro / * IE8 + - debe estar en una línea, desafortunadamente * / -ms-filter: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, V12 = .07361776669312.P.P.P.P.P.P.P.P.P.P.P.P.P.P.P.P.P.P.P.P.P. expandir")"; / * IE6 y 7 * / filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0.17364817766693127, M22 = 0.9848077530122079 / Sq. margen izquierdo: -14px; margen superior: -21px;
Como ha visto, con varias herramientas podemos garantizar una representación razonable de CSS3 en navegadores más antiguos. ¡Espero que esto te anime a tomar el toro por los cuernos y practicar muchos de los efectos que se pueden lograr con CSS3! Gracias por leer.
Accentsconagua