max-inline-size

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

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

Wie Sie vielleicht schon am obigen Beispiel vermutet haben, ändert die Eigenschaft writing-mode die Ausrichtung des Textes und des Layoutflusses um 90 Grad.

Der Hauptgrund für die Änderung der Ausrichtung ist neben der Erstellung von schicken Designs 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.

Können wir nicht einfach die max-width-Eigenschaft verwenden?

Ja! Aber wenn Sie keinen Internet Explorer unterstützen, gibt es keinen Grund, stattdessen nicht max-inline-size zu verwenden. max-width ist eine physische Dimension. Wenn sich der Schreibmodus ändert, behält ein Element seine horizontale Breite bei, was zu einem Bruch im Layout führt, wenn es für die vertikale Ausrichtung eingerichtet wurde. Logische Eigenschaften wie max-inline-size können auf diese Änderungen reagieren und die Größe in der richtigen Ausrichtung anwenden.

Syntax

max-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 */
max-inline-size: 250px;
max-inline-size: 5rem;


/* Percentage values */
max-inline-size: 75%;


/* Keyword values */
max-inline-size: auto;
max-inline-size: fit-content(5rem);
max-inline-size: max-content;
max-inline-size: min-content;


/* Global values */
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: unset;

Demo

Wenn der writing-mode auf vertical-rl gesetzt ist, dreht sich der Inhalt und ändert das Layout. Die Breite des max-width-Box dreht sich mit dem Inhalt. Aber max-inline-size ist schlau! Es behält seine Breite bei, unabhängig vom Wert von writing-mode. Wechseln Sie den writing-mode in der folgenden Demo, um den Unterschied zwischen beiden zu sehen.

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	79+	41+	57	12.1+	44+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
85+	79+	81+	12.2+	59+

Beachten Sie, dass die Unterstützung für die folgenden Funktionen von der Unterstützung der Eigenschaft abweichen kann

• fit-content()
• max-content()
• min-content()

Weitere Informationen

Verwandte Eigenschaften