rule-visibility-items CSS property

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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

Für diese Eigenschaft wird einer der folgenden Schlüsselwortwerte angegeben:

all

Regelsegmente werden in allen Abständen gezeichnet, unabhängig davon, ob die angrenzenden Bereiche ein Element enthalten.

around

Ein Regelsegment wird in einem Abstand gezeichnet, wenn mindestens einer der beiden angrenzenden Bereiche ein Element enthält.

between

Ein Regelsegment wird in einem Abstand nur dann gezeichnet, wenn beide angrenzenden Bereiche Elemente enthalten.

normal

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

Beschreibung

Die Eigenschaft rule-visibility-items legt fest, ob Regelsegmente in Abständen zwischen Zeilen und Spalten gezeichnet werden, die an leere Bereiche in mehrspaltigen und Grid-Containern mit mehr als einer Zeile oder Spalte angrenzen.

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

Formale Definition

Formale Syntax

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

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

Beispiele

Einfaches Beispiel

In diesem Beispiel legen wir fest, dass zwischen zwei Grid-Bereichen eine Linie gezeichnet wird, wenn mindestens einer der angrenzenden Grid-Bereiche 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 mit 4 Spalten und 4 Zeilen, indem wir sowohl grid-template-columns als auch grid-template-rows auf repeat(4, 1fr) setzen. Das letzte Element verschieben wir mithilfe der Eigenschaften grid-column und grid-row in den Grid-Bereich unten rechts. Mit einem gap von 20px schaffen wir zwischen den Spalten ausreichend Platz für die 5px breiten Linien. Wir legen für die Spaltenlinien dashed und für die Zeilenlinien solid fest.

Abschließend setzen wir rule-visibility-items auf between, damit Zeilen- und Spaltenlinien nur dann gezeichnet werden, wenn beide 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-Kurzschreibweise
• row-rule-visibility-items
• rule-Kurzschreibweise
• Modul CSS gaps