`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 Cap-Endpunkte von Spalten- und Zeilenregel-Segmenten 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: Entspricht 0.
<length-percentage>: Gibt die Größe des Einzugs an. Prozentwerte entsprechen bei Caps am Rand des Containers 0. Bei inneren Zwischenräumen beziehen sich Prozentwerte für Caps von Spaltensegmenten auf die Höhe des angrenzenden row-gap und für Caps von Zeilensegmenten auf die Breite des angrenzenden column-gap.

Mit der Kurzschreibweise rule-inset-cap können die Eigenschaften row-rule-inset-cap und column-rule-inset-cap in einer einzigen Deklaration auf dieselben Werte gesetzt werden. Dadurch werden die Endpunkte von Zeilen- und Spalten-Cap-Segmenten um die angegebenen Werte eingerückt.

Wenn Sie einen Wert angeben, werden sowohl die Anfangs- als auch die Endpunkte der Cap-Segmente auf diesen Wert gesetzt. Wenn Sie zwei Werte angeben, wird der erste Wert für die Anfangspunkte der Zeilen- und Spalten-Cap-Segmente und der zweite Wert für deren Endpunkte verwendet.

Der Standardwert ist 0, was bei Cap-Endpunkten overlap-join entspricht. Positive Werte verkürzen die Segmente, während negative Werte sie 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 Endpunkte von Cap-Segmenten in Flex-Containern einrücken.

HTML

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 mit rule hellblaue Regeln für die Zeilen- und Spaltenzwischenräume und überschreiben anschließend column-rule-color, um die vertikalen Zwischenräume in einem dunkleren blue zu gestalten. Zum Schluss 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. Die übrigen CSS-Stile und der Code, der das Formular interaktiv macht, wurden der Kürze halber 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 wurden 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 Regeln. Anschließend verwenden wir die Eigenschaft rule-inset-cap, um die Anfangspunkte der Cap-Segmente um 40px einzurücken und ihre Endpunkte mit -40px nach außen zu versetzen.

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 = "";
const update = function () {
  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 Cap-Segmente.

Innere Cap-Segmente

Dieses Beispiel zeigt, wie Sie mit rule-inset-cap die Endpunkte von Cap-Segmenten in einem Grid-Container einrücken und wie die Eigenschaft rule-visibility-items innere Endpunkte zu Endpunkten von Cap-Segmenten machen kann.

HTML

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

Außerdem fügen wir ein <select>-Element mit je einem <option>-Element für jedes Schlüsselwort von rule-visibility-items 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 Regeln und überschreiben die Farbe der Zeilenregeln mit der Eigenschaft row-rule-color. Wir setzen die Eigenschaft rule-break so, dass die Regeln an jeder Kreuzung unterbrochen werden und jedes Regelsegment für sich steht. rule-visibility-items setzen wir ausdrücklich auf den Standardwert normal. Anschließend verwenden wir die Eigenschaft rule-inset-cap, um alle Endpunkte der Cap-Segmente 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;
}

Die übrigen CSS-Stile und der Code, der das Formular interaktiv macht, wurden der Kürze halber 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 between aus der Dropdown-Liste aus, damit Regelsegmente nur dort gezeichnet werden, wo beide angrenzenden Grid-Bereiche ein Grid-Element enthalten. Dadurch entstehen innere Cap-Segmente. Ändern Sie nun den Einzugswert, um sichtbar zu machen, welche Segmentendpunkte Cap-Endpunkte sind.