rule-visibility-items CSS property

Bestandteile der 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

/* Keywords */
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

all

Regeln sollten in allen Lückenabschnitten gezeichnet werden, unabhängig davon, ob angrenzende Bereiche ein Element enthalten.

around

Eine Regel sollte in einem Lückenabschnitt gezeichnet werden, wenn mindestens einer der beiden angrenzenden Bereiche von einem Element belegt ist.

between

Eine Regel sollte in einem Lückenabschnitt nur gezeichnet werden, wenn beide angrenzenden Bereiche von Elementen belegt sind.

normal

Bei Raster-Containern verhält sich dies wie all. Im Mehrspalten-Layout verhält es sich wie between. Dies ist der Standardwert.

Beschreibung

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

Der Wert ist ein einzelnes Schlüsselwort, das denselben Wert für sowohl die column-rule-visibility-items als auch die row-rule-visibility-items Eigenschaften setzt.

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 definieren wir eine Regel, die zwischen zwei Rasterbereichen gezeichnet wird, wenn mindestens ein angrenzender Rasterbereich ein Rasterelement enthält.

HTML

Wir fügen eine Liste von dynamischen 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 Raster-Container, der 4 Spalten und 4 Zeilen erstellt, indem sowohl die grid-template-columns als auch die grid-template-rows Eigenschaften auf repeat(4, 1fr) gesetzt werden, und verschieben das letzte Element in den unten rechts liegenden Rasterbereich mit den grid-column und grid-row Eigenschaften. Wir fügen einen gap von 20px hinzu, um genügend Raum zwischen den Spalten zu schaffen, um unsere 5px Regeln einzupassen. Wir setzen die Spaltenregeln auf dashed und die Zeilenregeln auf solid.

Schließlich setzen wir rule-visibility-items auf between, sodass Zeilen- und Spaltenregeln nur dann gezeichnet werden, wenn beide angrenzenden Rasterbereiche ein Rasterelement 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
• CSS-Lücken Modul