Zählen mit CSS-Zählern und CSS Grid

Sie haben sicher schon von CSS Grid gehört. Es wäre schwer, es zu verpassen, wenn man bedenkt, dass das gesamte Universum der Front-End-Entwickler seit einem Jahr davon schwärmt.

Ob Sie neu bei Grid sind oder bereits etwas Zeit damit verbracht haben, wir sollten diesen Beitrag mit einer kurzen Definition direkt aus den Worten des W3C beginnen.

Grid Layout ist ein neues Layoutmodell für CSS, das über leistungsstarke Fähigkeiten zur Steuerung der Größe und Positionierung von Boxen und deren Inhalten verfügt. Im Gegensatz zum Flexible Box Layout, das auf eine einzelne Achse ausgerichtet ist, ist Grid Layout für zweidimensionale Layouts optimiert: solche, bei denen die Ausrichtung des Inhalts in beiden Dimensionen gewünscht ist.

Mit meinen eigenen Worten: CSS Grid ist ein Gitter aus unsichtbaren horizontalen und vertikalen Linien. Wir ordnen Elemente in den Räumen zwischen diesen Linien an, um ein gewünschtes Layout zu erstellen. Eine einfachere, stabilere und standardisierte Möglichkeit, Inhalte auf einer Webseite zu strukturieren.

Neben der Gitterpapier-Grundlage bietet CSS Grid auch den Vorteil eines Layoutmodells, das unabhängig von der Quellreihenfolge ist: Unabhängig davon, wo ein Grid-Item im Quellcode platziert ist, kann es irgendwo im Grid über beide Achsen auf dem Bildschirm positioniert werden. Dies ist sehr wichtig, nicht nur, wenn es mühsam ist, HTML zu aktualisieren, während Elemente auf der Seite neu angeordnet werden, sondern auch, wenn bestimmte Quellanordnungen einschränkend für Layouts sind.

Obwohl wir ein Element mit anderen Techniken wie translate, position oder margin immer an die gewünschte Koordinate auf dem Bildschirm verschieben können, sind diese sowohl schwieriger zu programmieren als auch zu aktualisieren für Situationen wie den Aufbau eines responsiven Designs, verglichen mit echten Layoutmechanismen wie CSS Grid.

In diesem Beitrag werden wir zeigen, wie wir die Unabhängigkeit der Quellreihenfolge von CSS Grid nutzen können, um ein Layoutproblem zu lösen, das aus einer Beschränkung der Quellreihenfolge resultiert. Insbesondere werden wir uns mit Checkboxen und CSS-Zählern beschäftigen.

Zählen mit Checkboxen

Wenn Sie noch nie CSS-Zähler verwendet haben, keine Sorge, das Konzept ist ziemlich einfach! Wir setzen einen Zähler, um eine Reihe von Elementen auf derselben DOM-Ebene zu zählen. Dieser Zähler wird in den CSS-Regeln dieser einzelnen Elemente inkrementiert und zählt sie im Wesentlichen.

Hier ist der Code, um aktivierte und deaktivierte Checkboxen zu zählen.

<input type="checkbox">Checkbox #1<br>
<input type="checkbox">Checkbox #2
<!-- more checkboxes, if we want them -->

<div class="total">
  <span class="totalChecked"> Total Checked: </span><br>
  <span class="totalUnChecked"> Total Unchecked: </span>
</div>

::root {
  counter-reset: checked-sum, unchecked-sum;
}

input[type="checkbox"] {
  counter-increment: unchecked-sum;
}

input[type="checkbox"]:checked {
  counter-increment: checked-sum;
}

.totalUnChecked::after {
  content: counter(unchecked-sum);
}

.totalChecked::after {
  content: counter(checked-sum);
}

Im obigen Code werden zwei Zähler am Wurzelelement mithilfe der Eigenschaft counter-reset gesetzt und in ihren jeweiligen Regeln inkrementiert, eine für aktivierte und die andere für deaktivierte Checkboxen, mithilfe von counter-increment. Die Werte der Zähler werden dann als Inhalt von zwei leeren <span>-Pseudoelementen mithilfe von counter() angezeigt.

Hier ist eine vereinfachte Version dessen, was wir mit diesem Code erhalten.

Sehen Sie den Pen CSS Counter Grid von CSS-Tricks (@css-tricks) auf CodePen.

Das ist ziemlich cool. Wir können es in To-Do-Listen, E-Mail-Inbox-Oberflächen, Umfrageformularen oder überall dort verwenden, wo Benutzer Kästchen umschalten und zu schätzen wissen, wie viele Elemente ausgewählt und wie viele nicht ausgewählt sind. Das alles nur mit CSS! Nützlich, nicht wahr?

Aber die Wirksamkeit von counter() schwindet, wenn wir feststellen, dass ein Element, das die Gesamtzahl anzeigt, nur nach allen zu zählenden Elementen im Quellcode erscheinen kann. Das liegt daran, dass der Browser zunächst die Chance haben muss, alle Elemente zu zählen, bevor die Gesamtzahl angezeigt wird. Daher können wir die Markup nicht einfach ändern, um die Zähler über den Checkboxen zu platzieren, wie hier:

<!-- This will not work! -->
<div class="total">
  <span class="totalChecked"> Total Checked: </span><br>
  <span class="totalUnChecked"> Total Unchecked: </span>
</div>
<input type="checkbox">Checkbox #1<br>
<input type="checkbox">Checkbox #2

Wie können wir also die Zähler über den Checkboxen in unserem Layout erhalten? Hier kommen CSS Grid und seine Layout-Rendering-Fähigkeiten ins Spiel.

Grid hinzufügen

Wir umschließen im Grunde das vorherige HTML mit einem neuen <div>-Element, das als Grid-Container dient.

<div class="grid">

  <input type=checkbox id="c-1">
  <label for="c-1">checkbox #1</label> 
  <input type=checkbox id="c-2">
  <label for="c-2">checkbox #2</label> 
  <input type=checkbox id="c-3">
  <label for="c-3">checkbox #3</label> 
  <input type=checkbox id="c-4">
  <label for="c-4">checkbox #4</label> 
  <input type=checkbox id="c-5">
  <label for="c-5">checkbox #5</label> 
  <input type=checkbox id="c-6">
  <label for="c-6">checkbox #6</label>

  <div class=total>
    <span class="totalChecked"> Total Checked: </span>
    <span class="totalUnChecked"> Total Unchecked: </span>
  </div>

</div>

Und hier ist der CSS-Code für unser Grid.

.grid { 
  display: grid; /* creates the grid */
  grid-template-columns: repeat(2, max-content); /* creates two columns on the grid that are sized based on the content they contain */
}

.total { 
  grid-row: 1; /* places the counters on the first row */
  grid-column: 1 / 3;  /* ensures the counters span the full grid width, forcing other content below */
}

Das ist, was wir als Ergebnis erhalten (mit etwas zusätzlicher Formatierung).

Sehen Sie den Pen CSS Counter Grid von Preethi (@rpsthecoder) auf CodePen.

Sehen Sie das? Die Zähler befinden sich jetzt über den Checkboxen!

Wir haben im CSS zwei Spalten auf dem Grid-Element definiert, die jeweils ihren eigenen Inhalt bis zu ihrer maximalen Größe aufnehmen.

Wenn wir ein Element "gridifizieren", werden seine Inhalte (einschließlich Text) blockartig, d.h. sie erhalten eine Box auf Grid-Ebene (ähnlich einer block-level Box) und werden automatisch in die verfügbaren Grid-Zellen platziert.

In der obigen Demo nehmen die Zähler wie angegeben beide Grid-Zellen in der ersten Zeile ein, und danach befindet sich jede Checkbox in der ersten Spalte und der Text nach jeder Checkbox in der letzten Spalte.

Da wir die Quellreihenfolge nicht geändert haben, funktioniert der Zähler und wir sehen die laufende Gesamtzahl der aktivierten und deaktivierten Checkboxen oben, genauso wie wir es sahen, als sie unten waren. Die Funktionalität bleibt unbeeinträchtigt!

Um ehrlich zu sein, gibt es eine erschlagende Anzahl von Möglichkeiten, CSS Grid zu codieren und zu implementieren. Sie können Rasterliniennummern, benannte Rasterbereiche und viele andere Methoden verwenden. Je mehr Sie darüber wissen, desto einfacher wird es und desto nützlicher wird es. Was wir hier behandelt haben, ist nur die Spitze des Eisbergs, und Sie finden möglicherweise andere Ansätze zur Erstellung eines Grids, die gleichermaßen gut (oder besser) funktionieren.