rule-visibility-items CSS property

Zugehörige Eigenschaften

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

• column-rule-visibility-items
• row-rule-visibility-items

Probieren Sie es aus

rule-visibility-items: all;

rule-visibility-items: around;

rule-visibility-items: between;

rule-visibility-items: normal;

<section id="default-example">
  <section id="example-element">
    <p>One fish</p>
    <p>Two fish</p>
    <p>Red fish</p>
    <p>Blue fish</p>
    <cite>-- Dr. Seuss</cite>
  </section>
</section>

#example-element {
  display: grid;
  rule: solid 5px red;
  gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
cite {
  grid-row: 3;
  grid-column: 3;
}

Syntax

/* Keyword values */
rule-visibility-items: all;
rule-visibility-items: around;
rule-visibility-items: between;
rule-visibility-items: normal;

/* Global values */
rule-visibility-items: inherit;
rule-visibility-items: initial;
rule-visibility-items: revert;
rule-visibility-items: revert-layer;
rule-visibility-items: unset;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

all

Linien sollen in allen Lückensegmenten gezeichnet werden, unabhängig davon, ob angrenzende Bereiche ein Element enthalten.

around

Eine Linie soll in einem Lückensegment gezeichnet werden, wenn mindestens einer der beiden angrenzenden Bereiche durch ein Element belegt ist.

between

Eine Linie soll in einem Lückensegment nur gezeichnet werden, wenn beide angrenzenden Bereiche durch Elemente belegt sind.

normal

Bei Grid-Containern verhält sich dieser Wert genauso wie all. In mehrspaltigen Layouts verhält er sich genauso wie between. Dies ist der Standardwert.

Beschreibung

Die Eigenschaft rule-visibility-items definiert, ob Liniensegmente in Lücken neben leeren Bereichen in den Lücken zwischen Zeilen und Spalten in mehrzeiligen- und Grid-Containern mit mehr als einer Zeile oder Spalte gezeichnet werden.

Der Wert ist ein einzelnes Schlüsselwort, das denselben Wert für die Eigenschaften column-rule-visibility-items und row-rule-visibility-items festlegt.

Formale Definition

Formale Syntax

rule-visibility-items = 
  <'column-rule-visibility-items'>  

<column-rule-visibility-items> = 
  all      |
  around   |
  between  |
  normal   

Beispiele

Grundlegendes Beispiel

In diesem Beispiel definieren wir, dass eine Linie zwischen zwei Grid-Bereichen gezeichnet wird, wenn mindestens ein angrenzender Grid-Bereich ein Grid-Element enthält.

HTML

Wir fügen eine Liste dynamischer Sportduos ein:

<ol>
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
  <li>Kerri Walsh + Misty May Treanor</li>
</ol>

CSS

Wir definieren die geordnete Liste (<ol>) als Grid-Container, erstellen vier Spalten und vier Zeilen, indem wir sowohl die Eigenschaft grid-template-columns als auch grid-template-rows auf repeat(4, 1fr) setzen, und verschieben das letzte Element mithilfe der Eigenschaften grid-column und grid-row in den Grid-Bereich unten rechts. Wir fügen einen gap von 20px hinzu, um zwischen den Spalten genügend Platz für unsere 5px-Linien bereitzustellen. Wir setzen die Spaltenlinien auf dashed und die Zeilenlinien auf solid.

Abschließend setzen wir rule-visibility-items auf between, sodass Zeilen- und Spaltenlinien nur gezeichnet werden, wenn beide an sie angrenzenden Grid-Bereiche ein Grid-Element enthalten.

ol {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

  column-rule: dashed 5px blue;
  row-rule: solid 5px red;

  rule-visibility-items: around;
}
li:last-child {
  grid-row: 4;
  grid-column: 4;
}

li {
  margin-left: 1em;
}
@layer no-support {
  @supports not (rule-visibility-items: around) {
    body::before {
      content: "Your browser doesn't support the rule-visibility-items shorthand";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• column-rule-visibility-items-Kurzform
• row-rule-visibility-items
• rule-Kurzform
• CSS-Lücken-Modul