Last Updated on Wednesday, 1 June 2011 11:39
Written by Admin
Wednesday, June 1st, 2011
El Modelo de la Caja Hack para CSS
El cdigo de tablas es excelente para tabular datos, pero realmente se debera utilizar CSS (Hojas de Estilo en Cascada) para el diseo de su pgina. Cuando dejamos el hbito de utilizar tablas para avanzar y utilizar hojas de estilo en cascada, posicionando elementos para el diseo de una pgina es importante familiarizarse con el modelo de la caja W3C. Cuando comiences a utilizar el modelo de caja probablemente te parecer un poco complicado pero este es un concepto muy importante que se debe entender correctamente. Desafortunadamente, manejar este modelo de caja W3C no es ˙nicamente lo que necesitas para obtener un diseo compatible con el navegador.
A continuacin se profundiza en el diseo de caja, los errores de los navegadores y lo que debemos hacer acerca de esto.
Nota: Si bien los editores de diseo son muy buenos a la hora de presentarlos y la aplicacin del estilo de cascada a estos diseos, el estado actual de desarrollo del navegador deja mucho que desear cuando se trata de posicionamiento CSS. Debido a esto los hack de CSS algunas veces tienen que convencer a ciertos navegadores para jugar con dichos posicionamientos.
Actualmente ning˙n editor de diseos puede hacerle frente a estos errores de posicionamiento la edicin de texto manual es necesario para de alguna forma evitar estos errores.
Este artculo va dirigido a personas familiarizadas con la sintaxis CSS y su uso, si no tienes conocimiento acerca de lo que es el CSS recomiendo leer el artculo de Adrin Senior, llamado, una introduccin al CSS.
El Modelo de Caja
Una estructura de tablas se compone de clulas rectangulares dentro de un rectngulo. Una CSS caja puede imaginarse como una tabla con una sola clula. Como a una caja se le pueden dar bordes, mrgenes transparentes fuera de los bordes (mantiene otras cajas a distancia) y un relleno transparente dentro de los bordes (mantiene el contenido la distancia de esos bordes) estos pueden ser aplicados a cada lado de la caja por separado. El interior es el rea de contenido que como habrs adivinado, tiene el contenido de la caja.
Si la caja no tiene las dimensiones dadas se llama fluido o liquido. Esto significa que horizontalmente se llena la caja contenedora que lo rodea y expande verticalmente para incluir cualquier contenido en su interior. En su mayor parte, como cajas de lquido son bastante fiables.
Pero digamos que usted le quiere dar dimensiones horizontales y verticales a la caja. Naturalmente estas propiedades se denominan ancho y altura. Pero Qu es exactamente ancho despus de todo se encuentra el rea de contenido, relleno, borde y finalmente, el margen en el exterior. El caso es que el W3C decidi que la dimensin de la anchura va desde el borde interior del relleno izquierdo hasta el borde interno del relleno derecho. Si no hay relleno, el ancho se mide desde el borde interior del borde izquierdo hasta el borde interior del borde derecho.
No todos los navegadores manejan esto correctamente. Los antiguos navegadores de IE implementan de una manera diferente la aplicacin del modelo de caja por lo que un trabajo en torno a esto tuvo que ser creado.
Infame Modelo de Caja de hack
Hay varias versiones de modelos de caja hack pero todos buscan alimentar IE 5X/win (y solamente ese navegador) un valor de anchura o altura de tal manera que le va a proporcionar a la caja las mismas dimensiones como un navegador usando el estndar de la caja modelo. Aqu hay un ejemplo de una pgina con el modelo de caja hack en uso. Aqu hay es otro ejemplo de una pgina con el modelo de caja hack en uso.
Siendo tan complejos como son algunas veces los navegadores pueden mostrar el cdigo CSS y (por un motivo u otro) lo ignoran totalmente. El primer modelo de caja hack fue el viejo Tantek hack el cual toma ventaja de un error IE5.X/win al analizar el carcter de escape./. Esto hace el trabajo pero tiene algunos problemas y es difcil de entender y recordar, esto afecta negativamente Opera que requiere de otro hack y causa que Nav4 ignore todos los estilos CSS lo que definitivamente no es bueno.
Luego aparece el modelo de caja hack simplificado con nuevos cambios pero todava afectan el Nav4. Finalmente aparece el Tan Hack (nombrado por Edwardson Tan) que afecta solamente los navegadores IE y no otros. Es simple y fcil de recordar y no puede afectar en el futuro a los navegadores. Un hack milagroso!
Puedes leer ms acerca del problema del modelo de caja en CMX.
Blogging
