Niquelao » Archivo del weblog » Tamaños de fuente y herencia en controles de formulario

» Archivo del weblog » Tamaños de fuente y herencia en controles de formulario Niquelao - CSS Tamaños de fuente y herencia en controles de formulario 30 de Mayo, 2006 por Maroto Y ahora algo en serio Supuestamente, el tamaño de fuente debería heredarse del elemento padre. Por casualidad (no sabemos quien lo dijo), hemos sabido que los elementos reemplazados (basicamente, controles de formulario, input) no siguen este comportamiento (algunas veces).

Aquí estamos para daros la solución. Se trata de realizar una batería de pruebas para determinar un patrón de comportamiento entre diferentes navegadores y proporcionar una solución compatible con todos ellos. La solución, al final. La lista de navegadores utilizada es la que sigue: Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Mozilla Firefox 1.5.0.3 (W) Opera 8.54 (W) Mozilla Firefox 1.5.0.3 (L) Opera 9 (L) Konqueror 3.5.2 Galeon 2.0.1 La prueba consiste en realizar diferentes cambios en las propiedades de fuente aplicadas a los elementos del siguiente código:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Curabitur commodo. Phasellus quis dui ut est scelerisque tempus. Sed faucibus nisl consequat dolor. Vestibulum ornare laoreet nunc. Nunc euismod nulla et libero.

In dictum. Sed fringilla. Ut nisi neque, porttitor vitae, pretium vel, sodales a, massa. Vestibulum orci. Quisque pellentesque, leo vel posuere luctus, ante nisl lobortis mauris, in tempus pede nibh at nibh.

Etiam vehicula varius felis. Sed dapibus risus nec ante. In ultricies. Ut lacinia felis ac eros. Integer ultricies libero at velit.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Vestibulum adipiscing venenatis purus. Mauris consequat, libero eget lacinia aliquam, risus nibh gravida ante, eu consequat neque nibh ut lorem. Nam quam.

A continuación se ofrecen los enlaces a las distintas pruebas realizadas. A la derecha del enlace se indican las propiedades modificadas en cada caso.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Ejemplo 1 (no-style) Ejemplo 2 (body: font-size) Ejemplo 3 (body: font-family) Ejemplo 4 (body: font) Ejemplo 5 (body,input: font-family) Ejemplo 6 (body: font-family / input: font-size) Ejemplo 7 (body: font-family / input: font) Ejemplo 8 (body: font-size / input: font-family) Ejemplo 9 (body,input: font-size) Ejemplo 10 (body: font-size / input: font) Ejemplo 11 (body,input: font) Ejemplo 12 (input: font-family) Ejemplo 13 (input: font-size) Ejemplo 14 (input: font) Ejemplo 15 (body: font / input: font-family) Ejemplo 16 (body: font / input: font-size) Ejemplo 17 (body,input: font-family inherit) Ejemplo 18 (body: font-family inherit/ input: font-size inherit) Ejemplo 19 (body,input: font-size inherit) Ejemplo 20 (body: font-size inherit/ input: font-family inherit) Ejemplo 21 (body: font / input: font-family inherit) Ejemplo 22 (body: font / input: font-size inherit) Ejemplo 23 (input: font inherit) Ejemplo 24 (input: font-size font-family inherit) Ejemplo 25 (body,input: inherit) Se ha observado un comportamiento similar entre navegadores Firefox y Galeón, también similar entre Konqueror e IE y con ciertas variantes tenemos a Opera.

Podemos concluir, con un porcentaje de acierto mínimo , que sería suficiente con definir un tamaño de fuente relativo (x.ej. 1em ) para los input. Si se ha definido un tamaño de fuente en el cuerpo (font-size), el tamaño de fuente del control de formulario se redimensionará adecuadamente, y si no se ha definido nada en el cuerpo, se adaptará al tamaño de texto del resto del documento. body { font-size: 62.5%; } input { font-size: 1em; } Seguramente se observará una pequeña diferencia, según el navegador utilizado.

Para terminar de rematar la faena se puede igualar el tipo de fuente, mediante su correspondiente declaración en el cuerpo. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Categoría: CSS —> Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0 . También podrías dejar un comentario , o enviar un trackback desde tu sitio. Artículo anterior: Una fiesta Niquelada Artículo siguiente: Layout a tres columnas y marcado… “el justo” Deja tu comentario Los campos Nombre y Email son obligatorios Añádenos a…

Tags que destacamos en general accesibilidad bert bos blockquote bug cañas citas cite comportamiento conocimiento CSS escuas estándares fieldset Firefox formato formulario fuentes hidden ie IE 7 información javascript legend lista niquelando obligatorio opera playa q squash vacaciones w3c WCAG xhtml Esta obra está bajo una licencia de Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.