Niquelao » 網誌存檔 » 表單控制項的字型大小與繼承

» Arxiu del weblog » Mides de font i herència en controls de formulari Niquelao - CSS Mides de font i herència en controls de formulari 30 de Maig, 2006 per Maroto I ara una cosa seriosa Suposadament, la mida de font hauria d’heretar-se de l’element pare. Per casualitat (no sabem qui ho va dir), hem sabut que els elements reemplaçats (bàsicament, controls de formulari, input) no segueixen aquest comportament (algunes vegades).

Aquí som per donar-vos la solució. Es tracta de fer una bateria de proves per determinar un patró de comportament entre diferents navegadors i proporcionar una solució compatible amb tots ells. La solució, al final. La llista de navegadors utilitzada és la que segueix: 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 prova consisteix a fer diferents canvis en les propietats de font aplicades als elements del codi següent:

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ó s’ofereixen els enllaços a les diferents proves realitzades. A la dreta de l’enllaç s’indiquen les propietats modificades en cada cas.

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

Exemple 1 (no-style) Exemple 2 (body: font-size) Exemple 3 (body: font-family) Exemple 4 (body: font) Exemple 5 (body,input: font-family) Exemple 6 (body: font-family / input: font-size) Exemple 7 (body: font-family / input: font) Exemple 8 (body: font-size / input: font-family) Exemple 9 (body,input: font-size) Exemple 10 (body: font-size / input: font) Exemple 11 (body,input: font) Exemple 12 (input: font-family) Exemple 13 (input: font-size) Exemple 14 (input: font) Exemple 15 (body: font / input: font-family) Exemple 16 (body: font / input: font-size) Exemple 17 (body,input: font-family inherit) Exemple 18 (body: font-family inherit/ input: font-size inherit) Exemple 19 (body,input: font-size inherit) Exemple 20 (body: font-size inherit/ input: font-family inherit) Exemple 21 (body: font / input: font-family inherit) Exemple 22 (body: font / input: font-size inherit) Exemple 23 (input: font inherit) Exemple 24 (input: font-size font-family inherit) Exemple 25 (body,input: inherit) S’ha observat un comportament similar entre navegadors Firefox i Galeó, també similar entre Konqueror i IE i amb certes variants tenim Opera.

Podem concloure, amb un percentatge d’encert mínim , que seria suficient amb definir una mida de font relativa (x.ej. 1em ) per als input. Si s’ha definit una mida de font al cos (font-size), la mida de font del control de formulari es redimensionarà adequadament, i si no s’ha definit res al cos, s’adaptarà a la mida de text de la resta del document. body { font-size: 62.5%; } input { font-size: 1em; } Segurament s’observarà una petita diferència, segons el navegador utilitzat. Per acabar de rematar la feina es pot igualar el tipus de font, mitjançant la seva corresponent declaració al cos. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Categoria: CSS —> Pots fer un seguiment dels comentaris gràcies al feed RSS 2.0 .

També podries deixar un comentari , o enviar un trackback des del teu lloc. Article anterior: Una festa Niquelada Article següent: Layout a tres columnes i marcatge… “el just” Deixa el teu comentari Els camps Nom i Email són obligatoris Afegeix-nos a… Tags que destaquem en general accessibilitat bert bos blockquote bug canyes cites cite comportament coneixement CSS escuas estàndards fieldset Firefox format formulari fonts hidden ie IE 7 informació javascript legend llista niquelando obligatori opera platja q squash vacances w3c WCAG xhtml Aquesta obra està sota una llicència 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.