Wöchentliche Nachrichten: Zeilenumbruch bei mehrzeiligem Text, calc() in benutzerdefinierten Eigenschaftswerten, kontextbezogene Alternativen

In der dieswöchigen Zusammenfassung wird die Methode von WebKit zum Abschneiden von mehrzeiligem Text beleuchtet, es gibt einen Hinweis zu Berechnungen mit benutzerdefinierten Eigenschaften und eine neue OpenType-Funktion, die typografische Engpässe verhindert.

Mehrzeiligen Text abschneiden

Die CSS-Eigenschaft -webkit-line-clamp zum Abschneiden von mehrzeiligem Text wird nun breit unterstützt (siehe meinen Anleitungsleitfaden). Wenn Sie Autoprefixer verwenden, aktualisieren Sie es auf die neueste Version (9.6.1). Vorherige Versionen entfernten -webkit-box-orient: vertical, was dazu führte, dass diese CSS-Funktion nicht mehr funktionierte.

Beachten Sie, dass Autoprefixer in diesem Fall keine Präfixe für Sie generiert. Sie müssen die folgenden vier Deklarationen genau verwenden (alle sind erforderlich)

.line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* or any other integer */
}

(via Autoprefixer)

Berechnungen in benutzerdefinierten CSS-Eigenschaftswerten

In CSS ist es derzeit nicht möglich, benutzerdefinierte Eigenschaftswerte vorab zu berechnen (Spezifikation). Der berechnete Wert einer benutzerdefinierten Eigenschaft ist sein angegebener Wert (mit ersetzten Variablen); daher werden relative Werte in calc()-Ausdrücken *nicht* „absolutiert“ (z. B. werden em-Werte nicht in Pixelwerte umgerechnet).

:root {
  --large: calc(1em + 10px);
}

blockquote {
  font-size: var(--large);
}

Es scheint, dass die Berechnung im obigen Beispiel auf dem Wurzelelement durchgeführt wird, insbesondere dass der relative Wert 1em berechnet und zum absoluten Wert 10px addiert wird. Unter Standardbedingungen (wobei 1em auf dem Wurzelelement 16px entspricht) wäre der berechnete Wert von --large 26px.

Aber das passiert hier nicht. Der berechnete Wert von --large ist sein angegebener Wert, calc(1em + 10px). Dieser Wert wird vererbt und in den Wert der font-size-Eigenschaft des <blockquote>-Elements eingefügt.

blockquote {
  /* the declaration after variable substitution */
  font-size: calc(1em + 10px);
}

Schließlich wird die Berechnung durchgeführt und der relative 1em-Wert im Geltungsbereich des <blockquote>-Elements absolutiert – *nicht* im Wurzelelement, in dem der calc()-Ausdruck deklariert ist.

(via Tab Atkins Jr.)

Kontextbezogene Alternativen

Die OpenType-Funktion „Contextual Alternates“ stellt sicher, dass sich Zeichen nicht überlappen oder kollidieren, wenn Ligaturen deaktiviert sind. Sie können auf wakamaifondue.com prüfen, ob Ihre Schriftart diese Funktion unterstützt, und sie (falls erforderlich) über die CSS-Deklaration font-variant-ligatures: contextual aktivieren.

(via Jason Pamental)

Tägliche Nachrichten auf webplatform.news angekündigt

Ich habe begonnen, tägliche Nachrichten für Webentwickler auf webplatform.news zu veröffentlichen. Besuchen Sie uns jeden Tag!