Neue (und alte) Maßeinheiten in CSS, von denen Sie kaum etwas gehört haben

Published on August 30, 2018

Neue (und alte) Maßeinheiten in CSS, von denen Sie kaum etwas gehört haben

Ursprünglicher Autor: Massimo Artizzu
  • Übersetzung
In letzter Zeit hat sich JavaScript sehr schnell entwickelt , aber die Helfer der Webentwickler stehen nicht still.

CSS entwickelt sich ebenfalls weiter, und auch wenn Houdini bald einen Durchbruch in der CSS-Entwicklung erzielt, ist es leider noch ein weiter Weg. So werden nach wie vor Expertensitzungen einberufen, bei denen neue Vorgaben gemacht werden und so weiter. Der Fortschritt ist nicht so schnell wie der von TC39, aber besser als nichts.

In diesem Artikel werden wir über die Features von CSS sprechen, die Sie höchstwahrscheinlich nicht gehört haben. Wenn Sie gehört haben, werden Sie es wahrscheinlich nicht verwenden - über Maßeinheiten. Und nein, wir werden nicht über "alte" Einheiten sprechen vwund vh(obwohl ich sie immer noch Leuten erklären muss, die nicht sehr gut mit CSS sind).



Nachfolgend finden Sie die neuen Maßeinheiten in CSS, die im Modul Level 4-Modul für CSS-Werte und -Einheiten aufgeführt werden .

lh und rlh


Beginnen wir gleich mit interessantem. lh- Dies ist die aktuelle Zeilenhöhe , die bei der Berechnung der Texthöhe sehr nützlich sein kann. Leider unterstützt kein Browser das.
rlhwiederum entspricht analog remfür for emder Höhe der Linie des Wurzelelements.



vi und vb


Hier ist eine weitere interessante Innovation, die analog zu vwund vheinem Prozentsatz der Fenstergröße entspricht. Nämlich:

  • vi entspricht 1% der Größe des Ansichtsfensters in Richtung der Linie;
  • vb entspricht 1% der Größe des Darstellungsbereichs über der Zeilenschreibrichtung.

Was sind diese "Inline" - und "Block" -Achsen ? Bei Sprachen mit horizontaler Schreibweise, beispielsweise mit Englisch oder Arabisch (wo sie von rechts nach links schreiben), handelt es sich um horizontale und vertikale Achsen, und Einheiten entsprechen Äquivalenten von vwund vh.

Bei Sprachen mit vertikaler Schreibweise (z. B. auf Japanisch) ändern diese Achsen ihre Position .

Diese Unterschiede wurden von Anfang an in CSS berücksichtigt (z. B. in einer Eigenschaft display) und werden nun systematisch verwendet, um immer mehr CSS-Spezifikationen zu erstellen.

Es ist schade, dass in diesem Fall noch kein Browser diese Geräte unterstützt.

ic


Seit wir über Internationalisierung sprechen, ist es angebracht, zu der Einheit zu gehen ic, dem östlichen Analogon der Einheit ch, was bedeutet, dass die Zeichengröße 0 ist. Dies icbedeutet wiederum die Größe des Ideogramms CJK (Chinesisch, Japanisch und Koreanisch) ("Wasser", U + 6C34). und im weitesten Sinne kann diese Einheit als die Anzahl der Ideogramme verstanden werden.

Was ist "Größe"? Hierbei handelt es sich um den sogenannten "total besetzten Wert" ( Vorausmaß ): Wenn wir über das horizontale Schreiben sprechen, ist die Größe die gesamte besetzte Breite, wenn das vertikale Schreiben die Höhe ist. Bitte beachten Sie, dass dieses Prinzip auch für Einheiten gilt ch!

Und wieder keine Unterstützung in Browsern.

cap


Diese Einheit entspricht der sogenannten Kappenhöhe oder der Höhe eines Großbuchstaben. In der Spezifikation entspricht die Kappenhöhe ungefähr der Höhe des Großbuchstaben des lateinischen Alphabets. Es gibt einen Algorithmus zur Berechnung dieses Werts, einschließlich für Schriftarten, die keine Buchstaben des lateinischen Alphabets enthalten, aber ich werde nicht auf Details eingehen.

Dies liegt daran, dass dieses Gerät nicht mit einem Browser verwendet werden kann.

Sprechen wir nun über spezifischere Maßeinheiten ...


Schauen wir uns die alte Spezifikation aussehen (Level 3) -Trotz die Tatsache , dass es ist zu weit unterstützt verwendet , und nicht jeder weiß etwas über seiner Komponenten.

turn und verwandte Einheiten


Diese Maßeinheit ist etwas bekannter als die anderen, also fangen wir damit an.

Wir haben degObjekte mit gedreht transform, oder? Eins turnist 360 deg. Nichts kompliziertes Dies ist sehr nützlich für Animationen (insbesondere für 360-Grad-Rotationen) und für die in JavaScript berechneten Verlaufswerte.

Aber das ist noch nicht alles! Die Spezifikation gibt auch die Einheiten gradund radentsprechend Hagel und Bogenmaß an.

Alle diese Maßeinheiten werden in allen Browsern (in IE seit Version 9) unterstützt, obwohl ich keine wirkliche Verwendung für Hagel sehe. Radiant kann jedoch direkt für die trigonometrischen JavaScript-Funktionen verwendet werden.

Q


Da dieses Gerät mit Level 3 zusammenhängt, sollte es von allen Browsern unterstützt werden. Tatsächlich wird es nur in Firefox seit der erst kürzlich veröffentlichten Version 49 (vom September 2016) unterstützt.

Also was ist das Q? Es ist nur 0,25 mm - ein Viertel Millimeter.

Warum wurde diese Einheit benötigt? Es stellt sich heraus, dass es beim Drucken verwendet wird. In Japan . Und dort werden anscheinend weder die Punkte noch andere Einheiten des klassischen Systems verwendet (und das finde ich wunderbar).

Seitenverhältnis


Obwohl es nicht genau eine Maßeinheit ist, muss es immer noch einen exakten Wert haben und wird als ein Maß betrachtet. Sie wird als zwei positive Ganzzahlen ausgedrückt, getrennt durch das Symbol / (ein Schrägstrich, der in Unicode als Solidus bezeichnet wird).

Wo kann ich es anwenden? Natürlich bei Medienanfragen! Beispiel:

@media screen and (min-aspect-ratio: 16/10) {
  /* something for wide screens */
}

Gute Nachricht: Es wird von allen Browsern unterstützt! Hurra!

Hz und kHz


Was ist das Wir waren in der Schule, dass dies die Maßeinheit für die Frequenz ist . Was hat das mit CSS zu tun?

Das ist richtig, dies sind Einheiten der Häufigkeit, und zum Zeitpunkt der Erstellung dieses Dokuments gibt es keine CSS-Eigenschaften , für die eine Frequenz erforderlich ist. Und doch werden die Frequenzeinheiten bestimmt. Warum?

Dies wurde höchstwahrscheinlich vorgenommen, wenn eine Spezifikation eines Moduls für die Sprachsynthese oder eine andere Audioausgabe angezeigt wird. Zu dieser Zeit wurde das CSS-Soundmodul entwickelt , bei dem die frequenzbezogenen Eigenschaften bestimmt wurden, dieses Modul jedoch nicht angezeigt wurde.

Dieses Modul wurde durch ein neues ersetzt. Es ist kompatibel mit Speech Synthesis Markup Language ( SSML, Sprachsynthesemarkup Language ) und wird aufgerufenCSS-Sprache . Es befindet sich in der Entwicklungsphase und bestimmt erneut die Eigenschaften, für die Frequenzen benötigt werden (z. B. voice-pitch), ist jedoch noch nicht fertig.

Es ist nicht schwer zu erraten, dass kein Browser Frequenzeinheiten unterstützt - sie können jedoch nicht verwendet werden.

Pläne für die Zukunft


Sehr geehrter Leser, zum Schluss möchte ich Sie fragen, ob Sie die oben genannten Maßeinheiten verwendet haben oder wollten? Vielleicht machen Sie es gleich jetzt?


Gehen Sie zu VPS.today - eine Site zum Durchsuchen virtueller Server. 1500 Tarife von 130 Hostern, eine komfortable Schnittstelle und eine Vielzahl von Kriterien, um den besten virtuellen Server zu finden.