Yo también lo he visto… 11 de Noviembre de 2006, por Rumoroso
Este artículo lo voy a comenzar a la inversa. No es que me proponga escribirlo de espaldas sino que voy a comenzar citando (blockquote-ando) el consejo con el que lo concluiré:
Salvo que seamos originales y queramos mostrar ese recuadro generado por el campo oculto (“casi oculto”), la solución es simple. Le aplicamos “
display: none” y arreglado. Mi consejo es que no se traten de marcar los campos ocultos con una clase para luego aplicarle la propiedad que acabo de escribir. En su lugar se puede aprovechar el que Firefox entiende e interpreta los selectores de atributos:[css]input[type=hidden] { display: none; }[/css]
Al turrón…
No, no es que este artículo trate sobre cómo maquetar lo que teóricamente debería ir oculto (un campo tipo hidden), y digo teóricamente porque ocurre que en el navegador Firefox, cuando tenemos activa la CSS y declaramos determinados valores para la propiedad “display” sobre los campos de formulario, los campos ocultos dejan de serlo pasando a ser renderizados por el navegador (tal y como se puede apreciar si se observa el ejemplo con el navegador Firefox o, si confias en nosotros y crees lo que decimos, en los siguientes pantallazos).
Llegados a este punto podrían surgir preguntas: ¿por qué aplicar un display sobre un campo “hidden“?; si la finalidad de un campo oculto es pasar información sin mostrarse, ¿por qué se iba a querer mostrar?;… La respuesta es fácil y quizás se comprenda mejor con un ejemplo:
Tenemos el siguiente formulario:
[html]
[/html]…al que le aplicamos unos estilos básicos:
[css]form {
border: 2px outset;
background-color: #CCCCCC;
}
fieldset {
margin: 20px auto;
width: 500px;
border: 1px solid;
padding: 10px;
}
legend {
font-size: 1.5em;
color: #000;
}
label {
font-weight: bold;
font-size: 1.1em;
}
fieldset input {
display: block;
width: 90%;
height: 1.3em;
line-height: 1.3em;
margin-left: 5%;
font-size: 1em;
}
p {
text-align: center;
margin: 1em 0;
}
fieldset p {
text-align: left
}[/css]
Le hemos aplicado un display: block a los campos de formulario para que provoquen el salto permitiendo que el texto que los etiqueta quede por encima. La disposición inmediatamente por encima de los campos de texto de las etiquetas favorece que la caja anónima de texto que generan tenga mayor superficie de contacto sobre la caja del campo, con lo que visualmente transmite mejor y de manera más rápida la asociación entre ambos (además, es la manera en la que me gusta ponerlo, y punto). Quizás se entienda mejor visualmente:
En la imagen anterior se muestran tres formas de maquetar el mismo formulario. En la primera se coloca el texto del label por encima del campo, con lo que su superficie de contacto es mayor. En las otras dos se puede apreciar cómo disminuye dicha superficie si el texto se situa junto al campo que etiqueta. Además, la tercera muestra el problema de querer alinear los campos entre si.
Además, de esta manera se podrían alinear a la izquierda todos los campos de texto, cosa que puede ser desable en muchas ocasiones y que puede crear conflictos cuando la etiqueta antecede al campo (dado que estas no suelen tener la misma longitud).
La cuestión es que al darle esta propiedad a los “input“, en Firefox, y únicamente en Firefox, se renderiza el campo oculto, haciéndolo como un bloque vacío. ¿Comportamiento correcto o bug? Si observamos el comportamiento de IE se apreciará que esto no ocurre. A estas alturas, los detractores de IE ya estarán diciendo que Firefox hace lo correcto, pues en los castings le suelen seleccionar para el papel del bueno. En este caso que cada uno saque sus conclusiones, no sin antes plantear un par de cosas (bueno, cuatro, lo de “un par” es una forma de hablar):
- ¿Acaso algún programador quiere mostrar la caja creada por un campo oculto?
- ¿Acaso el diseñador piensa ignorar lo que el programador hace y pretende mostrarlo por su cuenta?
- ¿Acaso no dice la especificación:
hidden controls: Authors may create controls that are not rendered but whose values are submitted with a form. Authors generally use this control type to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP. The INPUT element is used to create a hidden control
. (hidden control)? - ¿Qué finalidad puede tener el mostrar la caja vacía creada por el campo oculto?
Una solución
Salvo que seamos originales y queramos mostrar ese recuadro generado por el campo oculto (o mejor “casi oculto”), la solución es simple. Le aplicamos “display: none” y arreglado. Mi consejo es que no se traten de marcar los campos ocultos con una clase para luego aplicarle la propiedad que acabo de escribir. En su lugar se puede aprovechar el que Firefox entiende e interpreta los selectores de atributos:
[css]input[type=hidden] { display: none; }[/css]
…y una reflexión
¿Se habrán planteado los desarrolladores de Firefox el tratar de mostrar otras cosas ocultas tales como el aura, el alma, fantasmas,…? ¿Esperaré a que consigan hacerlo antes de enviar este artículo a Iker Jiménez?
Categoría: CSS
Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.
