Niquelao » Arquivo do blog » Tamanhos de fonte e herança em controles de formulário

» Arquivo do blog » Tamanhos de fonte e herança em controles de formulário Niquelao - CSS Tamanhos de fonte e herança em controles de formulário 30 de Maio, 2006 por Maroto E agora algo a sério Supostamente, o tamanho da fonte deveria ser herdado do elemento pai. Por casualidade (não sabemos quem o disse), soubemos que os elementos substituídos (basicamente, controles de formulário, input) não seguem este comportamento (algumas vezes).

Aqui estamos para vos dar a solução. Trata-se de realizar uma bateria de testes para determinar um padrão de comportamento entre diferentes navegadores e proporcionar uma solução compatível com todos eles. A solução, no final. A lista de navegadores utilizada é a que segue: 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 O teste consiste em realizar diferentes alterações nas propriedades de fonte aplicadas aos elementos do seguinte 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 seguir apresentam-se os links para os diferentes testes realizados. À direita do link indicam-se as propriedades modificadas em cada caso. Exemplo 1 (no-style) Exemplo 2 (body: font-size) Exemplo 3 (body: font-family) Exemplo 4 (body: font) Exemplo 5 (body,input: font-family) Exemplo 6 (body: font-family / input: font-size) Exemplo 7 (body: font-family / input: font) Exemplo 8 (body: font-size / input: font-family) Exemplo 9 (body,input: font-size) Exemplo 10 (body: font-size / input: font) Exemplo 11 (body,input: font) Exemplo 12 (input: font-family) Exemplo 13 (input: font-size) Exemplo 14 (input: font) Exemplo 15 (body: font / input: font-family) Exemplo 16 (body: font / input: font-size) Exemplo 17 (body,input: font-family inherit) Exemplo 18 (body: font-family inherit/ input: font-size inherit) Exemplo 19 (body,input: font-size inherit) Exemplo 20 (body: font-size inherit/ input: font-family inherit) Exemplo 21 (body: font / input: font-family inherit) Exemplo 22 (body: font / input: font-size inherit) Exemplo 23 (input: font inherit) Exemplo 24 (input: font-size font-family inherit) Exemplo 25 (body,input: inherit) Observou-se um comportamento semelhante entre os navegadores Firefox e Galeón, também semelhante entre Konqueror e IE e com certas variantes temos o Opera.

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

Podemos concluir, com uma percentagem de acerto mínima , que seria suficiente definir um tamanho de fonte relativo (p.ex. 1em ) para os input. Se se definiu um tamanho de fonte no corpo (font-size), o tamanho de fonte do controle de formulário redimensionar-se-á adequadamente, e se não se definiu nada no corpo, adaptar-se-á ao tamanho de texto do resto do documento. body { font-size: 62.5%; } input { font-size: 1em; } Seguramente observar-se-á uma pequena diferença, segundo o navegador utilizado.

Para terminar de rematar a tarefa pode-se igualar o tipo de fonte, mediante a sua correspondente declaração no corpo. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Categoria: CSS —> Podes fazer um acompanhamento dos comentários graças ao feed RSS 2.0 . Também poderias deixar um comentário , ou enviar um trackback desde o teu site. Artigo anterior: Uma festa Niquelada Artigo seguinte: Layout a três colunas e marcação… “o justo” Deixa o teu comentário Os campos Nome e Email são obrigatórios Añádenos a…

Tags que destacamos em geral acessibilidade bert bos blockquote bug cañas citas cite comportamento conhecimento CSS escuas estándares fieldset Firefox formato formulário fontes hidden ie IE 7 informação javascript legend lista niquelando obrigatório opera playa q squash férias w3c WCAG xhtml Esta obra está sob uma licença 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.