`row-rule-inset-junction` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die CSS-Kurzschreibweise row-rule-inset-junction kann verwendet werden, um sowohl den linken als auch den rechten Endpunkt von Zeilenliniensegmenten zu versetzen, wenn es sich um Verbindungsendpunkte handelt, also um Endpunkte an Zwischenraumkreuzungen, an denen sich Liniensegmente schneiden.

Probieren Sie es aus

row-rule-inset-junction: 0;

row-rule-inset-junction: 10px;

row-rule-inset-junction: 0.5em -0.5em;

row-rule-inset-junction: overlap-join;

row-rule-inset-junction: overlap-join 10px;

<section id="default-example">
  <div id="example-element">
    <i>A</i>
    <i>B</i>
    <i>C</i>
    <i>D</i>
    <i>E</i>
    <i>F</i>
    <i>G</i>
    <i>H</i>
    <i>I</i>
    <i>J</i>
    <i>K</i>
    <i>L</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  rule: solid thick lightpink;
  row-rule-color: magenta;
  row-rule-break: intersection;
  gap: 1.5em;
  rule-overlap: row-over-column;
  border: 1px solid rebeccapurple;
  margin: auto;
  rule-visibility-items: around;
}
#example-element i {
  background-color: #efefef;
  padding: 1em;
}

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

row-rule-inset-junction-end
row-rule-inset-junction-start

Syntax

css

/* Keywords */
row-rule-inset-junction: overlap-join;

/* <length-percentage> values */
row-rule-inset-junction: 0;
row-rule-inset-junction: 1em;
row-rule-inset-junction: -5px;
row-rule-inset-junction: -25%;

/* Two values */
row-rule-inset-junction: 0 1em;
row-rule-inset-junction: -5px -25%;
row-rule-inset-junction: overlap-join 10px;

/* Global values */
row-rule-inset-junction: inherit;
row-rule-inset-junction: initial;
row-rule-inset-junction: revert;
row-rule-inset-junction: revert-layer;
row-rule-inset-junction: unset;

Werte

Für diese Eigenschaft werden ein oder zwei Werte aus der folgenden Liste angegeben:

overlap-join: Gibt an, dass sich das Verbindungssegment über die Spaltenlinie erstrecken soll. Der berechnete Wert entspricht der Hälfte des Werts von column-gap zuzüglich der Hälfte des verwendeten Werts von column-rule-width.
<length-percentage>: Gibt die Größe des Einzugs an. Prozentwerte beziehen sich auf den Verbindungsendpunkt, dessen Wert dem von column-gap entspricht.

Beschreibung

Mit der Kurzschreibweise row-rule-inset-junction lassen sich die Eigenschaften row-rule-inset-junction-start und row-rule-inset-junction-end festlegen. Dadurch werden sowohl der Anfangs- als auch der Endendpunkt von Verbindungssegmenten eingerückt oder nach außen versetzt, die sich am linken und rechten Ende von Zeilenliniensegmenten befinden (beziehungsweise am rechten und linken Ende bei Sprachen mit Schreibrichtung von rechts nach links).

Wird ein Wert angegeben, werden beide Eigenschaften auf diesen Wert gesetzt. Werden zwei Werte angegeben, erhält -start den ersten und -end den zweiten Wert. Positive Werte verkürzen das Segment beziehungsweise rücken es ein. Negative Werte und das Schlüsselwort overlap-join verlängern es beziehungsweise versetzen es nach außen. Der Standardwert ist 0.

Die Eigenschaft row-rule-inset-junction ist Bestandteil mehrerer Kurzschreibweisen:

Um die Verbindungsendpunkte sowohl von Zeilen- als auch von Spaltensegmenten einzurücken, können die Kurzschreibweisen row-rule-inset-junction und column-rule-inset-junction über die Kurzschreibweise rule-inset-junction festgelegt werden.
Um sowohl die äußeren Endpunkte als auch die Verbindungsendpunkte von Zeilensegmenten einzurücken, können die Kurzschreibweisen row-rule-inset-junction und row-rule-inset-cap über die Kurzschreibweise row-rule-inset festgelegt werden.

Alle Segmentendpunkte, einschließlich der -cap- und -column-Entsprechungen dieser Eigenschaft, können über die Kurzschreibweise rule-inset festgelegt werden.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

row-rule-inset-junction = 
  <inset-value> <inset-value>?  

<inset-value> = 
  <length-percentage>  |
  overlap-join         

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie row-rule-inset-junction festgelegt wird, um die Enden von Verbindungssegmenten in Flex-Containern einzurücken.

HTML

Das Markup enthält zwei <div>-Elemente mit jeweils sieben Kindelementen. Der einzige Unterschied zwischen den beiden Containern besteht darin, dass der zweite zusätzlich die Klasse column hat.

html

<h1>Insetting junction row rule endpoints</h1>
<article>
  <section>
    <h2>flex-direction: row</h2>
    <div class="flexbox">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
  <section>
    <h2>flex-direction: column</h2>
    <div class="flexbox column">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
</article>

<p>
  <label
    >Change the size of the inset.
    <input type="range" min="-40" max="16" value="16" id="inset"
  /></label>
  <output id="o">16px</output>
</p>

CSS

Mit der Eigenschaft display machen wir die .flexbox-Elemente zu Flex-Containern. Mithilfe von flex-wrap und flex-line-count verteilen wir die Elemente auf drei Flex-Zeilen. Mit rule definieren wir hellblaue Linien für die Spalten- und Zeilenzwischenräume. Anschließend überschreiben wir row-rule-color, sodass die Linien in den Zeilenzwischenräumen ein dunkleres blue erhalten. Außerdem setzen wir die Eigenschaft rule-overlap auf row-over-column, damit Zeilensegmente bei einer Überlappung über den Spaltensegmenten gezeichnet werden. Zuletzt setzen wir row-rule-inset-junction auf 16px, sodass Anfang und Ende denselben Wert erhalten.

css

.flexbox {
  display: flex;
  flex-wrap: balance;
  flex-line-count: 3;
  gap: 20px;
  rule: 5px solid lightblue;
  row-rule-color: blue;
  rule-overlap: row-over-column;

  row-rule-inset-junction: 16px;
}

Für den Container .column setzen wir außerdem flex-direction auf column. Dadurch verläuft die Hauptachse des Flex-Containers vertikal über die Seite, und die Elemente werden in Spalten statt in Zeilen angeordnet.

css

.column {
  flex-direction: column;
}

Das übrige CSS ist der Kürze halber ausgeblendet.

h1,
article {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  font-size: 1.25em;
}
h2 {
  font-size: 1em;
}
article {
  display: flex;
  gap: 5vw;
  rule: 1px solid black;
  width: 100vw;
}
section {
  flex-basis: 45vw;
}
.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  height: 30px;
}
output {
  display: inline-block;
  width: 2em;
}
p {
  margin-top: 2.5em;
}
@layer no-support {
  @supports not (row-rule-inset-junction: 16px) {
    body::before {
      content: "Your browser doesn't support the row-rule-inset-junction property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const inset = document.getElementById("inset");
const containers = document.querySelectorAll(".flexbox");
const output = document.getElementById("o");

inset.addEventListener("input", () => {
  const val = `${inset.value}px`;
  containers[0].style.rowRuleInsetJunction = val;
  containers[1].style.rowRuleInsetJunction = val;
  output.innerText = val;
});

Ergebnis

Ändern Sie die Größe des Einzugs. Beachten Sie, dass diese Eigenschaft nur Zeilenlinien betrifft, die in mehrere Segmente aufgeteilt sind. Besteht eine Zeilenlinie aus einem einzigen Segment, das sich über den Container erstreckt, hat dieses Segment zwei äußere Endpunkte und keine Verbindungsendpunkte. Änderungen am Wert von row-rule-inset-junction wirken sich dann nicht darauf aus.

Mit Grid-Layout

Dieses Beispiel zeigt, wie sich mit row-rule-inset-junction die Anfangs- und Endendpunkte von Zeilenverbindungssegmenten in einem Grid-Container um unterschiedliche Werte einrücken lassen.

HTML

Wir verwenden ein <ul>-Element als Container mit mehreren <li>-Kindelementen, die jeweils zu einem Grid-Element werden.

html

<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
</ul>

<p>
  <label
    >Change the <code>-start</code> value.
    <input type="range" min="-40" max="40" value="16" id="start" data-unit="px"
  /></label>
  <output id="og">16px</output>
</p>
<p>
  <label
    >Change the <code>-end</code> value.
    <input type="range" min="-40" max="40" value="0" id="end" data-unit="px"
  /></label>
  <output id="ow">0px</output>
</p>

CSS

Wir machen das <ul> zu einem Grid-Container, indem wir die Eigenschaft display auf grid setzen. Die Eigenschaft grid-template-columns legt fest, dass das Grid sechs Spalten hat. Mit list-style-type entfernen wir die Aufzählungszeichen und setzen die Zeilen- und Spaltenabstände über die Kurzschreibweise gap auf 20px. Farbe, Breite und Linienstil aller Linien legen wir mit der Kurzschreibweise rule fest. Anschließend ändern wir nur die Farbe der Spaltenlinien mit der Eigenschaft column-rule-color.

Mit der Eigenschaft row-rule-break unterbrechen wir die Zeilenlinien an jeder Kreuzung. Ohne diese Unterbrechungen gäbe es keine Zeilenverbindungssegmente, die wir gestalten könnten!

Zuletzt verwenden wir die Eigenschaft row-rule-inset-junction, um den Anfang jedes Zeilenverbindungssegments um 16px einzurücken und das Ende nicht einzurücken.

Außerdem legen wir fest, dass sich das sechste Grid-Element über drei Spalten erstreckt.

css

ul {
  display: grid;
  grid-template-columns: repeat(6, auto);
  list-style-type: "";
  gap: 20px;
  rule: 10px solid olive;
  column-rule-color: palegoldenrod;
  row-rule-break: intersection;

  row-rule-inset-junction: 16px 0;
}

li:nth-of-type(8) {
  grid-column-end: span 3;
}

Das übrige CSS ist der Kürze halber ausgeblendet.

ul {
  border: 1px solid;
  place-items: center;
  width: 95vw;
  padding: 0;
}
li {
  text-align: center;
  font-family: sans-serif;
  background-color: #ededed;
  padding: 2em 1em;
  width: 100%;
  box-sizing: border-box;
}

li code {
  display: block;
  margin: 0 auto;
  text-align: left;
  width: 30vw;
}
output {
  font-family: monospace;
}
input {
  accent-color: olive;
}
@layer no-support {
  @supports not (row-rule-inset-junction: 16px) {
    body::before {
      content: "Your browser doesn't support the row-rule-inset-junction property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const ul = document.querySelector("ul");
const startSize = document.getElementById("start");
const og = document.getElementById("og");
const endSize = document.getElementById("end");
const ow = document.getElementById("ow");
const cell = document.querySelector("li:nth-of-type(8)");
let text = "";
function update() {
  ul.style.rowRuleInsetJunction =
    text = `${startSize.value}px ${endSize.value}px`;
  cell.innerHTML = `<code>rule-inset-cap: ${text};</code>`;
}

update();

startSize.addEventListener("input", () => {
  og.innerText = `${startSize.value}px`;
  update();
});

endSize.addEventListener("input", () => {
  ow.innerText = `${endSize.value}px`;
  update();
});