Introducción
La palabra Hack ligada a nuestro contexto no tiene la misma interpretación que su traducción tradicional (ej: corte). Veamos la introducción de la definición sintética de Hack en wikipedia.
Hack has several meanings in the technology and computer science fields: a clever or quick fix to a computer program problem; a clumsy or inelegant solution to a problem; or a modification of a program or device to give the user access to features that were otherwise unavailable to them.
Seguida de nuestra interpretación ...
Hack tiene varios significados en los campos de la ciencia de la tecnología y computación: una forma inteligente o rápida de arreglar un problema de un programa de computación; una solución torpe o poco elegante a un problema; o una modificación de un programa o aparato para dar acceso al usuario a características que de otra manera estarían inaccesibles a ellos.
Finalizando, todos sabemos que es un hacker.
Cuando se intenta constuir un maquetado perfecto usando diseños en CSS hay probabilidades de que no funcione en IE. Marcamos a continuación los 7 hacks más importantes de hojas de estilo que usaremos frecuentemente para el diseño perfecto.
1. Hack de Modelo de Caja
El modelo de caja es usado para solucionar un problema de interpretación en exploradores anteriores a IE 6, dónde el border y padding están incluidos en el ancho width de un elemento.
2. Comentarios Condicionales
Estos comentarios condicionales funcionan sólo para IE y no están soportados por ningún otro explorador. Para otros sólo son comentarios simples y por lo tanto, es seguro su uso ya que no causan efecto alguno en el browser.
A continuación se presentan los usos más típicos:
El código de arriba es aplicado a todas las versiones de IE, tales como 5.01, 5.5 y 6.0; pero si ahora queremos aplicarlo a versiones específicas, aplicaremos la siguiente condición:
Después de terminar las pruebas eliminamos todos los hacks para separar el/los archivo/s; de esta manera el CSS principal queda limpio y ordenado. Este nuevo archivo, que se encarga de funcionar solo para las versiones correspondientes de IE, se incluye en la cabecera (head) del archivo principal dentro los comentarios condicionales.
A continuación se presentan las posibles condiciones:
3. Min-width y Max-width de un elemento
IE no interpreta este comando por lo que necesitamos una nueva manera de hacer este trabajo en este explorador. Tomemos un ejemplo rápido, necesitamos aplicar esto a un 'div' con 'id="wrapper"':
Luego creamos nuestros comandos CSS para crear un ancho mínimo de 750px:
También podrías querer combinar este ancho mínimo de 750px con un ancho máximo de 1220px:
Otra Alternativa para un alto mínimo sin Javascript es usar un muy buen hack de Dustin Diaz.
4. Easy Selectors (Selectores sencillos)
La mayoría de los hacks de CSS lidian con los bugs de selectores. Abajo hay una lista de las diferentes versiones de IE y los comienzos de los selectores que son conocidos para seleccionar elementos en ellos. Todos esos selectores usan CSS válido.
5. Whatever: hover (cualquier-elemento: hover).
El selector :hover permite implementar efectos visuales al producirse este evento (algo así como un mouseover) en elementos html.
La mayoría de los browsers no tienen problemas, excepto IE. Para esto existe una solución. Explayaremos más adelante sobre este caso, por lo pronto dejamos este enlace que explica su solución.
6. Transparencias en PNG
IE no soporta las transparencias de imágenes PNGs. Cuando uno publica este tipo de archivos la transparencia se pierde reemplazándose por un fondo grisáceo horrible. Y olvidemos nos de imágenes Gif; ya que primero: su calidad es acotada; segundo: tampoco soporta fondos parcialmente transparentes (canal alpha). Gif permite una imagen recortada, pero no transparencias.
Existe un Hack para que IE pueda imprimir en forma correcta las transparencias. Estos son los pasos:
Otra solución puede encontrarse en Komodomedia
7. Stylegala- No más Hacks CSS.
Este método simplemente detecta el tipo browser y versión para que luego, en función de estos datos, el servidor entregue al cliente una hoja de estilos css acorde.
Prácticamente toda la tarea se encuentra del lado servidor, el cual adpta el estilo del site. Se puede utilizar PHP, ASP, etc. Este es un ejemplo actual realizado en PHP denominado No More CSS Hack.
Cabeza de Ratón » Los 7 Hacks CSS que deberíamos usar dice,
December 3, 2007 at 16:26
[…] Empecemos … […]
Germán (el Compañero) dice,
December 4, 2007 at 4:24
Es que ahora ya comprendo un poco mejor a qué te referíais con la redacción, yo me hacía a una idea más formal, pero el artículo, quedó muy bueno… creo que la idea la tengo un poquito más clara, sólo un poquito no más! sólo un poquito!…
En cuanto pueda (bueno, cuándo quiera… :P)…voy a hacer unos ejemplitos…
See you!
RetroFOX dice,
December 4, 2007 at 15:49
Si … lo del enfoque informal puede ayudar la lectura del aburrido lector (disculpe usted).
Saludos Germán.
Noupe dice,
December 5, 2007 at 5:37
You should at least add a link to the original article, instead of translating it and adding it to your site.
Original Article is here :
http://www.noupe.com/how-tos/7-css-hacks-you-cannt-live-without.html
RetroFOX dice,
December 5, 2007 at 9:59
No hago referencia al artículo original porque no le he sacado Provecho. Puede ser un error de mi parte, pero me ha dado un poco de bronca el artículo que has escrito. Vos no has hecho referencia a copias textuales que has sacado de otras fuentes. Yo por lo menos he generado casi un contenido nuevo.
Saludos.
Pablo dice,
January 5, 2008 at 19:53
Muy buenos consejos..los pondre en practica a la brevedad…
saludos
RetroFOX dice,
January 6, 2008 at 12:44
Si, es bueno saberlo: pero también es bueno saber que estos hacks irán muriendo poco a poco; la evolución es un hecho y muchos de estos artilugios no los usaremos más.
Saludos y gracias por tu comentario.