`row-rule-inset-cap` 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-cap kann verwendet werden, um die Cap-Endpunkte von Zeilenregelsegmenten am linken und rechten Rand des Containers sowie Endpunkte, an denen die Segmente keine anderen Spalten- oder Zeilensegmente schneiden, zu versetzen.

Probieren Sie es aus

row-rule-inset-cap: -20px;

row-rule-inset-cap: 0;

row-rule-inset-cap: 1em;

row-rule-inset-cap: 100%;

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

<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>
    <i>M</i>
    <i>N</i>
    <i>O</i>
    <i>P</i>

    <i id="r">R</i>
    <i id="z">Z</i>
    <i id="bang">!</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  rule: solid thick rebeccapurple;
  row-rule-color: magenta;
  gap: 0.5em;
  rule-overlap: row-over-column;
  rule-visibility-items: between;
  border: 1px solid rebeccapurple;
  overflow: visible;
  margin: 1em;
}
#example-element i {
  padding: 8px;
  border: 1px dashed;
}
#r {
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}
#z {
  grid-column: 5 / 6;
  grid-row: 4 / 5;
}
#bang {
  grid-column: 5 / 6;
  grid-row: 5 / 6;
}

Zugehörige Eigenschaften

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

Syntax

css

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

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

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

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

Werte

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

overlap-join: Wird zu 0 aufgelöst.
<length-percentage>: Gibt die Größe des Einzugs an. Prozentwerte beziehen sich auf die Breite des kreuzenden Zwischenraums: an Verbindungsstellen von Zwischenräumen ist dies die Breite von column-gap, an Endpunkten am Containerrand 0.

Beschreibung

Mit der Kurzschreibweise row-rule-inset-cap können die Eigenschaften row-rule-inset-cap-start und row-rule-inset-cap-end festgelegt werden. Damit lassen sich sowohl der linke als auch der rechte Rand von Cap-Segmentendpunkten in einer einzigen Deklaration nach innen oder außen versetzen.

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. Der Standardwert ist 0, was bei Cap-Endpunkten overlap-join entspricht. Positive Werte verkleinern das Segment, indem sie seine Endpunkte nach innen versetzen; negative Werte vergrößern es, indem sie die Endpunkte nach außen versetzen.

Zeilenregeln werden innerhalb eines Zeilenzwischenraums als ein oder mehrere Segmente dargestellt. Solche Segmente treten zwischen folgenden Elementen auf:

Benachbarten Zeilen in CSS-Grid-Layouts.
Benachbarten Flex-Elementen oder Flex-Zeilen in Flex-Layouts, abhängig von flex-direction.
Benachbarten Zeilen in mehrspaltigen Layouts, die vorhanden sein können, wenn column-height auf einen <length>-Wert gesetzt ist.

Ob sich eine Zeilenregel über mehrere Spalten erstreckt oder in mehrere Segmente aufgeteilt wird, legt die Eigenschaft row-rule-break fest. Unterbrechungen zwischen Zeilenregelsegmenten im Inneren haben im Allgemeinen die Größe von column-gap.

Längenwerte für row-rule-inset-cap versetzen Segmentendpunkte um den angegebenen Wert nach innen. Negative Längenwerte versetzen sie nach außen, wodurch das Segment breiter wird und Cap-Segmente am linken und rechten Containerrand über diesen Rand hinausragen.

Prozentwerte beziehen sich bei inneren Segmenten auf die Größe von column-gap. Mit -50% reicht das Segment bis zur Mitte des Zwischenraums, mit -100% über den gesamten Zwischenraum. Bei Cap-Segmenten am Containerrand beziehen sich Prozentwerte auf 0 und haben daher keine Auswirkung auf deren Endpunkte.

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

Um die linke und rechte Seite aller Zeilensegmente nach innen zu versetzen, können row-rule-inset-cap und row-rule-inset-junction mit der Kurzschreibweise row-rule-inset festgelegt werden.
Um die Cap-Endpunkte von Zeilen- und Spaltensegmenten nach innen zu versetzen, können row-rule-inset-cap und column-rule-inset-cap mit der Kurzschreibweise rule-inset-cap festgelegt werden.

Alle Segmentendpunkte, einschließlich der durch die entsprechenden -junction- und column--Eigenschaften gesteuerten Endpunkte, können mit der Kurzschreibweise rule-inset festgelegt werden.

Cap-Endpunkte verstehen

Ein Cap-Segmentendpunkt ist jeder Segmentendpunkt, der kein Verbindungsendpunkt ist. Dazu gehören Endpunkte an den Kanten des Inhaltsbereichs eines Containers sowie Endpunkte an einer Verbindungsstelle von Zwischenräumen, an der keine anderen Spalten- oder Zeilensegmente vorhanden sind.

Mit row-rule-inset-cap lassen sich der Anfang und das Ende von Zeilenregeln am Containerrand sowie der Anfang und das Ende innerer Zeilensegmente, an denen keine anderen Segmente vorhanden sind, nach außen oder innen versetzen.

Cap-Segmente werden von den rule-visibility-items-Eigenschaften beeinflusst. Diese legen fest, ob Zeilen- und Spaltenregelsegmente in Zwischenräumen neben leeren Bereichen dargestellt werden. Wird der Wert von auto zu between oder around geändert, können zusätzliche innere Cap-Segmente entstehen.

In der folgenden Demonstration enden die Zeilen am linken und rechten Containerrand in Cap-Endpunkten. Mit row-rule-inset-cap: -32px werden diese Endpunkte um 32px nach außen versetzt. Ändern Sie den Einzugswert <length>, um besser zu erkennen, welche Segmente an Cap-Segmentendpunkten beginnen oder enden.

<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>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
</ul>

<p>
  <label>
    <code>rule-visibility-items</code> value
    <select id="visibility">
      <option>all</option>
      <option>between</option>
      <option>around</option>
      <option selected>normal</option>
    </select>
  </label>
</p>

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

<p>
  <label
    >Change the size of the inset.
    <input
      type="range"
      min="-200"
      max="100"
      value="100"
      id="inset"
      data-unit="%"
  /></label>
  <output id="o">100%</output>
</p>

ul {
  display: grid;
  grid-template-columns: repeat(6, auto);
  list-style-type: none;
  gap: 20px;
  row-rule: 10px solid olive;
  column-rule: 10px solid palegoldenrod;
  rule-overlap: column-over-row;
  rule-visibility-items: normal;
  rule-break: intersection;
  row-rule-inset-cap: -32px;

  border: 1px solid;
  margin: auto 40px;
}
ul {
  place-items: center;
  padding: 0;
}
li {
  text-align: center;
  font-family: sans-serif;
  background-color: #ededed;
  padding: 1em;
  width: 100%;
  box-sizing: border-box;
}
li:nth-of-type(n + 9) {
  grid-row: 3 / 4;
}
li:nth-of-type(n + 13) {
  grid-row: 4 / 5;
}
li:nth-of-type(12),
li:nth-of-type(16) {
  grid-column: 5/6;
}
li:nth-of-type(17) {
  grid-column: 6/7;
}
@layer no-support {
  @supports not (row-rule-inset-cap: 16px) {
    body::before {
      content: "Your browser doesn't support the row-rule-inset-cap property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

ul {
  row-rule-inset-cap: 100%;
}

const inset = document.getElementById("inset");
const visibility = document.getElementById("visibility");
const ul = document.getElementById("ul");
const output = document.getElementById("o");

inset.addEventListener("input", () => {
  o.innerText =
    ul.style.rowRuleInsetCap = `${inset.value}${inset.dataset["unit"]}`;
});

visibility.addEventListener("change", () => {
  ul.style.ruleVisibilityItems = `${visibility.value}`;
  if (visibility.value === "between") {
    ul.style.rowRuleStyle = "repeat(2, solid), double";
  } else if (visibility.value === "around") {
    ul.style.rowRuleStyle = "repeat(3, solid), repeat(2, double)";
  } else {
    ul.style.rowRuleStyle = "solid";
  }
});

visibility.addEventListener("change", () => {
  ul.style.ruleVisibilityItems = `${visibility.value}`;
  if (visibility.value === "between") {
    ul.style.rowRuleStyle = "repeat(2, inset), double, repeat(2, solid)";
  } else if (visibility.value === "around") {
    ul.style.rowRuleStyle = "repeat(3, inset), repeat(2, double)";
  } else {
    ul.style.rowRuleStyle = "solid";
  }
});

Mit 0px werden die Enden der Zeilenregeln am linken und rechten Containerrand ausgerichtet. Dies ist die Standardeinstellung.

Wählen Sie between als Wert für rule-visibility-items. Bei diesem Wert werden Regeln in Zwischenraumsegmenten nur dargestellt, wenn beide angrenzenden Bereiche Elemente enthalten. Auch hier befinden sich Cap-Endpunkte von Zeilenregeln an der Anfangskante des Containers, nun aber keine mehr an der Endkante. Die dritte Zeilenregel, erkennbar an ihrer doppelten Linie, hat zwei zusätzliche Cap-Endpunkte: das Ende des Segments zwischen 11 und 15 sowie den Anfang des Segments zwischen 12 und 16. Diese treffen auf keine anderen Regelsegmente und werden daher von der Eigenschaft row-rule-inset-cap-start beeinflusst.

Der Wert around für rule-visibility-items, bei dem Regeln in einem Zwischenraumsegment dargestellt werden, sobald einer der angrenzenden Bereiche ein Element enthält, erzeugt in diesem Fall keine zusätzlichen Cap-Segmentendpunkte. Alle inneren Segmentendpunkte enden an Verbindungsstellen mit Spaltensegmenten. Dadurch entstehen Verbindungsendpunkte statt Cap-Endpunkten. Verbindungsendpunkte können mit der Kurzschreibweise row-rule-inset-junction nach innen versetzt werden.

Prozentwerte verstehen

Auf welche Länge sich ein Prozentwert bezieht, hängt von der Position des Endpunkts ab. Bei inneren Endpunkten bezieht er sich auf die Breite des Zwischenraums am Cap-Endpunkt: Trifft dieser auf einen Regelzwischenraum, ist dies die Breite von column-gap zuzüglich etwaiger durch justify-content hinzugefügter Abstände. Am Containerrand beträgt die Bezugsgröße 0. Beispielsweise wird row-rule-inset-cap: 50% bei einem inneren Cap-Endpunkt zur Hälfte der Zwischenraumbreite an der Verbindungsstelle aufgelöst (also zur Hälfte des column-gap-Werts), an den Containerrändern dagegen zu 0.

Dieses Beispiel ist nicht fehlerhaft. Wenn rule-visibility-items auf normal gesetzt ist, grenzt jeder Cap-Endpunkt einer Zeilenregel an den linken oder rechten Containerrand. Daher bezieht sich jeder angegebene Prozentwert auf 0.

Wählen Sie around als Wert für rule-visibility-items. Die ersten drei Zeilen beginnen am Containerrand; die erste und die letzte Zeile enden dort ebenfalls. Prozentwerte für diese Cap-Segmentendpunkte werden zu 0 aufgelöst. Alle anderen Segmente enden an inneren Zwischenräumen, in denen Spaltenregelsegmente vorhanden sind. Ihre Endpunkte sind daher keine Cap-Segmentendpunkte.

Wählen Sie between als Wert für rule-visibility-items. Wie in der vorherigen Demonstration entstehen dadurch zwei innere Cap-Segmentendpunkte: Die rechte Seite des Segments zwischen den Elementen 11 und 15 sowie die linke Seite des Segments zwischen den Elementen 12 und 16 treffen wiederum auf keine anderen Regelsegmente. Bei diesen beiden Cap-Endpunkten bezieht sich der prozentuale Versatz auf die Breite von column-gap, die hier 20px beträgt.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

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

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

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

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie mit row-rule-inset-cap die Cap-Segmentendpunkte von Zeilenregeln in Flex-Containern nach innen versetzt werden.

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 cap 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. Wir definieren eine lightblue-rule, die sowohl Spalten- als auch Zeilenzwischenräume markiert, und überschreiben anschließend row-rule-color, um für die Zeilenzwischenräume ein dunkleres blue festzulegen. Schließlich setzen wir row-rule-inset-cap auf 16px.

css

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

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

Außerdem setzen wir flex-direction für den .column-Container. Dadurch ändert sich die Hauptachse des Flex-Containers, sodass die Elemente in Spalten statt in Zeilen angeordnet werden.

css

.column {
  flex-direction: column;
}

Der übrige CSS-Code ist der Kürze halber ausgeblendet.

body {
  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-cap: 16px) {
    body::before {
      content: "Your browser doesn't support the row-rule-inset-cap 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.rowRuleInsetCap = val;
  containers[1].style.rowRuleInsetCap = val;
  output.innerText = val;
});

Ergebnis

Ändern Sie die Größe des Einzugs. Beachten Sie, dass die Zeilensegmente nur an ihren Cap-Endpunkten länger oder kürzer werden: links, rechts oder auf beiden Seiten – also an den Enden, die keine anderen Zeilen- oder Spaltensegmente schneiden.

Spezifikationen

Spezifikation
CSS Gaps Module Level 1 # propdef-row-rule-inset-cap

Browser-Kompatibilität

Siehe auch

row-rule-inset-cap-end
row-rule-inset-cap-start
row-rule-inset-Kurzschreibweise
column-rule-inset-cap-Kurzschreibweise
rule-inset-Kurzschreibweise
row-rule-break
rule-break-Kurzschreibweise
rule-overlap
rule-visibility-items
rule-Kurzschreibweise
CSS gaps-Modul

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

row-rule-inset-cap CSS property

HTML

CSS

Ergebnis

Help improve MDN

`row-rule-inset-cap` CSS property