Cómo habilitar el radio de borde CSS3 en Internet Explorer 8 y debajo

CSS3 nos da la capacidad de crear esquinas redondeadas con la propiedad border-radius . Pero como ya sabrá, esta nueva característica no se reconoce en Internet Explorer 8 (IE8) y sus versiones anteriores. Por lo tanto, cuando aplica CSS3 Border Radius a un elemento, sigue apareciendo como un cuadro con consejos puntiagudos.

Puede encontrar muchos consejos diferentes en Internet sugiriendo que ignore IE8. Desearías poder hacerlo. Pero si está trabajando en un sitio web para una institución gubernamental o un banco, es posible que no tenga otra opción. Todavía tiene que hacer que el sitio web se vea tan bien como en los navegadores modernos, que incluye la capacidad de aplicar CSS3 Border Radius.

Si realmente tiene que preparar su sitio web para IE8, mientras puede usar la función CSS3, tenemos el consejo para usted.

CSS3Pie

CSS3Pie es un tipo de polyfill para las características decorativas de CSS3. Además de CSS3 Border Radius que vamos a analizar en este artículo, CSS3Pie también es compatible con Box Shadow y Gradients, aunque está limitado al tipo de degradado lineal.

Descargue CSS3Pie (aquí). Ponlo dentro del directorio de tu proyecto, lo coloqué en la carpeta css . Como también puede ver en la siguiente captura de pantalla, he creado una hoja de estilo y un archivo HTML.

Abra la hoja de estilo en el editor de código y establezca uno de los elementos en el archivo HTML con las esquinas redondeadas, de esta manera:

 .border-radius {height: 100px; ancho: 100px; color de fondo: # 2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; radio del borde: 50px; } 

Como el ancho y la altura del elemento son 100px, y el border-radius del border-radius se establece en 50px, el elemento se convertirá en un círculo:

En IE8, como esperamos, seguirá siendo un cuadrado (suspiro), pero no se preocupe.

Para habilitar el efecto de esquina redondeada, inserte esta línea: behavior: url(css/pie.htc);, al igual que.

 .border-radius {height: 100px; ancho: 100px; color de fondo: # 2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; radio del borde: 50px; comportamiento: url (css / pie.htc); } 

Tenga en cuenta que la ruta del archivo en url() tiene que ser una ruta absoluta o relativa al archivo HTML. También puede agregar esta línea en un archivo separado.

Puede tener una hoja de estilo que esté designada para Internet Explorer. Puede poner behavior: url(css/pie.htc); dentro de ese archivo, pero asegúrese de que esté declarado dentro del mismo selector de CSS, como ese.

 / * declarado en ie.css * / .border-radius {behavior: url (css / pie.htc); } 

Actualiza la página en IE8. La esquina redondeada ahora debe entrar en efecto (ta-da!). Debería funcionar en IE7 también.

Solución de problemas

Internet Explorer puede comportarse inesperadamente. Si esto no funciona (tal vez la esquina redondeada no surta efecto, o el elemento seleccionado ha desaparecido), agregar la position y la propiedad del zoom debería resolver el problema:

Usando CSS3 Pie en WordPress

Has terminado de poner tu sitio web en formato HTML. También utiliza pie.htc en el sitio web para habilitar CSS3 en IE8. En esta etapa, está listo para transformar el sitio web en un tema funcional de WordPress. En este caso, como WordPress es dinámico, donde las páginas pueden servir en diferentes URL de nivel, tenemos que especificar una ruta absoluta.

Puede cambiar la ruta en CSS de esta manera:

 .border-radius {behavior: url (http: // localhost / {sitio web} / wp-content / themes / {the_theme} /css/pie.htc); posición: relativa; zoom: 1; } 

O agregue estilos internos en header.php, de esta manera:

Pensamiento final

Tener cosas interesantes como CSS3 Border Radius funciona en IE8 es fascinante, y CSS3Pie hace que eso suceda, mientras nos da una razón menos para odiar IE8.

Genere plantillas de tema de WordPress con componentes Underscores

Es posible que ya conozcas los subrayados, a menudo abreviados como _s, que es un tema de inicio popular para WordPress. Este es un gran proyecto mantenido por Automattic que es la compañía que opera WordPress.Recientemente crearon otra herramienta llamada Componentes. Este es un generador gratuito de temas en línea basado en WordPress con planos personalizados para portfolios, sitios comerciales y diferentes temas de blog, desde blogs estándar hasta revistas .Los

(Consejos de tecnología y diseño)

Cómo Big Data Analytics hace que las ciudades sean más inteligentes

Las ideas innovadoras siempre ganan tracción y no pueden retenerse a medida que se expanden a través de los países y, finalmente, del mundo. El proceso de avanzar es un ejemplo de la supervivencia de la humanidad, a pesar de que las tecnologías recientes han cambiado drásticamente nuestros métodos de impulso hacia adelante .Hoy,

(Consejos de tecnología y diseño)