Sind ems noch relevant?

Mein Verständnis beim Lesen von Threads wie diesem ist, dass der springende Punkt darin besteht, alle Maße auf Ihrer Webseite durch die Basisschriftgröße zu definieren , die von Ihrem Browser festgelegt werden kann.

In Chrome können Sie dies beispielsweise tun, indem Sie gehen settings -> show advanced settings -> web content -> font size: very large. Ich könnte dies tun, wenn ich einen großen, hochauflösenden Monitor benutze, der weit weg ist.

Ich habe einen Plunker erstellt , der den Unterschied zwischen ems und px in der Größe demonstriert.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Wenn ich in meinem Browser die Schriftgröße auf Mittel einstelle, haben diese Divs die gleiche Größe, wobei die Grundschriftgröße 16px beträgt, also 20em = 320px.

Wenn ich jedoch die Schriftgröße meines Browsers auf sehr groß ändere, können wir feststellen, dass der in ems gemessene Div größer geworden ist.

Dieser Effekt wird jedoch negiert, wenn ich zum Beispiel die Schriftgröße im Body-Tag definiere.

body {
  font-size: 16px;
}

Denn jetzt überschreibt mein CSS die vom Browser festgelegte Schriftgröße.

Ich verstehe, dass ems in den Tagen älterer Browser wichtig gewesen wäre, in denen das Zoomen auf der Seite nur Schriftarten vergrößerte. Aber heutzutage skalieren moderne Browser sowohl Pixel als auch Schriftarten, was das Zoomproblem in Frage stellt.

Suchen Sie rund um die Web - eine Vielzahl von Websites zu tun Set Schriftgröße in ihrem Körper - Tag.

Der Stapelüberlauf legt beispielsweise die Schriftgröße im Body-Tag auf 13px fest. Das Einstellen der Schriftgröße in meinem Browser hat keinerlei Einfluss auf das Layout des Stapelüberlaufs.

Google-Suchergebnisse tun dies nicht.

(Diese beiden Screenshots wurden mit einer sehr großen Chrome-Schriftgröße und einem Zoom von 100% aufgenommen.)

Vielleicht könnten Sie argumentieren, dass das Festlegen der Schriftgröße im Body-Tag eine schlechte Idee ist, da dadurch die eigenen Einstellungen für die Barrierefreiheit eines Benutzers verhindert werden. Da der Benutzer jedoch zoomen kann, um die Größe zu erhöhen (wodurch auch alle Pixel proportional vergrößert werden), scheint dies kein wirkliches Problem zu sein.

Dieser Effekt wird jedoch negiert, wenn ich zum Beispiel die Schriftgröße im Body-Tag definiere.

body {
  font-size: 16px;
}

Denn jetzt überschreibt mein CSS die vom Browser festgelegte Schriftgröße.

Sie vergessen die Zugänglichkeit .

Siehe C14: Verwenden von em-Einheiten für Schriftgrößen gemäß den Richtlinien für die Barrierefreiheit von Webinhalten (WCAG 2.0).

Stellen Sie die Schriftgröße Ihres Browsers auf Sehr groß ein . Gehen Sie jetzt zu einer Website wie W3C . Wie sieht der Text aus?

Darum geht es in dieser Option. Die Entwickler von StackExchange und vielen anderen Websites waren der Meinung, dass ihre Auswahl wichtiger ist als die der Benutzer, die möglicherweise sehbehindert sind. Ob diese Wahl richtig oder falsch ist, liegt außerhalb des Rahmens dieser Frage, und die Antwort ist nicht direkt notwendig.

Sie können jedoch (auch gesetzlich für einige Websites) gezwungen sein, andere Entscheidungen zu treffen und die Benutzer ihre Schriftgröße auswählen zu lassen. Von dort aus haben Sie die Wahl: Entweder Sie geben die Größe der Bilder und die verschiedenen Bereiche der Seite in Pixel an. In diesem Fall hat die Schriftgrößenoption des Browsers lustige Auswirkungen auf das Layout, oder Sie verwenden emfür diese Elemente die Option Gut.

Beachten Sie auch , dass , wenn Sie nicht die Schriftgröße in Pixeln an der Körperebene angeben, dann Stick mit emzumindest für Schriftgröße überall. Zum Beispiel hat Google die Schriftgröße inkonsistent angegeben, und die Suchseite sieht seltsam aus, insbesondere wenn Titel kleiner als normaler Text erscheinen. Wikipedia hingegen hat bei emder Angabe der Schriftgröße hervorragende Arbeit geleistet . Nachfolgend finden Sie die Screenshots beider Websites, die von Chromium mit der Schriftgrößenoption Sehr groß gerendert wurden :

Vielleicht könnten Sie argumentieren, dass das Festlegen der Schriftgröße im Body-Tag eine schlechte Idee ist, da dadurch die eigenen Einstellungen für die Barrierefreiheit eines Benutzers verhindert werden. Da der Benutzer jedoch zoomen kann, um die Größe zu erhöhen (wodurch auch alle Pixel proportional vergrößert werden), scheint dies kein wirkliches Problem zu sein.

Dies ist aus zwei Gründen ein echtes Problem.

Erstens speichern die meisten Browser den Zoomfaktor Site für Site. Wenn Sie eine Sehbehinderung haben, müssen Sie auf jeder besuchten Website immer wieder zoomen. Das ist Scheiße. Angesichts der gegenwärtigen Gleichgültigkeit von Webdesignern und Entwicklern in Bezug auf Barrierefreiheit müssen Sehbehinderte dies ohnehin tun, was jedoch nicht bedeutet, dass dies so bleiben sollte.

Zweitens verhalten sich zu viele Websites auch optisch nicht gut, wenn sie gezoomt werden. Responsive Websites funktionieren gut, aber nicht responsive Websites zeigen entweder einen horizontalen Bildlauf oder ein Verhalten wie "Ihr Bildschirm ist zu klein".

Es gibt auch einen grundlegenden Unterschied zwischen Zoom und Textskala für einen Entwickler. Während emdies "Anpassen an die Einstellungen der Textgröße des Benutzers" bedeutet, geht es beim Zoomen darum, die gesamte Seite zu vergrößern oder zu verkleinern, nicht nur Text.

Nehmen Sie ein Beispiel für das Site-Menü (oben auf der Seite, wobei die Links in einer Zeile positioniert sind). Beim Zoomen wissen Sie, dass sich die Höhe des Menüs proportional zu den anderen Elementen ändert. Mit der Option für die Textgröße können Sie das Verhalten bestimmen. Sie können davon ausgehen, dass eine sehbehinderte Person 50pxin jedem Fall Ihr Menü sehen kann : Niemand wird ein schwarzes Menü auf weißem Hintergrund verpassen. Oder Sie können beispielsweise festlegen, dass die Höhe proportional zum Text bleibt 1.5em.

Der Punkt von ems ist, alle Maße in Ihrer Webseite durch die Basisschriftgröße zu definieren

Dies mag meinerseits ein Missverständnis von Begriffen sein, aber um zu verdeutlichen: embezieht sich auf die Schriftgröße "des aktuellen Elements". remist relativ zur Grundschriftgröße.

Ich verstehe, dass ems in den Tagen älterer Browser wichtig gewesen wäre, in denen das Zoomen auf der Seite nur Schriftarten vergrößerte.

Das ist nicht der Grund, warum ich em's benutze . In der Tat ist Ihr Zoom-Erlebnis das Letzte, woran ich denke, wenn ich relative Maßeinheiten verwende. Ich habe zwei Anliegen.

Erstens bin ich normalerweise daran interessiert, meine Layouts relativ zu definieren. Ich mache mir Sorgen, dass meine Container in Bezug aufeinander und auf den darin enthaltenen Text gut aussehen. Und wenn ich die Schriftart ändere oder die Kette optimiere, möchte ich nicht alles von Hand neu berechnen und aktualisieren, um die Proportionen beizubehalten, für die ich fotografiere. Lassen Sie den Browser rechnen ...

Zweitens möchte ich Schriftgrößen nur in einfachen Worten ausdrücken, die ich verstehen kann. Wenn ich meine Basisschriften in ptund alles andere in remoder ausdrücke em, ist das für mich einfacher. Ich muss die Auflösung Ihres Geräts nicht kennen und Sie müssen nicht zoomen. Ihr Browser weiß, wie viele Pixel verwendet werden sollen. keiner von uns sollte darüber nachdenken müssen.