Niquelao » Bloggarkiv » Skriftstørrelser og arv i skjermakontroller

» Arkiv for webloggen » Skriftstørrelser og arv i skjermkontroller Niquelao - CSS Skriftstørrelser og arv i skjermkontroller 30. mai 2006 av Maroto Og nå til noe seriøst I utgangspunktet bør skriftstørrelsen arves fra forelderelementet. Tilfeldigvis (vi vet ikke hvem som sa det) har vi fått vite at erstattede elementer (i hovedsak skjermkontroller, input) ikke alltid følger denne oppførselen.

Her er vi for å gi deg løsningen. Det handler om å gjennomføre en rekke tester for å fastslå et mønster for oppførsel på tvers av ulike nettlesere og tilby en løsning som fungerer for alle. Løsningen finner du til slutt. Listen over nettlesere som ble brukt, er som følger: 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 Testen går ut på å gjøre ulike endringer i skriftegenskapene som brukes på elementene i følgende kode:

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.

Nedenfor finner du lenker til de ulike testene som er utført. Til høyre for hver lenke angis hvilke egenskaper som er endret i hvert tilfelle.

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

Eksempel 1 (no-style) Eksempel 2 (body: font-size) Eksempel 3 (body: font-family) Eksempel 4 (body: font) Eksempel 5 (body,input: font-family) Eksempel 6 (body: font-family / input: font-size) Eksempel 7 (body: font-family / input: font) Eksempel 8 (body: font-size / input: font-family) Eksempel 9 (body,input: font-size) Eksempel 10 (body: font-size / input: font) Eksempel 11 (body,input: font) Eksempel 12 (input: font-family) Eksempel 13 (input: font-size) Eksempel 14 (input: font) Eksempel 15 (body: font / input: font-family) Eksempel 16 (body: font / input: font-size) Eksempel 17 (body,input: font-family inherit) Eksempel 18 (body: font-family inherit/ input: font-size inherit) Eksempel 19 (body,input: font-size inherit) Eksempel 20 (body: font-size inherit/ input: font-family inherit) Eksempel 21 (body: font / input: font-family inherit) Eksempel 22 (body: font / input: font-size inherit) Eksempel 23 (input: font inherit) Eksempel 24 (input: font-size font-family inherit) Eksempel 25 (body,input: inherit) Vi har observert lignende oppførsel mellom nettleserne Firefox og Galeon, også lignende mellom Konqueror og IE, mens Opera viser visse variasjoner.

Vi kan konkludere med minst mulig feilmargin at det holder å definere en relativ skriftstørrelse (f.eks. 1em ) for input-felt. Hvis det er definert en skriftstørrelse i body-elementet (font-size), vil skriftstørrelsen i skjermkontrollen skaleres riktig, og hvis ingenting er definert i body, vil den tilpasse seg tekststørrelsen i resten av dokumentet. body { font-size: 62.5%; } input { font-size: 1em; } Du vil sannsynligvis observere små forskjeller avhengig av hvilken nettleser du bruker. For å fullføre jobben helt kan du også ensrette skrifttypen ved hjelp av tilsvarende deklarasjon i body. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Kategori: CSS —> Du kan følge kommentarene via RSS 2.0-feeden .

Du kan også legge igjen en kommentar , eller sende en trackback fra ditt eget nettsted. Forrige artikkel: En Niquelada-fest Neste artikkel: Oppsett med tre kolonner og markup… “det rette” Legg igjen din kommentar Feltene Navn og E-post er obligatoriske Legg oss til… Tags vi fremhever generelt tilgjengelighet bert bos blockquote bug cañas sitater cite oppførsel kunnskap CSS vinkler standarder fieldset Firefox format skjema skrifter hidden ie IE 7 informasjon javascript legend liste niquelando obligatorisk opera strand q squash ferie w3c WCAG xhtml Dette verket er lisensiert under en Creative Commons-lisens .

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.