Niquelao » Archivio del weblog » Dimensioni dei caratteri ed ereditarietà nei controlli dei moduli

» Archivio del weblog » Dimensioni dei font ed ereditarietà nei controlli dei form Niquelao - CSS Dimensioni dei font ed ereditarietà nei controlli dei form 30 maggio 2006 di Maroto E ora qualcosa di serio Suppostamente, la dimensione del font dovrebbe essere ereditata dall’elemento padre. Per caso (non sappiamo chi lo abbia detto), abbiamo scoperto che gli elementi sostituiti (fondamentalmente, controlli dei form, input) non seguono questo comportamento (a volte).

Eccoci qui per darvi la soluzione. Si tratta di realizzare una serie di test per determinare un modello di comportamento tra diversi browser e fornire una soluzione compatibile con tutti loro. La soluzione, alla fine. La lista dei browser utilizzati è la seguente: 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 Il test consiste nel realizzare diversi cambiamenti nelle proprietà dei font applicate agli elementi del seguente codice:

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.

Di seguito sono forniti i link ai diversi test realizzati. A destra del link sono indicate le proprietà modificate in ciascun caso.

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

Esempio 1 (no-style) Esempio 2 (body: font-size) Esempio 3 (body: font-family) Esempio 4 (body: font) Esempio 5 (body,input: font-family) Esempio 6 (body: font-family / input: font-size) Esempio 7 (body: font-family / input: font) Esempio 8 (body: font-size / input: font-family) Esempio 9 (body,input: font-size) Esempio 10 (body: font-size / input: font) Esempio 11 (body,input: font) Esempio 12 (input: font-family) Esempio 13 (input: font-size) Esempio 14 (input: font) Esempio 15 (body: font / input: font-family) Esempio 16 (body: font / input: font-size) Esempio 17 (body,input: font-family inherit) Esempio 18 (body: font-family inherit/ input: font-size inherit) Esempio 19 (body,input: font-size inherit) Esempio 20 (body: font-size inherit/ input: font-family inherit) Esempio 21 (body: font / input: font-family inherit) Esempio 22 (body: font / input: font-size inherit) Esempio 23 (input: font inherit) Esempio 24 (input: font-size font-family inherit) Esempio 25 (body,input: inherit) È stato osservato un comportamento simile tra i browser Firefox e Galeon, anch’esso simile tra Konqueror e IE e con alcune varianti abbiamo Opera.

Possiamo concludere, con una percentuale di successo minima, che sarebbe sufficiente definire una dimensione del font relativa (ad es. 1em) per gli input. Se è stata definita una dimensione del font nel body (font-size), la dimensione del font del controllo del form si ridimensionerà adeguatamente, e se non è stato definito nulla nel body, si adatterà alla dimensione del testo del resto del documento. body { font-size: 62.5%; } input { font-size: 1em; } Sicuramente si osserverà una piccola differenza, a seconda del browser utilizzato.

Per completare il lavoro si può eguagliare il tipo di font, mediante la sua corrispondente dichiarazione nel body. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Categoria: CSS —> Puoi seguire i commenti grazie al feed RSS 2.0 . Potresti anche lasciare un commento , o inviare un trackback dal tuo sito. Articolo precedente: Una festa Niquelada Articolo successivo: Layout a tre colonne e markup… “il giusto” Lascia il tuo commento I campi Nome ed Email sono obbligatori Aggiungici a…

Tag che evidenziamo in generale accessibilità bert bos blockquote bug canne citazioni cite comportamento conoscenza CSS escuas standard fieldset Firefox formato formulario font hidden ie IE 7 informazione javascript legend lista niquelando obbligatorio opera spiaggia q squash vacanze w3c WCAG xhtml Quest’opera è sotto una licenza 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.