Niquelao » Archiwum bloga » Rozmiary czcionek i dziedziczenie w kontrolkach formularzy

» Archiwum bloga » Rozmiary czcionek i dziedziczenie w kontrolkach formularzy Niquelao - CSS Rozmiary czcionek i dziedziczenie w kontrolkach formularzy 30 maja 2006 przez Maroto A teraz coś na poważnie Teoretycznie rozmiar czcionki powinien być dziedziczony z elementu nadrzędnego. Przypadkiem (nie wiemy, kto to powiedział) dowiedzieliśmy się, że elementy zastępowane (zasadniczo kontrolki formularzy, input) nie zawsze stosują się do tego zachowania.

Jesteśmy tu, aby dać wam rozwiązanie. Chodzi o przeprowadzenie serii testów, aby określić wzorzec zachowania w różnych przeglądarkach i dostarczyć rozwiązanie kompatybilne ze wszystkimi. Rozwiązanie na końcu. Lista użytych przeglądarek jest następująca: 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 Test polega na wprowadzeniu różnych zmian we właściwościach czcionki zastosowanych do elementów następującego kodu:

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.

Poniżej znajdują się linki do poszczególnych przeprowadzonych testów. Po prawej stronie linku wskazano właściwości zmodyfikowane w każdym przypadku.

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

Przykład 1 (no-style) Przykład 2 (body: font-size) Przykład 3 (body: font-family) Przykład 4 (body: font) Przykład 5 (body,input: font-family) Przykład 6 (body: font-family / input: font-size) Przykład 7 (body: font-family / input: font) Przykład 8 (body: font-size / input: font-family) Przykład 9 (body,input: font-size) Przykład 10 (body: font-size / input: font) Przykład 11 (body,input: font) Przykład 12 (input: font-family) Przykład 13 (input: font-size) Przykład 14 (input: font) Przykład 15 (body: font / input: font-family) Przykład 16 (body: font / input: font-size) Przykład 17 (body,input: font-family inherit) Przykład 18 (body: font-family inherit/ input: font-size inherit) Przykład 19 (body,input: font-size inherit) Przykład 20 (body: font-size inherit/ input: font-family inherit) Przykład 21 (body: font / input: font-family inherit) Przykład 22 (body: font / input: font-size inherit) Przykład 23 (input: font inherit) Przykład 24 (input: font-size font-family inherit) Przykład 25 (body,input: inherit) Zaobserwowano podobne zachowanie między przeglądarkami Firefox i Galeon, również podobne między Konqueror i IE, a z pewnymi wariantami mamy do czynienia w Operze.

Możemy wywnioskować, przy minimalnym procencie trafień, że wystarczyłoby zdefiniować względny rozmiar czcionki (np. 1em) dla input. Jeśli w ciele (body) zdefiniowano rozmiar czcionki (font-size), rozmiar czcionki kontrolki formularza zostanie odpowiednio przeskalowany, a jeśli nic nie zdefiniowano w ciele, dostosuje się do rozmiaru tekstu reszty dokumentu. body { font-size: 62.5%; } input { font-size: 1em; } Zapewne zaobserwuje się niewielką różnicę w zależności od używanej przeglądarki. Aby dokończyć robotę, można wyrównać typ czcionki poprzez odpowiednią deklarację w ciele. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Kategoria: CSS —> Możesz śledzić komentarze dzięki kanałowi RSS 2.0 .

Możesz też zostawić komentarz lub wysłać trackback ze swojej strony. Poprzedni artykuł: Niquelowana impreza Następny artykuł: Układ trzech kolumn i znaczniki… “ten właściwy” Zostaw swój komentarz Pola Nazwa i Email są obowiązkowe Dodaj nas do… Tagi, które wyróżniamy ogólnie dostępność bert bos blockquote bug cañas cytaty cite zachowanie wiedza CSS escuas standardy fieldset Firefox format formularz czcionki hidden ie IE 7 informacja javascript legend lista niquelando obowiązkowe opera plaża q squash wakacje w3c WCAG xhtml Ta praca jest objęta licencją Creative Commons .

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.