Was ist der Wert der CSS-Ex-Einheit?

(Nicht zu verwechseln mit Xunit , einer beliebten .Net-Unit-Testing-Bibliothek.)

Aus Langeweile habe ich heute angefangen, Gmails DOM zu inspizieren (ja, ich war sehr gelangweilt).

Alles sah ziemlich einfach aus, bis ich eine interessante Spezifikation für die Breite bestimmter Elemente bemerkte. Die berühmten Googliten hatten eine Reihe von Tabellenspalten mit der seltenen Ex-Einheit angegeben.

width: 22ex;

Zuerst war ich ratlos ("Was ist ein Ex?"), Dann kam es mir wieder: Ich erinnere mich an etwas von vor Jahren, als ich zum ersten Mal etwas über CSS lernte. Aus der CSS3-Spezifikation :

[Die Ex-Einheit ist] gleich der verwendeten x-Höhe der ersten verfügbaren Schriftart . Die x-Höhe wird so genannt, weil sie oft gleich der Höhe des Kleinbuchstaben "x" ist. Ein 'ex' ist jedoch auch für Schriftarten definiert, die kein "x" enthalten.

Schön und gut. Aber ich habe es noch nie benutzt gesehen (geschweige denn selbst benutzt). Ich benutze ems ziemlich häufig und schätze ihren Wert, aber warum das "Ex"? Es scheint viel weniger Standard eine Messung als die em und weit weniger nützlich.

Eine der wenigen Seiten, auf denen ich dieses Thema besprochen habe, ist Stephen Poleys http://www.xs4all.nl/~sbpoley/webmatters/emex.html . Stephen macht gute Punkte, aber seine Diskussion scheint mir nicht schlüssig.

Meine Frage lautet also: Welchen Wert hat die Ex-Einheit für das Webdesign?

(Diese Frage könnte als subjektiv markiert werden, aber ich überlasse diese Entscheidung erfahreneren SO'ern als mir.)

Dies ist nützlich, wenn Sie eine Größe in Bezug auf die Höhe der Kleinbuchstaben Ihres Textes festlegen möchten. Stellen Sie sich zum Beispiel vor, Sie arbeiten an einem Design wie dem folgenden:

In der typografischen Dimension des Designs hat die Höhe der Buchstaben wichtige räumliche Beziehungen zu den übrigen Elementen. Die Linien im obigen Quellbild sollen helfen, die x-Höhe des Textes hervorzuheben, aber sie zeigen auch, wo Richtlinien wären, wenn um diesen Text herum entworfen würde.

Wie Jonathan in den Kommentaren betonte, ist ex einfach die Höhenversion von em (width).

Um die Frage zu beantworten, wird eine Verwendung mit hochgestellt und tiefgestellt verwendet. Beispiel:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Eine andere Sache, die Sie hier berücksichtigen sollten, ist die Skalierung Ihrer Seite, wenn ein Benutzer seine Schriftgröße erhöht oder verringert (möglicherweise mit Strg + Mausrad (Fenster)).

Ich habe sie mit .. padding-left: 2 em verwendet; Polsterung rechts: 2 em;

und ex mit Polsterung unten: 2 ex; Polsterung: 2 ex;

Verwenden Sie daher eine vertikale Maßeinheit für eine vertikal skalierende Eigenschaft und eine horizontale Maßeinheit für eine horizontal skalierende Eigenschaft.

Der Wert , es in der CSS-Spezifikation zu haben , ist genau der gleiche wie der Wert, das es hat, wenn Sie das wirklich fragen.

Hier können Sie Schriftarten auf relative Größen einstellen .

Sie wissen nicht, wie groß meine Grundschrift ist. Eine gute Strategie für das Webdesign besteht daher darin, Schriftgrößen festzulegen, die eher relativ als absolut sind. das Äquivalent von "verdoppeln Sie Ihre normale Größe" oder "etwas kleiner als Ihre normale Größe" anstelle einer festen Größe wie "zehn Pixel".

Beachten Sie, dass Begriffe wie "einfacher / doppelter Zeilenabstand" tatsächlich den Versatz zwischen zwei benachbarten Zeilen bedeuten, gemessen von em . "Doppelter Zeilenabstand" bedeutet also, dass jede Zeile eine Höhe von 2 em hat .

Wenn Sie daher einen vertikalen Abstand angeben möchten, der proportional zu "Linien" ist, verwenden Sie em. Verwenden Sie ex nur, wenn Sie die tatsächliche Höhe von Kleinbuchstaben wünschen, was, wie ich sagen darf, eine viel seltenere Instanz ist.

UPDATE: Der Webstandard ermöglicht es dem Browser, entweder 0.5em als Ex zu verwenden oder von der Schriftart abzuleiten.

Es gibt jedoch keine Möglichkeit, Informationen mit "x-height" zuverlässig in eine Schriftart (OpenType oder Webfont) einzubetten.

Daher macht die erstere Möglichkeit die Ex-Einheit überflüssig, und die letztere hat keine verlässlichen Mittel, um dies zu erreichen. Und die Tatsache, dass beides möglich ist, macht es noch weniger zuverlässig.

Daher argumentiere ich für den Wertmangel der Ex-Einheit.