Niquelao » Weblogarchief » Lettergroottes en overerving in formulierelementen

» Archief van het weblog » Lettergroottes en overerving in formuliervelden Niquelao - CSS Lettergroottes en overerving in formuliervelden 30 mei 2006 door Maroto En nu iets serieus Verondersteld wordt dat de lettergrootte wordt overgeërfd van het bovenliggende element. Toevallig (we weten niet wie het gezegd heeft) hebben we vernomen dat vervangende elementen (in principe formuliervelden, zoals input) dit gedrag niet altijd volgen.

Hier zijn we om jullie de oplossing te bieden. Het komt erop neer een reeks tests uit te voeren om een gedragspatroon tussen verschillende browsers vast te stellen en een oplossing te bieden die met allemaal compatibel is. De oplossing volgt aan het einde. De gebruikte lijst van browsers is als volgt: 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 De test bestaat uit het aanbrengen van verschillende wijzigingen in de op lettertypen betrekking hebbende eigenschappen die worden toegepast op de elementen in de volgende code:

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: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

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

Hieronder vindt u de links naar de verschillende uitgevoerde tests. Rechts van de link worden de in elk geval gewijzigde eigenschappen vermeld.

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Voorbeeld 1 (no-style) Voorbeeld 2 (body: font-size) Voorbeeld 3 (body: font-family) Voorbeeld 4 (body: font) Voorbeeld 5 (body,input: font-family) Voorbeeld 6 (body: font-family / input: font-size) Voorbeeld 7 (body: font-family / input: font) Voorbeeld 8 (body: font-size / input: font-family) Voorbeeld 9 (body,input: font-size) Voorbeeld 10 (body: font-size / input: font) Voorbeeld 11 (body,input: font) Voorbeeld 12 (input: font-family) Voorbeeld 13 (input: font-size) Voorbeeld 14 (input: font) Voorbeeld 15 (body: font / input: font-family) Voorbeeld 16 (body: font / input: font-size) Voorbeeld 17 (body,input: font-family inherit) Voorbeeld 18 (body: font-family inherit/ input: font-size inherit) Voorbeeld 19 (body,input: font-size inherit) Voorbeeld 20 (body: font-size inherit/ input: font-family inherit) Voorbeeld 21 (body: font / input: font-family inherit) Voorbeeld 22 (body: font / input: font-size inherit) Voorbeeld 23 (input: font inherit) Voorbeeld 24 (input: font-size font-family inherit) Voorbeeld 25 (body,input: inherit) Er is een vergelijkbaar gedrag waargenomen tussen Firefox- en Galeon-browsers, eveneens vergelijkbaar tussen Konqueror en IE, terwijl Opera bepaalde varianten vertoont.

We kunnen concluderen, met een minimaal slagingspercentage, dat het volstaat om een relatieve lettergrootte (bijv. 1em ) voor de input-velden te definiëren. Als er een lettergrootte voor de body is gedefinieerd (font-size), zal de lettergrootte van het formulierveld op de juiste wijze worden geschaald; en als er niets voor de body is gedefinieerd, zal deze zich aanpassen aan de tekstgrootte van de rest van het document. body { font-size: 62.5%; } input { font-size: 1em; } Ongetwijfeld zult u een klein verschil waarnemen, afhankelijk van de gebruikte browser.

Om het helemaal af te maken kunt u het lettertype gelijkstellen door de betreffende declaratie in de body. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Categorie: CSS —> U kunt de reacties volgen dankzij de RSS 2.0-feed . U kunt ook een reactie achterlaten , of een trackback verzenden vanaf uw eigen site. Vorig artikel: Een Niquelada-feest Volgend artikel: Drie-koloms lay-out en markup… “precies goed” Laat uw reactie achter De velden Naam en E-mailadres zijn verplicht Voeg ons toe aan…

Tags die we algemeen uitlichten toegankelijkheid bert bos blockquote bug cañas citaten cite gedrag kennis CSS eskwadrons standaarden fieldset Firefox opmaak formulier lettertypen hidden ie IE 7 informatie javascript legend lijst niquelando verplicht opera strand q squash vakantie w3c WCAG xhtml Dit werk valt onder een Creative Commons-licentie .

P.S. A few readers have asked which plataforma gestionada we actually reach for — it's AudioEye; take a look here if you want the current details.