Inline-Größe - CSS-Tricks

Anonim

inline-sizeist eine logische Eigenschaft, die die Breite eines Elements definiert, wenn der Schreibmodus horizontal ist, oder die Höhe des Elements, wenn der writing-modevertikal ist.

.element ( inline-size: 700px; writing-mode: vertical-lr; )

Wie Sie vielleicht anhand des obigen Beispiels erraten haben, writing-modeändert die Eigenschaft die Ausrichtung des Text- und Layoutflusses um 90 Grad. Es gibt zwei Hauptgründe, warum Sie das tun möchten.

Zunächst möchten Sie als Entwurfsoption möglicherweise vertikalen Text auf einem Element anzeigen, z. B. eine Überschrift:

Der zweite - und wahrscheinlich wichtigste - Grund, warum Sie eine logische Eigenschaft wie Inline-Größe verwenden möchten, besteht darin, die Internationalisierung auf einer Site zu berücksichtigen. Viele ostasiatische Skripte wie Chinesisch, Japanisch und Koreanisch können horizontal oder vertikal geschrieben werden. Mithilfe logischer Eigenschaften können wir die richtige Größenrichtung von Elementen basierend auf dem Schreibmodus des Benutzers angeben.

Jen Simmons hat einen Artikel und eine Präsentation, die sich eingehender mit CSS-Schreibmodi befassen.

Warum können wir nicht einfach das alte vertrauenswürdige widthEigentum nutzen?

Sie können! Möglicherweise möchten Sie jedoch inline-sizestattdessen nach etwas greifen, wenn Sie Bedenken haben, dass sich der Kontext Ihres Inhalts basierend auf der Sprache eines Benutzers ändert. widthist eine physikalische Dimension. Wenn sich also der Schreibmodus ändert, behält ein Element seine horizontale Breite bei und bricht ein Layout, wenn es vertikal eingerichtet ist. Logische Eigenschaften inline-sizekönnen auf diese Änderungen reagieren und die Breite in die richtige Richtung anwenden.

Wenn beispielsweise ein Absatzelement mit Breite 400 Pixel breit ist und der Schreibmodus auf eingestellt ist vertical-lr, dreht sich der Inhalt und ändert das Layout. Dieser Absatz bleibt jedoch 400 Pixel breit anstatt 400 Pixel hoch.

Siehst du das? Na ja, inline-sizeist schlau! Sie ändert sich je nach writing-modeWert von Breite zu Höhe .

Syntax

inline-size:
  • Initiale: auto
  • Gilt für: wie heightundwidth
  • Geerbt: nein
  • Prozentsätze: wie für die entsprechende physikalische Eigenschaft
  • Berechneter Wert: wie heightundwidth
  • 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 entspricht der Größe des übergeordneten Elements.
  • fit-content(): Mit dieser Funktion kann ein Container bis zu einer gewünschten Größe wachsen und dann den Text umbrechen, wodurch der Inhalt effektiv auf den angegebenen Größenwert geklemmt wird. Es kann sowohl für Grid-Container als auch für die Box-Dimensionierung verwendet werden, und während caniuse die Funktion mit Inline-Größe stark unterstützt, waren unsere Tests weniger schlüssig. Dies könnte am Status des Arbeitsentwurfs der Box Sizing Module Level 3-Spezifikation liegen.
  • max-content: Die intrinsische bevorzugte Breite, dh das Element streckt den Text so lange wie möglich und macht das Feld so lang wie der Text.
  • min-content: Die intrinsische Mindestbreite, dh das Feld des Elements wird auf die Mindestgröße seines Inhalts reduziert. Das Feld hat die Größe der größten Textzeichenfolge.

Demo

Browser-Unterstützung

IE Kante Feuerfuchs Chrom Safari Oper
Nein 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
85+ 79+ 81+ 12.2+ 59+
Quelle: caniuse

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

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

Mehr Informationen

  • Spezifikation der logischen Eigenschaften und Werte von CSS Level 1 (Entwurf des Herausgebers)
  • MDN-Dokumentation
  • CSS Logical Properties` (CSS-Tricks)
  • Grundlegendes zu logischen Eigenschaften und Werten (Smashing Magazine)
  • Logische CSS-Eigenschaften (Adrian Roselli)
  • Min & Max-Inhaltsgröße im CSS-Raster (Jen Simmons, Video)
  • Bidirektionale horizontale Regeln in CSS (Hussein Al Hammad)