Niquelao » Blogiarkisto » Fonttikoot ja periytyminen lomakeohjaimissa

» Blogiarkisto » Fonttikoot ja periytyminen lomakeohjaimissa Niquelao - CSS Fonttikoot ja periytyminen lomakeohjaimissa 30. toukokuuta 2006, kirjoittaja Maroto Ja nyt jotain vakavaa Oletettavasti fonttikoon pitäisi periytyä vanhempaelementistä. Sattumalta (emme tiedä kuka sen sanoi) olemme saaneet tietää, että korvatut elementit (pohjimmiltaan lomakeohjaimet, input) eivät noudata tätä käyttäytymistä (joskus).

Tässä olemme antamassa teille ratkaisun. Kyse on testisarjan suorittamisesta käyttäytymismallin määrittämiseksi eri selainten välillä ja kaikkien kanssa yhteensopivan ratkaisun tarjoamisesta. Ratkaisu, lopussa. Käytetty selainluettelo on seuraava: 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 Testi koostuu erilaisten muutosten tekemisestä seuraavan koodin elementteihin sovellettaviin fonttiominaisuuksiin:

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.

Seuraavassa on linkit eri testeihin. Linkin oikealla puolella ilmoitetaan kussakin tapauksessa muutetut ominaisuudet.

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

Esimerkki 1 (no-style) Esimerkki 2 (body: font-size) Esimerkki 3 (body: font-family) Esimerkki 4 (body: font) Esimerkki 5 (body,input: font-family) Esimerkki 6 (body: font-family / input: font-size) Esimerkki 7 (body: font-family / input: font) Esimerkki 8 (body: font-size / input: font-family) Esimerkki 9 (body,input: font-size) Esimerkki 10 (body: font-size / input: font) Esimerkki 11 (body,input: font) Esimerkki 12 (input: font-family) Esimerkki 13 (input: font-size) Esimerkki 14 (input: font) Esimerkki 15 (body: font / input: font-family) Esimerkki 16 (body: font / input: font-size) Esimerkki 17 (body,input: font-family inherit) Esimerkki 18 (body: font-family inherit/ input: font-size inherit) Esimerkki 19 (body,input: font-size inherit) Esimerkki 20 (body: font-size inherit/ input: font-family inherit) Esimerkki 21 (body: font / input: font-family inherit) Esimerkki 22 (body: font / input: font-size inherit) Esimerkki 23 (input: font inherit) Esimerkki 24 (input: font-size font-family inherit) Esimerkki 25 (body,input: inherit) Samankaltaista käyttäytymistä on havaittu Firefox- ja Galeon-selainten välillä, samoin Konquerorin ja IE:n välillä, ja tietyin variaatioin Operassa.

Voimme päätellä, vähimmäisosumatarkkuudella, että riittäisi määritellä suhteellinen fonttikoko (esim. 1em) input-elementeille. Jos rungossa (font-size) on määritelty fonttikoko, lomakeohjaimen fonttikoko skaalautuu asianmukaisesti, ja jos rungossa ei ole määritelty mitään, se mukautuu muun asiakirjan tekstin kokoon. body { font-size: 62.5%; } input { font-size: 1em; } Todennäköisesti havaitaan pieni ero käytetystä selaimesta riippuen. Viimeistelläksesi työn voit yhdenmukaistaa fonttityypin vastaavalla määrityksellä rungossa. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Kategoria: CSS —> Voit seurata kommentteja RSS 2.0 -syötteen kautta.

Voit myös jättää kommentin tai lähettää trackbackin sivustoltasi. Edellinen artikkeli: Niquelattu juhla Seuraava artikkeli: Kolmen palstan asettelu ja merkintä… “oikea” Jätä kommenttisi Kentät Nimi ja Sähköposti ovat pakollisia Lisää meidät… Tunnisteet, joita korostamme yleisesti saavutettavuus bert bos blockquote bug cañas citas cite käyttäytyminen tietämys CSS escuas standardit fieldset Firefox muoto lomake fontit hidden ie IE 7 tieto javascript legend lista niquelando pakollinen opera playa q squash loma w3c WCAG xhtml Tämä teos on lisensoitu Creative Commons -lisenssillä .

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.