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.

La influencia del diseño inclusivo de Microsoft en el código de Visual Studio

El diseño universal o inclusivo es una nueva filosofía de diseño que Microsoft parece tomar muy en serio en el desarrollo de software recientemente. El diseño inclusivo lleva el diseño accesible al siguiente nivel, ya que ve la accesibilidad desde una perspectiva mucho más amplia. Cuando estaba probando el nuevo editor de código fuente de Microsoft, Visual Studio Code, naturalmente surgió en mi mente la cuestión de cómo implementaron la teoría en la práctica .Esta public

(Consejos de tecnología y diseño)

Más de 10 complementos gratuitos de Photoshop para diseñadores web

El uso de extensiones de Photoshop aumenta en gran medida su capacidad para ayudarlo a diseñar, optimizar su flujo de trabajo y hacer que sea más productivo. Puede usar un complemento de Photoshop para acelerar tareas repetitivas o tediosas, como:generar largas sombrasexportar capas de Photoshopconvertir PSD a CSS3convertir texto de Photoshop a SVGcrear especificaciones de diseño en Photoshopconvertir el diseño skeuomorphic en un diseño planoHay muchas otras extensiones de Photoshop disponibles, y en esta lista hay 12 increíbles que lo ayudan a administrar sus capas, colores, guías y más, para

(Consejos de tecnología y diseño)