Nueva técnica Css de reemplazo de Imágenes. 6.3.12
Nueva técnica Css de reemplazo de Imágenes.
De los creadores de HTML5 Boilerplate llega ésta nueva técnica Css de reemplazo de imágenes como sustitutiva de las basadas en text-indent y por lo tanto libre de los problemas que su uso conllevaba aparejados
Las ventajas de éste nuevo método, según sus autores son las siguientes:
¤ No se dibuja ningún tipo de caja fuera de pantalla, así que no hay riesgos de problemas relacionados con el rendimiento en viejos dispositivos basados en IOS.
¤ No es necesario especificar ningún text-align ni prevenir desbordamientos con overflow: hidden ya que los textos son reducidos a cero. No ocupan nada de espacio. Ni 1 mísero px.
¤ No hay necesidad de ocultar los <BR/> o marcar todo el HTML como display: inline porque a diferencia de los enfoques basados en text-indent, este método no es se ve afectado por esos escenarios.
¤ Los estilos que se necesitan son menos como resultado de estas mejoras.
El código Css para el reemplazo de imágenes:
.ir {
border:0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
Una explicación a la regla Css:
- font: 0/0 a
- En la propiedad acortada "font" el valor 0/0 reduce el tamaño de la fuente y la altura de línea a 0. El valor "a" es el nombre de la familia tipográfica. El validador de Css no admite el uso de "0/0" en la propiedad acortada pero todos los navegadores lo aceptan.
- text-shadow: none
- garantiza que cualquier sombra en texto heredada es eliminada, de lo contrario se mostraría sobre la imagen.
- color: transparent
- Sólo es necesaria en los navegadores que no hacen completamente invisible al texto. Está incluido por el momento por si acaso hubiese navegadores móviles que lo necesiten.
Las propiedades border y background se mantienen por cuestiones referentes a los enlaces, a los submit inputs o buttons de los formularios
Qué es la plantilla "HTML5 Boilerplate"
La siguiente información está sacada de la propia página HTML5 Boilerplate. Al final tienes un enlace a ella.
HTML5 Boilerplate es un excelente punto de partida para construir sitios HTML/CSS/JS rápidos, robustos y de futuro.
Tras más de tres años en desarrollo iterativo, usted obtiene lo mejor de las mejores prácticas ya incorporadas en el proyecto: normalización entre navegadores, optimizaciones de rendimiento, incluso características opcionales como Ajax y Flash cross-domain. Un archivo de configuración de Apache .htaccess de arranque que configura las reglas de caché y prepara a su sitio para servir video HTML5, usar @font-face, y activa la compresión gzip.
Boilerplate no es un framework, ni tampoco sigue ninguna filosofía de desarrollo, son sólo algunos trucos para que puedas arrancar tu proyecto de una manera rápida y con buenos cimientos.
¿Por qué es tan increíble?
- Compatibilidad entre navegadores (incluyendo IE6)
- Preparado para HTML5. Usa las nuevas etiquetas con total seguridad.
- Recomendaciones sobre caché y compresión para alcanzar el nivel A de rendimiento
- Configuración por defecto basada en buenas prácticas
- Optimizaciones para navegadores móviles
- Mejora progresiva con degradación gradual … sí, lo conseguimos!
- Clases específicas para IE, para tener máximo control sobre los distintos navegadores.
- Prácticas clases .no-js y .js para dar estilos basados en la capacidad del navegador
- ¿Quiéres escribir unit tests pero no tienes tiempo? Una completa e interconectada test suite te está esperando.
¿Por qué es aún más impresionante?
- ¿Medir el rendimiento de Javascript… en IE6 e IE7? Claro, no hay problema.
- Ocultado de console.log para que no falle en ningún lado por error.
- ¡Nunca fallarás con tu doctype o el marcado!
- Perfeca hoja de estilo para impresión, optimizada para la velocidad
- Marcado y estructura CSS adaptables a iOS, Android, Opera Mobile.
- Ajuste pngfix para IE6 incluído.
- Clases .clearfix, .visuallyhidden para diseñar con sabiduría y accesibilidad
- Fichero .htaccess que permite un correcto uso del HTML5 y una mayor velocidad de carga de página
- Alojamiento CDN de jQuery con sistema de anticaídas locales.
- ¿Piensas que son muchas cosas? En HTML5 Boilerplate puedes borrar lo que no te guste. :)
Para saber más sobre HTML5 Boilerplate pincha aquí.
Bonus
Con posterioridad a la salida de mi artículo, Nicolas Gallagher ha posteado en su página su presentación de esta técnica. Puedes verlo [ING] aquí.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso