`row-rule-inset-cap-start` 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.

Mit der CSS-Eigenschaft row-rule-inset-cap-start lässt sich der Anfang von Zeilentrennliniensegmenten an Cap-Endpunkten verschieben.

Probieren Sie es aus

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

row-rule-inset-cap-start: 0;

row-rule-inset-cap-start: 1em;

row-rule-inset-cap-start: 100%;

row-rule-inset-cap-start: 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 magenta;
  row-rule-color: rebeccapurple;
  gap: 1em;
  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;
}

Syntax

css

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

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

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

Werte

Für diese Eigenschaft wird ein einzelner Wert 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 den Cap-Endpunkt, dessen Bezugsgröße entweder column-gap oder 0 ist.

Die Eigenschaft row-rule-inset-cap-start zieht den Anfang von Cap-Segmentendpunkten am Anfangsrand des Containers und an Cap-Endpunkten, an denen sich keine Trennliniensegmente schneiden, nach innen. Der Standardwert ist 0, was overlap-join entspricht. Positive Werte verkürzen das Segment, während negative Werte es verlängern.

Zeilentrennlinien werden innerhalb eines Zeilenabstands als ein oder mehrere Segmente gezeichnet. Diese Segmente liegen zwischen:

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.

Längenwerte für row-rule-inset-cap-start ziehen den Anfang sowohl innerer Cap-Segmentendpunkte als auch solcher am Anfangsrand um den angegebenen Wert nach innen. Negative Längenwerte verschieben sie nach außen, sodass Cap-Segmente am Containerrand über dessen Anfangsrand hinausragen.

Einzüge mit Prozentwerten beziehen sich bei inneren Cap-Segmenten auf die Größe von column-gap. Bei Cap-Segmenten am Anfangsrand des Containers beziehen sich Prozentwerte auf 0 und ergeben daher immer 0px.

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

Um sowohl das linke als auch das rechte Ende von Zeilen-Cap-Segmenten nach innen zu versetzen, können row-rule-inset-cap-start und die Eigenschaft row-rule-inset-cap-end über die Kurzschreibweise row-rule-inset-cap festgelegt werden.
Um den Anfangsrand aller Zeilensegmente nach innen zu versetzen, können row-rule-inset-cap-start und die Eigenschaft row-rule-inset-junction-start über die Kurzschreibweise row-rule-inset-start festgelegt werden.

Alle Segmentendpunkte, einschließlich der entsprechenden -end-, -junction- und column--Varianten dieser Eigenschaft, können mit der Kurzschreibweise rule-inset festgelegt werden.

Den Anfang von Cap-Segmenten verstehen

Ein Cap-Segmentendpunkt ist jeder Segmentendpunkt, der kein Junction-Segmentendpunkt ist. Dazu gehören Endpunkte an den Inhaltsrändern des Containers sowie Endpunkte an einer Kreuzung von Abständen, an der keine weiteren Trennliniensegmente vorhanden sind.

row-rule-inset-cap-start steuert den Einzug am Anfang von Zeilentrennlinien mit Cap-Endpunkten. Die Eigenschaft kann den Anfang folgender Segmente verkürzen oder verlängern:

Zeilentrennliniensegmente, die an den Anfangsrand des Containers grenzen;
Zeilentrennliniensegmente, deren linke Seite an einen inneren Abstand grenzt, in dem keine weiteren Zeilen- oder Spaltentrennliniensegmente vorhanden sind.

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

In der folgenden Demonstration beginnen die äußersten linken Segmente der Zeilentrennlinien, die an den Containerrand grenzen, an einem Cap-Endpunkt. Mit row-rule-inset-cap-start: -32px werden alle diese Endpunkte um 32px nach außen verschoben. Da Zeilentrennlinien das Boxmodell nicht beeinflussen, wirken sich diese überstehenden Linien nicht auf das Layout des Inhalts aus. Ändern Sie den Einzugswert vom Typ <length>, um besser zu erkennen, welche Segmente an Cap-Segmentendpunkten beginnen.

<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 <code>
    <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-start: -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-start: 16px) {
    body::before {
      content: "Your browser doesn't support the row-rule-inset-cap-start property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

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

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

inset.addEventListener("input", () => {
  output.innerText =
    ul.style.rowRuleInsetCapStart = `${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 {
    ul.style.rowRuleStyle = "solid";
  }
});

Ändern Sie den Einzug. Mit 0px wird der Anfang der Zeilentrennlinien am Anfang des Containers ausgerichtet. Dies ist der Standardwert.

Wählen Sie between als Wert für rule-visibility-items. Bei diesem Wert werden Trennlinien in einem Abstandssegment nur gezeichnet, wenn sich in beiden angrenzenden Bereichen Elemente befinden. Auch hier liegen Cap-Endpunkte von Zeilentrennlinien am Anfangsrand des Containers. Die dritte Zeilentrennlinie, die durch einen doppelten Linienstil gekennzeichnet ist, besitzt ein zusätzliches Segment mit Cap-Endpunkt: die linke Seite des Segments zwischen den Elementen 12 und 16. Dort trifft es auf keine anderen Trennliniensegmente und wird deshalb von row-rule-inset-cap-start beeinflusst.

In diesem Fall hat der Wert around der Eigenschaft rule-visibility-items, bei dem Trennlinien in einem Abstandssegment gezeichnet werden, sobald sich in einem angrenzenden Bereich ein Element befindet, keine zusätzlichen Cap-Segmentendpunkte erzeugt. Der Anfang des Trennliniensegments zwischen 12 und 16 schneidet die Spaltentrennliniensegmente im Spaltenabstand links von diesen Elementen. Dadurch entstehen Junction- statt Cap-Segmentendpunkte. Junction-Endpunkte werden stattdessen mit der Eigenschaft row-rule-inset-junction-start nach innen versetzt.

Prozentwerte verstehen

Die Bezugsgröße eines Prozentwerts hängt von der Position des Endpunkts ab. Prozentwerte für innere Endpunkte beziehen sich auf die Breite des Abstands am Cap-Endpunkt: an einem Trennlinienabstand also auf column-gap, am Rand des Containers dagegen auf 0.

Dieses Beispiel ist nicht fehlerhaft: Alle Cap-Segmente beginnen am Rand des Containers, daher betragen alle Einzüge standardmäßig 0.

Der Schieberegler hat nur dann eine Wirkung, wenn rule-visibility-items auf between gesetzt ist, und auch dann nur auf das einzelne innere Segment mit Cap-Endpunkt, das durch diesen Wert entsteht – das Segment zwischen 12 und 16. Nur bei diesem Segment bezieht sich die prozentuale Verschiebung auf die Breite von column-gap, die hier 20px beträgt. Bei 100% wird der Anfang des Cap-Segments um 20px nach innen versetzt. Bei -200% wird das Segment um 40px nach außen verlängert, sodass das Trennliniensegment durch den 20px breiten Abstand bis in die vorherige Spalte gezeichnet wird.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

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

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

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

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie Sie mit row-rule-inset-cap-start den Anfangsrand von Cap-Segmenten in Flex-Containern nach innen versetzen.

HTML

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 hellblaue rule, die sowohl in Spalten- als auch in Zeilenabständen gezeichnet wird, und überschreiben anschließend row-rule-color, um die Zeilenabstände mit einem dunkleren blue zu versehen. Schließlich setzen wir row-rule-inset-cap-start 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-start: 16px;
}

Für den Container .column legen wir außerdem flex-direction fest. 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: 42px;
  rule: 1px solid black;
  width: 100vw;
  padding: 0 50px;
  box-sizing: border-box;
}
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-start: 16px) {
    body::before {
      content: "Your browser doesn't support the row-rule-inset-cap-start 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.rowRuleInsetCapStart = val;
  containers[1].style.rowRuleInsetCapStart = val;
  output.innerText = val;
});

Ergebnis

Ändern Sie die Größe des Einzugs.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

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-start CSS property

HTML

CSS

Ergebnis

Help improve MDN

`row-rule-inset-cap-start` CSS property