border-block

border-block ist eine logische CSS-Kurzschreibweise, die border-block-color, border-block-style und border-block-width in einer einzigen Deklaration kombiniert.

.element {
  border-block: 5px solid red;
  writing-mode: horizontal-tb;
}

border-block ist das logische Äquivalent zu physischen Eigenschaften wie border-top und border-bottom (oder border-right und border-left, abhängig von der writing-mode). Es ist in der CSS Logical Properties and Values Level 1 Spezifikation definiert, die zum Zeitpunkt der Erstellung ein Editor’s Draft ist. Die Eigenschaft ist auch das Gegenstück zu border-inline, welche Rahmen in der Inline-Richtung formatiert.

Die writing-mode ist standardmäßig von oben nach unten horizontal, wenn sie nicht explizit deklariert ist.

Der Schreibmodus legt die Richtung fest

Die Richtung der Rahmen hängt von der writing-mode Eigenschaft ab. Wenn der Schreibmodus auf die Standard-Horizontaleausrichtung gesetzt ist, wird border-block auf die oberen und unteren Rahmen eines Elements angewendet. Umgekehrt wendet ein vertikaler writing-mode border-block auf die rechten und linken Rahmen an.

Syntax

Die logische Eigenschaft border-block ist eine Kurzschreibweise zur Festlegung von border-block-width, border-block-style und border-block-color sowohl für den Anfang als auch für das Ende in einer einzigen Deklaration. Wiederum hängt die Richtung von „Anfang“ und „Ende“ vom Schreibmodus des Elements ab.

border-block: <border-block-width> || <border-block-style> || <border-block-color>

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	92 1	66+	87+	14.1+	73+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
14.7+	92+	90+	92+	64 1

Bestandteileigenschaften

Betrachten wir speziell border-block-width, border-block-style und border-block-color – die drei Eigenschaften, aus denen sich die Kurzschreibweise border-block zusammensetzt.

border-block-width

border-block-width ist so ziemlich das, was man von der border-width Eigenschaft erwarten würde: Sie definiert die Dicke der logischen Blockrahmen eines Elements. Der große Unterschied besteht darin, dass border-block-width sich an den Schreibmodus des Elements anpasst.

/* <'border-block-width'> values */
border-block-width: 15px;
border-block-width: thin; /* equivalent to 1px */
border-block-width: medium; /* equivalent to 3px */
border-block-width: thick; /* equivalent to 5px */

/* Global values */
border-block-width: inherit;
border-block-width: initial;
border-block-width: revert;
border-block-width: unset;

• Initial: medium
• Gilt für: Dasselbe wie border-top-width
• Vererbt: nein
• Prozente: n/a
• Berechneter Wert: Dasselbe wie die entsprechenden border-*-width Eigenschaften
• Kanonsche Reihenfolge: per Grammatik
• Animationstyp: diskret

border-block-width wird ebenfalls als Kurzschreibweise betrachtet, obwohl sie ein Bestandteil von border-block ist. Sie umfasst die folgenden Eigenschaften zur Steuerung der Breiten jedes einzelnen Rahmens in Start- und Endrichtung eines Elements

• border-block-start-width: Die Breite des oberen Rahmens in horizontaler Schreibweise, des linken Rahmens in vertikaler Schreibweise von links nach rechts und des rechten Rahmens in vertikaler Schreibweise von rechts nach links.
• border-block-end-width: Die Breite des unteren Rahmens in horizontaler Schreibweise, des rechten Rahmens in vertikaler Schreibweise von links nach rechts und des linken Rahmens in vertikaler Schreibweise von rechts nach links.

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	92 1	66+	87+	14.1+	73+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
14.7+	92+	90+	92+	64 1

border-block-style

border-block-style ist das logische Äquivalent zu border-style und wird genau auf die gleiche Weise verwendet, um den Typ der um das Element gezeichneten Linie anzugeben. Tatsächlich übernimmt es auch genau dieselben Werte.

/* <'border-block-style'> values */
border-block-style: hidden;
border-block-style: solid
border-block-style: dashed;
border-block-style: dotted;
border-block-style: double;
border-block-style: groove;
border-block-style: ridge;
border-block-style: inset;
border-block-style: outset;

/* Global values */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: unset;

• Initial: none
• Gilt für: Dasselbe wie border-top-style
• Vererbt: nein
• Prozente: n/a
• Berechneter Wert: Dasselbe wie die entsprechenden border-*-style Eigenschaften
• Kanonsche Reihenfolge: per Grammatik
• Animationstyp: diskret

border-block-style wird ebenfalls als Kurzschreibweise betrachtet. Sie umfasst die folgenden Eigenschaften zur Steuerung des Linientyps für einzelne Rahmen in Start- und Endrichtung eines Elements

• border-block-start-style: Der Stil des oberen Rahmens in horizontaler Schreibweise, des linken Rahmens in vertikaler Schreibweise von links nach rechts und des rechten Rahmens in vertikaler Schreibweise von rechts nach links.
• border-block-end-style: Der Stil des unteren Rahmens in horizontaler Schreibweise, des rechten Rahmens in vertikaler Schreibweise von links nach rechts und des linken Rahmens in vertikaler Schreibweise von rechts nach links.

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	92 1	66+	87+	14.1+	73+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
14.7+	92+	90+	92+	64 1

border-block-color

border-block-color wird verwendet, um die Rahmenfarbe anzugeben.

border-block-color: yellow;
border-block-color: #F5F6F7;
border-block-color: rgba(170, 50, 220, .6);
border-block-color: hsla(50, 100%, 50%, .6);

/* Global values */
border-block-color: inherit;
border-block-color: initial;
border-block-color: revert;
border-block-color: unset;

• Initial: none
• Gilt für: Dasselbe wie border-top-color
• Vererbt: nein
• Prozente: n/a
• Berechneter Wert: Dasselbe wie die entsprechenden border-*-color Eigenschaften
• Kanonsche Reihenfolge: per Grammatik
• Animationstyp: nach berechnetem Werttyp

border-block-color wird ebenfalls als Kurzschreibweise betrachtet. Sie umfasst die folgenden Eigenschaften zur Steuerung des Typs der Linie, die für einzelne Rahmen in Start- und Endrichtung eines Elements gezeichnet wird

• border-block-start-color: Die Farbe des oberen Rahmens in horizontaler Schreibweise, des linken Rahmens in vertikaler Schreibweise von links nach rechts und des rechten Rahmens in vertikaler Schreibweise von rechts nach links.
• border-block-end-color: Die Farbe des unteren Rahmens in horizontaler Schreibweise, des rechten Rahmens in vertikaler Schreibweise von links nach rechts und des linken Rahmens in vertikaler Schreibweise von rechts nach links.

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	79+	41+	69+	12.1+	56+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
12.2+	92+	90+	92+	64

Lassen Sie uns darüber sprechen, nur eine Seite zu deklarieren

Aber Moment! Sie denken vielleicht daran, wie Sie einen Rahmen nur für eine Seite Ihres Containers deklarieren könnten, anstatt ihn oben und unten oder links und rechts zu haben. Wenn wir mit physischen CSS-Eigenschaften arbeiten würden, könnten wir einfach auf die einzelnen border-top, border-bottom, border-right und border-left Eigenschaften zugreifen.

Aber für logische Eigenschaften verwenden wir border-block-start und border-block-end, um einzelne Rahmen festzulegen. Betrachten wir beide im Detail und sehen wir, wie sie funktionieren.

border-block-start

border-block-start formatiert den logischen „Anfangs“-Rahmen eines Elements. Wenn wir also in einem Standard-Horizontal-Schreibmodus von oben nach unten arbeiten, ist der obere Rahmen der Anfang und – Spoiler-Alarm – der untere Rahmen ist das Ende.

.box {
  border-block-start: 5px solid red;
  writing-mode: horizontal-tb;
  height: 200px;
  width: 200px;
}

Aber! Wenn wir die Schreibrichtung ändern würden, z. B. auf vertikal von links nach rechts, dann ist die Anfangskante um 90 Grad gedreht, was den linken Rahmen zum Anfang macht.

Und wenn wir alles auf vertikal von rechts nach links umstellen, können Sie es sich wahrscheinlich schon denken: Der rechte Rahmen wird zum Anfang.

Schreibmodus	Anfangsrahmen
horizontal-tb	Oberer Rahmen
vertical-lr	Linker Rahmen
vertical-rl	Rechter Rahmen

border-block-end

border-block-end ist alles, was wir gerade bei border-block-start betrachtet haben, nur in die entgegengesetzte Richtung. Wenn also in einem horizontalen Schreibmodus von oben nach unten der „Anfang“ der obere Rahmen ist, dann ist das „Ende“ der untere Rahmen.

.box {
  border-block-end: 5px solid red;
  writing-mode: horizontal-tb;
  height: 200px;
  width: 200px;
}

Schreibmodus	Endrahmen
horizontal-tb	Unterer Rahmen
vertical-lr	Rechter Rahmen
vertical-rl	Linker Rahmen

Bestandteile der Bestandteile!

Wir haben gerade gesehen, wie border-block eine Kurzschreibweise für border-block-start und border-block-end ist. Wir wissen auch, dass border-block drei weitere Eigenschaften als Werte nimmt

• border-block-width
• border-block-style
• border-block-color

Nun, wenn Sie es glauben können, sind jede dieser Eigenschaften ebenfalls Kurzschreibweisen für einzelne Eigenschaften. Wir können diese tatsächlich verwenden, um die Dicke, den Stil und die Farbe jedes einzelnen Rahmens eines Elements zu formatieren, indem wir „start“ und „end“ in den Eigenschaftsnamen einfügen

Start-Rahmen-Eigenschaften	Was es bewirkt
border-block-start-width	Legt die Dicke des „Anfangs“-Rahmens fest
border-block-start-style	Legt den Linienstil des „Anfangs“-Rahmens fest
border-block-start-color	Legt die Farbe des „Anfangs“-Rahmens fest

End-Rahmen-Eigenschaften	Was es bewirkt
border-block-end-width	Legt die Dicke des „End“-Rahmens fest
border-block-end-style	Legt den Linienstil des „End“-Rahmens fest
border-block-end-color	Legt die Farbe des „End“-Rahmens fest

Weitere Informationen

• CSS Logical Properties and Values Level 1 specification
• MDN-Dokumentation

Weitere Lektüre

Verwandt