Box Model Hack

Contenido

Tenemos ahora un DIV al que le aplicamos la clase "content".

Este DIV tiene un estilo semejante al DIV "boxtest" anterior:

div.content { 
  border:20px solid;
  padding:30px;
  background: #ffc;
}

con un importante añadido. Se ha añadido una segunda regla de estilo que aprovecha un parsing bug de IE5/Windows e IE5.5/Windows, de modo que define una anchura (width) para a continuación sobreescribirla con otra.


div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

Este DIV, con el borde (border) incluido, debería tener la misma anchura que la barra de color azul tanto si lo visualizamos con IE5/Windows y con IE5.5/Windows.

De forma complementaria, añadimos una nueva regla imediatemente a continuación de la regla de estilo pàra ayudar a que los agentes de usuario que soportan los selectores CSS2 y el Modelo de Cajas CSS (CSS Box Model) pero que presentan el mnismo parsing bug que IE5/Windows e IE5.5/Windows. A esta regla se la conoce con el nombre de "sea amable con Opera 5". Hay que asegurarse de que no se deja ningún espacio en blanco alrededor de '>'.

html>body .content {
  width:300px;
}

Por último hay que observar que los agentes de usuario que presentan el mencionado parsing bug ilustrado por el valor "\"}\"" podrían, potencialmente, ignorar la siguiente regla, de modo que "sea amable con Opera" puede aplicarse también a estos agentes de usuario.

Para demostrar que el parseo CSS de los agentes de usuario se ha recuperado en este punto se añade iuna nueva regla inmediatamente después.

p.ruletest { color: blue }

Este párrafo tiene la clase class="ruletest" y ello deberñia hacer que se visualizase de color azul. Si se visualizase de color rojo, significaría que una regla anterior está teniendo efecto indebidamente. hay que notar que esta úiltima regla CSS (.rulerset) es innecesaria y aparece aquí sólo con el propósito de ilustrar cómo se procesan las reglas del Box Model Hack.

Anexos

Evitar el uso del innecesario prólogo ?xml

20020404 Prerit Bhakta observó que si se incluye el prólogo ?xml:


<?xml version="1.0"?>

IE6/Windows usará el modo "quirky" para el box model.

Desde que el prólogo ?xml no es necesario, se recomienda simplemente omirirlo.

Validar la hoja de estilo como archivo independiente del medio

20020903 Jonathan Horn observó que el validador CSS del W3C devolvía un error cuando la propiedad 'voice-family' es declarada en una hoja de estilos para el medio 'screen'.

Como ya observé en los comentarios de Mezzoblue, de Dave Shea, se trata de un error del validador CSS del W3C. El validador debería enviar un mensaje de advertencia (warning), pero no un error, cuando se usan las propiedades que no están soportadas por un tipo de medio particular; y ello ya está comunicado el W3C:

Mi consejo: validar la hoja de estilos como un archivo independiente del tipo de medio, de modo que sepas que estás usando CSS válido y luego usa @import con un tipo de medio concreto, si es necesario.

Bidouillage de Boîtes

20020915 Christophe Ducamp ha puesto a disposición de la comunidad francófona una traducción a francés del Box Model Hack.

Portuguese Box Model Hack

20040210 Mauricio Samy Silva ha puesto a disposición de la comunidad de habla portuguesa una traducción a portugués del Box Model Hack.

Modelo de cajas

20040802 Daniel Torres Burriel ha puesto a disposición de la comunidad hispanohablante una traducción a español del Box Model Hack