`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 rule-inset-cap kann verwendet werden, um die äußeren Endpunkte von Liniensegmenten in Spalten- und Zeilenabständen um denselben Wert zu versetzen.

Probieren Sie es aus

rule-inset-cap: -20px;

rule-inset-cap: 0;

rule-inset-cap: 1em;

rule-inset-cap: 100%;

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>Q</i>

    <i id="y">Y</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;
  column-rule-color: rebeccapurple;
  gap: 1em;
  rule-overlap: column-over-row;
  rule-visibility-items: between;
  border: 1px solid rebeccapurple;
  overflow: visible;
  margin: 1em;
}
#example-element i {
  padding: 8px;
  border: 1px dashed;
}
#y {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}
#z {
  grid-column: 5 / 6;
  grid-row: 4 / 5;
}
#bang {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
}

Zugehörige Eigenschaften

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

Syntax

css

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

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

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

/* Global values */
rule-inset-cap: inherit;
rule-inset-cap: initial;
rule-inset-cap: revert;
rule-inset-cap: revert-layer;
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 werden für äußere Endpunkte am Rand des Containers zu 0 aufgelöst. Bei inneren Abständen beziehen sich Prozentwerte für äußere Endpunkte von Spaltenliniensegmenten auf die Höhe des angrenzenden row-gap und für äußere Endpunkte von Zeilenliniensegmenten auf die Breite des angrenzenden column-gap.

Mit der Kurzschreibweise rule-inset-cap können Sie die Eigenschaften row-rule-inset-cap und column-rule-inset-cap in einer einzigen Deklaration auf denselben Wert setzen. Dadurch werden die äußeren Endpunkte von Zeilen- und Spaltenliniensegmenten um die angegebenen Werte eingerückt.

Wenn Sie einen Wert angeben, werden sowohl die Anfangs- als auch die Endpunkte der Segmente auf diesen Wert gesetzt. Wenn Sie zwei Werte angeben, werden die Anfangspunkte der Zeilen- und Spaltenliniensegmente auf den ersten Wert und die Endpunkte auf den zweiten Wert gesetzt.

Der Standardwert ist 0, was bei äußeren Endpunkten overlap-join entspricht. Positive Werte verkürzen das Segment, während negative Werte es verlängern.

Die Eigenschaft rule-inset-cap kann zusammen mit der Eigenschaft rule-inset-junction über die Kurzschreibweise rule-inset gesetzt werden.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

rule-inset-cap = 
  <'column-rule-inset-cap'>  

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

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

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

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie Sie mit rule-inset-cap die äußeren Endpunkte von Liniensegmenten in Flex-Containern einrü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 cap 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 Zeilen- als auch in Spaltenabständen gezeichnet wird. Anschließend überschreiben wir column-rule-color, um die vertikalen Abstände mit einem dunkleren blue zu gestalten. Schließlich setzen wir rule-inset-cap auf 16px.

css

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

  rule-inset-cap: 16px;
}

Außerdem setzen wir flex-direction für den Container .column, damit seine Elemente in Spalten statt in Zeilen angeordnet werden. Der Kürze halber sind die übrigen CSS-Stile und der Code für die Interaktivität des Formulars ausgeblendet.

css

.column {
  flex-direction: column;
}

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

Ergebnis

Ändern Sie die Größe des Einzugs.

Zwei Werte festlegen

HTML

<p>
  <label
    >Change the <code>row-rule-inset-cap</code> value.
    <input type="range" min="-40" max="40" value="40" id="row" data-unit="px"
  /></label>
  <output id="og">40px</output>
</p>
<p>
  <label
    >Change the <code>column-rule-inset-cap</code> value.
    <input type="range" min="-40" max="40" value="-40" id="col" data-unit="px"
  /></label>
  <output id="ow">-40px</output>
</p>

Unser HTML enthält eine ungeordnete Liste (<ul>) mit neun Listeneinträgen (<li>):

html

<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>
</ul>

Die Benutzeroberfläche zur Auswahl verschiedener Werte und das JavaScript für die Interaktivität sind der Kürze halber ausgeblendet.

CSS

Wir erstellen einen Grid-Container, indem wir display auf grid setzen, mit grid-template-columns vier Spalten erstellen und einen gap von 30px hinzufügen. Mit den Eigenschaften row-rule und column-rule definieren wir die Linien. Anschließend verwenden wir rule-inset-cap, um die Anfangspunkte der äußeren Liniensegmente um 40px einzurücken und ihre Endpunkte mit -40px nach außen zu verschieben.

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

css

ul {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;
  row-rule: 16px solid olive;
  column-rule: 10px solid palegoldenrod;

  rule-inset-cap: 40px -40px;
}
li:nth-of-type(6) {
  grid-column-end: span 2;
}

ul {
  width: calc(95vw - 80px);
  border: 1px solid;
  list-style-type: none;
  margin: auto;
  padding: 0;
  place-items: center;
}
li {
  place-content: center;
  text-align: center;
  font-family: sans-serif;
  background-color: #ededed;
  padding: 5vw;
  width: 100%;
  box-sizing: border-box;
}
li:nth-of-type(6) {
  padding: 2em 0;
}
li code {
  display: block;
  margin: 0 auto;
  text-align: left;
  background-color: #fcfcfc;
  width: calc(47.5vw - 40px);
}
output {
  font-family: monospace;
}
input {
  accent-color: olive;
}
@layer no-support {
  @supports not (rule-inset-cap: 16px) {
    body::before {
      content: "Your browser doesn't support the rule-inset-cap property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const ul = document.querySelector("ul");
const rowSize = document.getElementById("row");
const og = document.getElementById("og");
const colSize = document.getElementById("col");
const ow = document.getElementById("ow");
const cell = document.querySelector("li:nth-of-type(6)");
let text = "";
function update() {
  ul.style.ruleInsetCap = text = `${rowSize.value}px ${colSize.value}px`;
  cell.innerHTML = `<code>rule-inset-cap: ${text};</code>`;
}

update();

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

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

Ergebnis

Ändern Sie die Einzugswerte für die Anfangs- und Endpunkte der äußeren Liniensegmente.

Innere äußere Liniensegmente

Dieses Beispiel zeigt, wie Sie mit rule-inset-cap die äußeren Endpunkte von Liniensegmenten in einem Grid-Container einrücken und wie die Eigenschaft rule-visibility-items innere Endpunkte in äußere Endpunkte von Liniensegmenten umwandeln kann.

HTML

Als Container für mehrere Listeneinträge (<li>) verwenden wir eine ungeordnete Liste (<ul>).

Außerdem fügen wir ein <select>-Element mit einem <option>-Element für jedes rule-visibility-items-Schlüsselwort sowie ein <input>-Element vom Typ range hinzu.

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>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 inset size.
    <input type="range" min="-40" max="16" value="0" id="inset" data-unit="px"
  /></label>
  <output id="o"></output>
</p>

CSS

Wir erstellen einen Grid-Container, indem wir display auf grid setzen, mit grid-template-columns sechs Spalten erstellen und einen gap von 20px hinzufügen. Mit der Eigenschaft rule definieren wir die Linien und überschreiben die Farbe der Zeilenlinien mit row-rule-color. Wir setzen rule-break so, dass die Linien an jeder Kreuzung unterbrochen werden und jedes Liniensegment eigenständig ist. rule-visibility-items setzen wir ausdrücklich auf den Standardwert normal. Anschließend verwenden wir rule-inset-cap, um alle äußeren Endpunkte der Liniensegmente um 16px einzurücken.

Außerdem legen wir mit der Eigenschaft grid-column-end fest, dass sich der siebte Listeneintrag über zwei Spalten erstreckt.

css

ul {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 20px;
  rule: 10px solid olive;
  row-rule-color: palegoldenrod;
  rule-break: intersection;
  rule-visibility-items: normal;

  rule-inset-cap: 16px;
}

li:nth-of-type(7) {
  grid-column-end: span 2;
}

Der Kürze halber sind die übrigen CSS-Stile und der Code für die Interaktivität des Formulars ausgeblendet.

ul {
  place-items: center;
  padding: 0;
  list-style-type: none;
  border: 1px solid;
  margin: 40px;
}
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 + 12) {
  grid-row: 4 / 5;
}
li:nth-of-type(10) {
  grid-column: 5/6;
}
li:nth-of-type(11) {
  grid-column: 6/7;
}

li:nth-of-type(15) {
  grid-area: 4 / 5 / 5 / 6;
}
li:nth-of-type(16) {
  grid-area: 4 / 6 / 5 / 7;
}
li:nth-of-type(17) {
  display: none;
  grid-area: 5 / 6 / 6 / 7;
}
@layer no-support {
  @supports not (rule-inset-cap: 16px) {
    body::before {
      content: "Your browser doesn't support the rule-inset-cap property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

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.ruleInsetCap = `${inset.value}${inset.dataset["unit"]}`;
});

visibility.addEventListener("change", () => {
  ul.style.ruleVisibilityItems = `${visibility.value}`;
});

Ergebnis

Wählen Sie im Dropdown-Menü between aus, damit Liniensegmente nur dann gezeichnet werden, wenn beide angrenzenden Grid-Bereiche ein Grid-Element enthalten. Dadurch entstehen innere Segmente mit äußeren Endpunkten. Ändern Sie anschließend den Einzugswert, um sichtbar zu machen, welche Endpunkte äußere Endpunkte von Liniensegmenten sind.