Czy ems są nadal aktualne?

Rozumiem po przeczytaniu wątków takich jak ten, że celem ems jest zdefiniowanie wszystkich pomiarów na twojej stronie, według podstawowego rozmiaru czcionki , który można ustawić w przeglądarce.

Na przykład w Chrome możesz to zrobić, przechodząc settings -> show advanced settings -> web content -> font size: very large. Mógłbym to zrobić, gdybym używał dużego monitora o wysokiej rozdzielczości, który był daleko.

Stworzyłem plunker, który pokazuje różnicę między wielkością ems a px.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Jeśli w mojej przeglądarce ustawię rozmiar czcionki na średni, te div będą tego samego rozmiaru, podstawowy rozmiar czcionki to 16px, więc 20em = 320px.

Kiedy jednak zmieniam rozmiar czcionki przeglądarki na bardzo duży, widzimy, że div zmierzony w ems zwiększył rozmiar.

Efekt ten zostanie jednak zanegowany, jeśli na przykład zdefiniuję rozmiar czcionki w znaczniku body.

body {
  font-size: 16px;
}

Ponieważ teraz mój css zastępuje rozmiar czcionki ustawiony przez przeglądarkę.

Rozumiem, że ems byłby ważny w czasach starszych przeglądarek, gdzie powiększanie strony tylko skalowało czcionki. Ale w dzisiejszych czasach nowoczesne przeglądarki skalują zarówno piksele, jak i czcionki, co sprawia, że ​​problem powiększania jest dyskusyjny.

Rozglądając się po internecie - wiele stron internetowych zrobić zestaw rozmiar czcionki w tagu ciała.

Na przykład przepełnienie stosu ustawia rozmiar czcionki na 13 pikseli w znaczniku body. Ustawienie rozmiaru czcionki w mojej przeglądarce nie ma najmniejszego wpływu na układ Przepełnienia stosu.

Wyniki wyszukiwania Google tego nie robią.

(oba te zrzuty ekranu wykonane przy bardzo dużym rozmiarze czcionki chromowanej i powiększeniu 100%).

Być może więc można argumentować, że ustawienie rozmiaru czcionki w znaczniku body jest złym pomysłem, ponieważ uniemożliwia własne ustawienia dostępności użytkownika. Ale biorąc pod uwagę, że użytkownik może powiększyć, aby zwiększyć rozmiary (co proporcjonalnie zwiększy również wszystkie piksele) - nie wydaje się to prawdziwym problemem.

Efekt ten zostanie jednak zanegowany, jeśli na przykład zdefiniuję rozmiar czcionki w znaczniku body.

body {
  font-size: 16px;
}

Ponieważ teraz mój css zastępuje rozmiar czcionki ustawiony przez przeglądarkę.

Zapomniałeś o dostępności .

Zobacz C14: Używanie jednostek em dla rozmiarów czcionek z Wytycznych dotyczących dostępności treści WWW (WCAG 2.0).

Ustaw opcję rozmiaru czcionki w przeglądarce na Bardzo duża . Teraz przejdź do strony takiej jak W3C . Jak wygląda tekst?

Na tym polega ta opcja. Twórcy StackExchange i wielu innych stron internetowych zdecydowali, że ich wybory są ważniejsze niż wybory użytkowników, którzy mogą być niedowidzący. To, czy ten wybór jest właściwy, czy zły, nie wchodzi w zakres tego pytania, a odpowiedź nie jest konieczna.

Użytkownik może jednak zostać zmuszony (w tym prawo w przypadku niektórych witryn) do podjęcia różnych decyzji i umożliwienia użytkownikom wyboru rozmiaru czcionki. Stamtąd masz wybór: możesz określić rozmiar obrazów i różnych stref strony w pikselach, w takim przypadku opcja rozmiaru czcionki w przeglądarce będzie miała fajny wpływ na układ, lub zastosujesz emdla tych elementów jako dobrze.

Pamiętaj również, że jeśli nie określisz rozmiaru czcionki w pikselach na poziomie ciała, trzymaj się emco najmniej dla rozmiaru czcionki wszędzie. Na przykład Google określił rozmiar czcionki niekonsekwentnie, a strona wyszukiwania wygląda dziwnie, szczególnie z tytułami wyglądającymi na mniejsze niż zwykły tekst. Z drugiej strony Wikipedia wykonała świetną robotę, używając każdego emrozmiaru czcionki. Poniżej znajdują się zrzuty ekranu z obu witryn renderowane przez Chromium z opcją rozmiaru czcionki ustawioną na Bardzo duże :

Być może więc można argumentować, że ustawienie rozmiaru czcionki w znaczniku body jest złym pomysłem, ponieważ uniemożliwia własne ustawienia dostępności użytkownika. Ale biorąc pod uwagę, że użytkownik może powiększyć, aby zwiększyć rozmiary (co proporcjonalnie zwiększy również wszystkie piksele) - nie wydaje się to prawdziwym problemem.

To prawdziwy problem z dwóch powodów.

Po pierwsze, większość przeglądarek przechowuje współczynnik powiększenia strona po stronie. Jeśli masz upośledzenie wzroku, będziesz zmuszony do wielokrotnego powiększania każdej odwiedzanej witryny. To jest do bani. Biorąc pod uwagę obecną obojętność projektantów stron internetowych i programistów na dostępność, osoby niedowidzące i tak muszą to robić, ale to nie znaczy, że powinno tak pozostać.

Po drugie, zbyt wiele witryn nie zachowuje się dobrze wizualnie po powiększeniu. Responsywne witryny mają się dobrze, ale strony niereagujące będą wyświetlać albo przewijanie w poziomie, albo zachowanie „Twój ekran jest za mały”.

Istnieje również zasadnicza różnica między powiększaniem a skalą tekstu dla programisty. Chociaż emoznacza „dostosuj to do preferencji użytkownika dotyczących rozmiaru tekstu”, powiększenie polega na skalowaniu całej strony w górę lub w dół, a nie tylko tekstu.

Weź przykład menu witryny (u góry strony, z linkami umieszczonymi w linii). Dzięki powiększaniu wiesz, że wysokość menu zmieni się proporcjonalnie do innych elementów. W przypadku opcji rozmiaru tekstu określenie zachowania zależy od Ciebie. Możesz założyć, że osoba niedowidząca będzie mogła zobaczyć twoje 50pxmenu wysokości we wszystkich przypadkach: nikt nie przegapi czarnego menu na białym tle. Lub możesz na przykład zdecydować, że jego wysokość powinna pozostać proporcjonalna do tekstu 1.5em.

chodzi o to, aby zdefiniować wszystkie pomiary na swojej stronie, według podstawowego rozmiaru czcionki

Z mojej strony może to być nieporozumienie, ale wyjaśnienie: emjest związane z rozmiarem czcionki „bieżącego elementu”. remjest względny do rozmiaru czcionki głównej.

Rozumiem, że ems byłby ważny w czasach starszych przeglądarek, gdzie powiększanie strony tylko skalowało czcionki.

Nie dlatego używam em. W rzeczywistości wrażenia związane z powiększaniem są ostatnią rzeczą, o której myślę, kiedy używam względnych jednostek miary. Moje obawy są dwojakie.

Po pierwsze, zwykle jestem zainteresowany po prostu zdefiniowaniem moich układów w kategoriach względnych. Obawiam się, że moje pojemniki wyglądają dobrze w stosunku do siebie nawzajem i tekstu w nich zawartego. A kiedy zmieniam czcionkę lub poprawiam łańcuch, nie chcę ponownie obliczać i aktualizować wszystkiego ręcznie, aby zachować proporcje, dla których strzelam. Niech przeglądarka zajmie się matematyką ...

Po drugie, chcę wyrazić rozmiary czcionek w prosty sposób, który mogę zrozumieć. Gdybym wyrazić czcionek bazowych w pt„s, a wszystko w rem” s lub em„s, to jest mi łatwiej. Nie muszę znać rozdzielczości twojego urządzenia i nie musisz powiększać. Twoja przeglądarka wie, ile pikseli użyć; żadne z nas nie powinno o tym myśleć.