Las diferentes técnicas para aplicar PNG Hack | Programar Plus

Los PNG alfa transparentes (“PNG-24” para aquellos de ustedes que ahorran en Photoshop) son algo increíble para los diseñadores web. Podemos hacer un botón con una sombra sobre él y multiplicará esa sombra sobre lo que sea que esté debajo, incluso si ese fondo cambia. Esto puede parecer algo trivial, pero en realidad no lo es. Las posibilidades que te abre la transparencia alfa como diseñador son muchas. El problema, como probablemente sepa, es que Internet Explorer (IE < v7) no es compatible con PNG transparentes alfa. Cuanto más lo piensas, más triste se vuelve. Afortunadamente, existen algunos métodos que han surgido a lo largo de los años para ayudarnos a poner en forma estas versiones anteriores de IE. Aquí hay un resumen de algunas de esas técnicas.

NOTA: Todas estas técnicas finalmente terminan usando el filtro Microsoft AlphaImageLoader para forzar la transparencia. Las técnicas solo varían en CÓMO y CUÁNDO se aplica ese filtro.

Uso del comportamiento AlphaImageLoader para clases CSS específicas

alphaimageloader.png

Internet Explorer admite una “extensión personalizada” de CSS en forma de un atributo de “comportamientos”. Ninguno de los otros navegadores principales admite esto, lo que le permite aprovechar la especificidad del navegador para forzar este truco PNG solo en los navegadores que lo necesitan. Esta técnica usa una gran parte desagradable de CSS que no valida y que esencialmente usa el filtro AlphaImageLoader para forzar la transparencia.

Recuerde que hay dos lugares en los que podría necesitar aplicar transparencia: a gráficos en línea () e imágenes de fondo CSS. Con esta técnica, puede aplicar el comportamiento a una clase CSS específica (como “.png”) y luego aplicar esa clase de forma selectiva donde sea necesario O puede aplicar el comportamiento globalmente a todos los elementos img.

También tenga en cuenta que si bien esto funcionará en imágenes de fondo CSS, no funcionará si esa imagen se repite o posiciona de alguna manera.

MÁS SOBRE ESTA TÉCNICA:
Komodo Media: Sustitución de imágenes por imágenes de fondo
SNIPPLR: uso de filtro para IE y un selector de atributos para Mozilla

Comportamiento y referencia a un archivo HTC

htc-método.png

La mejor parte de esta técnica es que es una sola línea en su archivo CSS que hace referencia a este archivo “.htc”, y ya está. El comportamiento aplica mágicamente la basura propietaria de Microsoft necesaria a los elementos de página necesarios y usted mismo obtuvo PNG transparentes alfa en IE.

MÁS SOBRE ESTA TÉCNICA:
Twin Helix: corrección de IE PNG

Usando JavaScript

js-ail.png

Dado que Javascript tiene esa capacidad mágica de monitorear y examinar todos los elementos de su página, puede ser ideal para buscar cualquier clase de aplicación en su sitio. Hay un par de razones realmente convincentes para seguir este camino. Uno, puede aplicar condicionalmente Javascript para cargar solo las versiones de IE que lo necesitan. Dos, es tan “configúrelo y olvídese” como el método HTC. Tres, no hay nada inválido en esto, por lo que no debe preocuparse por si su código o CSS no pasan la validación. Cuatro, Javascript tiene la capacidad de ver contenido “nuevo” agregado a una página (piense en AJAX) y actuar en consecuencia. Las técnicas anteriores solo funcionarán en la carga inicial de la página.

MÁS SOBRE ESTA TÉCNICA:
24 maneras: superligero
PNGHack en el código de Google

(Visited 5 times, 1 visits today)