Inline-Größe | CSS-Tricks

CSS Almanac → Eigenschaften → I → inline-size

Andrés Galante am 23. Aug 2021

inline-size ist eine logische Eigenschaft, die die Breite eines Elements definiert, wenn der `writing-mode` horizontal ist, oder die Höhe des Elements, wenn der writing-mode vertikal ist.

.element {
  inline-size: 700px;
  writing-mode: vertical-lr;
}

Wie Sie am obigen Beispiel vermutet haben, ändert die Eigenschaft writing-mode die Ausrichtung des Textes und des Layoutflusses um 90 Grad. Dafür gibt es hauptsächlich zwei Gründe.

Erstens, aus Designgründen, möchten Sie vielleicht vertikalen Text in einem Element anzeigen, zum Beispiel in einer Kopfzeile.

Der zweite – und wahrscheinlich wichtigste – Grund für die Verwendung einer logischen Eigenschaft wie inline-size ist die Berücksichtigung der Internationalisierung auf einer Website. Viele ostasiatische Schriften wie Chinesisch, Japanisch und Koreanisch können horizontal oder vertikal geschrieben werden. Mit logischen Eigenschaften können wir die richtige Größenrichtung von Elementen basierend auf dem Schreibmodus des Benutzers bereitstellen.

Jen Simmons hat einen Artikel und eine Präsentation, die tiefer auf CSS-Schreibmodi eingehen.

Warum können wir nicht einfach die altbewährte `width`-Eigenschaft verwenden?

Das können Sie! Wenn Sie jedoch auf inline-size zurückgreifen möchten, wenn Sie sich Sorgen über den Kontext Ihrer Inhalte machen, der sich je nach Sprache des Benutzers ändert. width ist eine physische Dimension. Wenn sich der Schreibmodus ändert, behält ein Element seine horizontale Breite bei, was das Layout unterbricht, wenn es für vertikalen Text eingerichtet ist. Logische Eigenschaften wie inline-size können auf diese Änderungen reagieren und die Breite in der richtigen Richtung anwenden.

Wenn zum Beispiel ein Absatz-Element 400 Pixel breit ist und die `width`-Eigenschaft verwendet, und der Schreibmodus auf vertical-lr eingestellt ist, dreht sich der Inhalt und ändert das Layout, aber der Absatz bleibt 400 Pixel breit statt 400 Pixel hoch.

Sehen Sie das? Nun, inline-size ist intelligent! Es ändert sich von Breite zu Höhe, abhängig vom Wert von writing-mode.

Syntax

inline-size: <'width'>

Initial: auto
Gilt für: wie height und width
Vererbt: nein
Prozentsätze: wie für die entsprechende physische Eigenschaft
Berechneter Wert: wie height und width
Animationstyp: nach berechnetem Werttyp

Werte

/* Length values */
inline-size: 250px;
inline-size: 5rem;
 
/* Percentage values */
inline-size: 75%;
 
/* Keyword values */
inline-size: auto;
inline-size: fit-content(5rem);
inline-size: max-content;
inline-size: min-content;
 
/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;

auto: Die Inline-Größe des Elements richtet sich nach der Größe seines Elternelements.
fit-content(): Diese Funktion ermöglicht es einem Container, bis zu einer gewünschten Größe zu wachsen und dann den Text umbrechen zu lassen, wodurch der Inhalt effektiv auf den angegebenen Größenwert beschränkt wird. Sie kann auf Grid-Container sowie auf `box-sizing` angewendet werden, und während caniuse eine starke Unterstützung für die Funktion mit `inline-size` anzeigt, waren unsere Tests weniger schlüssig. Dies könnte auf den Working Draft Status der Box Sizing Module Level 3 Spezifikation zurückzuführen sein.
max-content: Die intrinsisch bevorzugte Breite, was bedeutet, dass das Element den Text so weit wie möglich ausdehnt und die Box so lang wie der Text macht.
min-content: Die intrinsisch minimale Breite, was bedeutet, dass die Box des Elements auf die Mindestgröße seines Inhalts reduziert wird. Die Box hat die Größe der längsten Textzeichenkette.