Gelöst mit CSS! Logische Styling Basierend auf der Anzahl der Angegebenen Elemente

0
10

Dieser Beitrag ist der Dritte in einer Serie über die macht von CSS.

Artikel-Serie:

  1. Einfärben der SVG-Hintergründe
  2. Dropdown-Menüs
  3. Logische Styling Basierend Auf der Anzahl von Elementen (in diesem post)

Wussten Sie, dass CSS ist Turing-vollständig? Wussten Sie, dass Sie können es verwenden, um einige ziemlich schwere logische styling? Gut Sie können! Sie nicht haben, um alle Ihre Logik-basierte styling-Regeln in JavaScript oder sogar haben, JavaScript zu verwenden, legen Sie Klassen, die Sie styling vor. In vielen Fällen kann mit CSS umgehen, dass sich. Ich bin immer noch zu entdecken, neue CSS-tricks jeden Tag, und es nur macht mich Liebe es noch mehr.

In diesem Jahr fing ich an, in der Hektik Digital Group. In den Medien wie auch mit eine Menge von Produkten, dem engineering-team baut eine Plattform, die Sie unterstützen sollten, alle Einsatz-Fälle. Unser CMS bietet Funktionen für Autoren und Redakteure erstellen Artikel sowie kuratieren-Seiten und-Steuerung ad injection.

Im Gegensatz zu arbeiten mit einer statischen Website, das engineering-team nicht die volle Kontrolle darüber, welche Daten, die von der Benutzer, so dass design-Entscheidungen und die EZB-Regeln vorgenommen werden, müssen für eine gute user experience. Einige dieser Szenarien, die wir haben, denen in der digital-media-Raum haben, wirklich inspirierte mich dazu, schauen Sie in die Möglichkeiten, mit CSS zu lösen, diese UI-Herausforderungen und Lösungen mit dieser Idee wirklich kam in meiner Peripherie.

Werfen wir also einen Blick auf einige Beispiele!

Beispiel 1: Binär-Zustände

Eine oft vergessene und sehr nützlicher Selektor ist :leere pseudo-Selektor. Es ermöglicht Ihnen, Stil-Elemente, basierend auf, wenn Sie anstößigen Inhalte enthalten, oder, wenn Sie nicht. Hallo leere-Zustände! Leer-Staaten sind eine große Weise, zu erreichen, um Ihre Benutzer und zeigen Sie Persönlichkeit in Ihre app und Sie können injizieren, das Persönlichkeitsrecht von CSS.

In diesem Beispiel haben wir eine beliebige Liste von einem Benutzer. Dies könnte Beiträge der Nutzer veröffentlicht hat (als Autor) oder Lesezeichen-Artikel, die ein Benutzer gespeichert hat (als Redakteur). Die use cases sind wirklich endlos hier. Anstelle der Injektion von JavaScript, können wir pseudo-Elemente zu injizieren, Bilder, Stile und text:

Zeichnungen veranschaulichen bedingt angewendet Stile auf der Grundlage der nicht-Elemente (Links) versus angezeigten Elemente (rechts) in der Liste.

Unsere Lösung hier ist lediglich drei Zeilen code:

div:leer:after {
Inhalt: ‘oh Nein…’;
}

Sie können auch hinzufügen :vor dem pseudo-element zu injizieren, Bilder oder andere Inhalte, die Sie wollen. Alternativ :nicht pseudo-Selektor kann verwendet werden in Kombination mit :leer erstellen :not(:empty) Regel und Stil aller Elemente, die nicht leer sind, und daher nicht enthalten Kinder.

Finden Sie in der Pen Leer-Staaten per Una Kravets (@una) auf CodePen.

Hinweis: Diese demo ist nur zur Darstellung. Es wird nicht empfohlen, um Inhalte in pseudo-Elemente für die Barrierefreiheit Zwecke. Sie können mit der gleichen Methode Ausrichtung :leer oder :not(:empty) Elemente, Formatvorlagen anwenden, um untergeordnete Elemente, die sind mehr für Bildschirmleseprogramme zugänglich.

Erweiterte Numerische Auswahl

Das war eine schöne soft-ball-Beispiel, aber wir können sehr viel komplexer als diese binäre Wahl der Kind-Elemente in CSS, und um dies zu tun, verwenden wir den :nth-child pseudo-Selektor! CSS-Tricks hat ein großartiges Werkzeug, um Ihnen helfen, testen und spielen, um mit der :nth-child Auswahl, und es kann wirklich nützlich sein, wie einige der Beispiele zeigen, wie Sie.

Aber bevor wir in diese, wie funktioniert das genau?

Das Fleisch der code ist, mit div stehen für jedes Geschwister-element, und x steht für die Zahl, die wir verwenden, um zu bestimmen, Stil bricht:

div:first-child:nth-last-child(n + x),
div:first-child:nth-last-child(n + x) ~ div

Mit :nth-last-child anstelle der Verwendung von :nth-child für die Auswahl ermöglicht das starten aus dem Ende einer Reihe, statt von Anfang an. Wenn wir wählen :nth-last-child(n + x), wir wählen die x-Wert ab dem Ende. Wenn x = 3, das würde dann so Aussehen:

Darstellung, wie :nth-last-child(3) wählt das Dritte Element vom Ende der Liste.

Nun, wenn wir wollen, zählen Sie die Werte von n + 3, wir wählen alle Artikel, die mit mehr als 3 vom Ende. Das würde beginnen mit der vierten vom Ende, beginnend mit n = 1 (was bedeuten würde, 1 + 3 und 4). Es sieht wie folgt aus:

Darstellung, wie :nth-last-child(n + 3) wählt Elemente, die mit dem Zustand des seins in der Dritten Position vom Ende oder größer.

Das ist ein großartiger start, aber die Idee hier ist, um einen bedingten Stil alle Elemente, basierend darauf, wie viele vorhanden sind. Also müssen wir daran arbeiten, diese Bedingungen, aber wählen Sie alle Elemente. Beginnen wir mit der Auswahl der ersten Position. Wir brauchen Sie, um eine Bedingung zu sehen, wenn die gesamte Auswahl qualifiziert sich für das styling, und starten Sie dann mit, die ersten Geschwister:

Uh oh. Wir haben nur das erste Element ausgewählt werden, an diesem Punkt, und wir möchten, wählen Sie alle Elemente. Zum Glück, können wir die super praktischen benachbarten Geschwister-Selektor ( ~ )!

Die Anpassung unserer letzten Beispiel :first-child:last-child(n + 3) ~ * wählt alle Elemente mit Ausnahme des ersten, wie wir wollen.

Nun, jetzt können Sie sehen, alle Elemente, die Folgen das erste Element ausgewählt, jedoch fehlt uns noch das erste, so müssen wir mit zwei Selektoren, und damit die endgültige Antwort wird:

Kombination der beiden vorherigen Beispiele wählen Sie alle Elemente in der Liste.

Beispiel 2: Liste Formatieren

Sagen Sie, Sie wollen, um einige credits am Ende eines Artikels. Du hast etwas Platz zu füllen, und die meisten Artikel haben eine kleine Anzahl von credits, aber es gibt diese Ausnahmen, die einen hohen Produktionswert und eine Menge Leute beteiligt, die in der Herstellung von Ihnen. Wir wollen sicherstellen, dass beide sind gute visuelle Erfahrungen, und kann man das mit CSS allein.

Hier ist der plan: wenn es vier oder weniger credits, in Kugel-format. Lassen Sie Sie nehmen den vertikalen Raum zu füllen, den block entsprechend. Haben wir einmal fünf oder mehr credits aufgeführt ist, lassen Sie uns, die Liste in ein horizontales format, um nicht zu überwältigend für einen Leser. Dies ist eine kleine credits-box, nachdem alle!

Abbildungen der vertikalen ungeordnete Liste (Links) und einer horizontalen Liste (getrennt durch Semikolons (rechts).

Wir können überprüfen, die Anzahl der Elemente, die wir zur Verfügung haben und Stil Sie als block-Elemente, bis wir auf unsere Kappe. An diesem Punkt, wir werden wechseln, um inline-styling, und fügen Sie ein pseudo-element visuell brechen die Daten.

/* 5 oder mehr Elemente display nebeneinander */
li:first-child:nth-last-child(n + 5),
li:first-child:nth-last-child(n + 5) ~ li {
display: inline;
}

/* Fügt das Semikolon nach jedem Element mit Ausnahme des letzten Elements */
li:first-child:nth-last-child(n + 5) ~ li::before {
Inhalt: ‘;’;
margin: 0 0.5 em 0 -0.75 em;
}

:nth-first-child:nth-last-child(n + 5) erlaubt zu behaupten: “beginnen Sie mit dem ersten Kind und bewerben styling auf das Kind und alle Geschwister nach, wenn die ursprüngliche Kind Spiele mit fünf oder mehr Geschwister.”” Ist das verwirrend? Gut, es funktioniert.

li:first-child:nth-last-child(n + 5) wählt den ersten Punkt der Liste, und li:first-child:nth-last-child(n + 5) ~ li wählt jedes Listenelement nach dem ersten.

Finden Sie den Stift vrQBMv von Una Kravets (@una) auf CodePen.

Beispiel 3: Bedingte Karussell

Mit dieser Technik, lassen den Stil ein Karussell zu reagieren. Bei einer großen Größe, die Sie wollen, dass es zentriert in der Mitte der Seite, wenn es hat drei Elemente. Aber wenn es genug Elemente um den Bildschirm zu füllen, horizontal, lass es sein, Linksbündig der Benutzer Blättern Sie durch es.

Illustrationen von Karussell mit drei Elementen (Links), und mehr als drei Elemente (rechts).

Was wir hier tun können, ist, dehnen sich die Elemente auf den Bildschirm passen, es sei denn, wir haben zu viele Elemente, und Sie benötigen einen überlauf. An diesem Punkt, wir gehen all-in auf dieser überlauf und wirklich zeigen das Karussell Fähigkeiten durch die Signalisierung scroll-Fähigkeit mit Pfeile und durch die Erhöhung der Marge zwischen den Elementen. Hinzu kommt, dass, fügen wir eine klebrige Pfeil-Schaltfläche, um zu zeigen, dass wir können einen Bildlauf durch die Elemente und binden können JavaScript-Veranstaltungen, um das Karussell zu Blättern.

Wir können das gleiche tun, wie oben in Bezug auf die Technik, aber wir nutzen auch nur das erste Kind zu erkennen, ein Pfeil div und anzeigen in der Benutzeroberfläche. Das HTML würde so Aussehen:

<ul>
<li>
<div class=”box”>1</div>
</li>
<li>
<div class=”box”>2</div>
</li>

<button class=”Pfeil”>–></button>
</ul>

Es ist nicht ideal, um leere Elemente in den DOM, aber mit mir arbeiten. Es ist immer noch ein cleverer hack. Wir werden Stil der .Pfeil-Taste, um unsichtbar auf die DOM-und Bildschirm-Lesegeräte, die mit visibility: hidden-es sei denn, die Bedingungen gelten (in diesem Fall, wenn vier oder mehr Elemente vorhanden sind). Wir an diesem Punkt gebe es ein sichtbares display (display: block) -, Stil -, und positionieren Sie es entsprechend:

li:first-child:nth-last-child(n + 5) ~ .Pfeil {
display: block;
position: sticky;

}

Finden Sie in der Pen Box Ausrichtung von Una Kravets (@una) auf CodePen.

Mehr Informationen!

In meinen Recherchen für diesen Beitrag entdeckte ich einen exzellenten post von Heydon Pickering über diese Technik, genannt Menge von Abfragen, und ein weiteres Beispiel von Lea Verou! Im Kommentar-thread von Heydon ‘ s post, Paul Irish Hinweise, dass dies ein langsamer Weg, der Auswahl der Elemente, also vielleicht mit Vorsicht verwenden.