de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Verwenden Sie Mengenabfragen, um Ihre CSS-Mengen zu sensibilisieren

Mengenabfragen sind speziell eingerichtete CSS-Selektoren, mit denen Entwickler ihren Code quantitätsbewusst machen können . Im Responsive Design verwenden wir normalerweise Medienabfragen, um unser Design an verschiedene Ansichtsfenster anzupassen. In einigen Fällen möchten wir jedoch zu einem anderen Layout wechseln oder andere Dimensionen oder Ästhetik verwenden, nachdem eine bestimmte Menge des gleichen Inhaltstyps auf dem Bildschirm vorhanden ist.

Es ist ein häufiges Problem bei dynamischen Websites, dass wir nicht immer im Voraus wissen, wie viele Artikel auf dem Bildschirm angezeigt werden . Denken Sie an Tags am Ende von Blogposts, produktspezifische Filter in der Navigation von E-Commerce-Websites oder an Suchergebnisse vor Ort. Dies ist der Moment, in dem Quantitätsabfragen uns eine elegante CSS-Lösung bieten und uns vor dem mühsamen Umgang mit JavaScript bewahren können.

Wie Mengenabfragen zusammengesetzt werden

Wir können drei Arten von Mengenabfragen erstellen:

  1. "Mindestens" fragt ab, wenn mehr als eine bestimmte Menge des gleichen Inhaltstyps auf dem Bildschirm vorhanden ist.
  2. "Höchstens" fragt ab, wenn weniger als eine bestimmte Menge des gleichen Inhaltstyps auf dem Bildschirm vorhanden ist.
  3. "Zwischen" fragt ab, wenn mehr als eine bestimmte Menge, aber weniger als eine andere Menge des gleichen Inhaltstyps auf dem Bildschirm vorhanden ist.

Alle drei Arten von Mengenabfragen werden mithilfe der CSS-Pseudoklasse :nth-last-child und des allgemeinen Geschwisterselektors ( ~ ) erstellt, während die Abfragen "höchstens" und "zwischen" auch das :first-child Pseudo-Klasse .

Die Pseudo-Klasse :nth-last-child verhält sich ähnlich wie :nth-child, startet jedoch die Zählung ab dem letzten Kind, während der allgemeine Geschwisterselektor ( ~ ) alle Elemente auswählt, die nach einem bestimmten Geschwisterelement kommen .

"Mindestens" Abfragen

Das Wichtigste ist, dass Mengenabfragen alle Elemente auswählen, die zu demselben übergeordneten Element gehören, da das Ziel darin besteht, allen Elementen, die die Mengenkriterien erfüllen , dasselbe Design zuzuordnen .

Im folgenden Codefragment wählen wir alle aus

  • Elemente in einer ungeordneten Liste, die mindestens fünf Listenelemente enthält .

     / * "Mindestens" Abfrage * / ul li: nth-last-child (n + 5), ul li: nth-last-child (n + 5) ~ li {Hintergrundfarbe: orange; } 

    Wie Sie sehen können, besteht eine "mindestens" -Abfrage aus zwei CSS-Selektoren . Der erste Selektor ul li:nth-last-child(n+5) wählt alle aus

  • Elemente, die mindestens fünf Elemente weit vom letzten Kind entfernt sind . Diese Stilregel allein reicht jedoch nicht aus, da sie nicht alle Elemente gleich aussehen lässt - die letzten vier Elemente behalten ihren ursprünglichen Stil bei. Deshalb müssen wir den zweiten Selektor hinzufügen, der alle allgemeinen Geschwister der zuvor ausgewählten Elemente auswählt.

    Um zu unserem Beispielcode zurückzukehren, wird allen Elementen von ungeordneten Listen mit mindestens fünf Elementen ein orangefarbener Hintergrund hinzugefügt, während ungeordnete Listen mit weniger als fünf Elementen hinzugefügt werden

  • Elemente behalten ihre Standardfarbe (blau) . Sie können live testen, wie die "mindestens" -Abfrage im unten stehenden Codepen-Stift funktioniert.

    "Höchstens" Abfragen

    "Höchstens" -Abfragen bestehen ebenfalls aus zwei Selektoren, sie verlassen sich jedoch nicht nur auf die Pseudo-Klasse :nth-last-child, sondern auch auf :first-child . Der folgende Beispielcode wählt alle aus

  • Elemente, die zu einer ungeordneten Liste gehören, die maximal fünf Listenelemente enthält .

     / * "Höchstens" Abfrage * / ul li: nth-last-child (-n + 5): erstes Kind, ul li: nth-last-child (-n + 5): erstes Kind ~ li { Hintergrundfarbe: Orange; } 

    Der erste Teil des ersten Selektors, :nth-last-child(-n+5), verwendet einen negativen Wert, der die Richtung der Auswahl vertauscht - er zählt immer noch vom letzten Kind (das ist die eingebaute Natur des :nth-last-child pseudo-class), jedoch werden jetzt die letzten fünf Elemente ausgewählt (dh die Elemente, die nicht mindestens fünf Elemente weit vom letzten Kind entfernt sind). Dieser Selektor wählt die letzten fünf Elemente einer ungeordneten Liste aus, wir möchten jedoch nur diejenigen auswählen , die maximal fünf Elemente haben (auf diese Weise werden alle Elemente ausgewählt).

    Deshalb müssen wir es mit der Pseudo-Klasse " :first-child kombinieren, die die ersten Elemente der zuvor ausgewählten Listenelemente auswählt, aber nur für diejenigen, die auch die ersten unter ihnen sind

      Parent, was nur für ungeordnete Listen gilt, die maximal fünf enthalten
    • Elemente.

      Jetzt müssen wir nichts tun, als den zweiten Selektor hinzuzufügen, der die allgemeinen Geschwister der zuvor ausgewählten :first-child Elemente auswählt. Und das ist es, unsere "höchstens" Abfrage ist erledigt. Sie können mit dem CSS-Code in der Live-Demo unten spielen, um zu sehen, wie es funktioniert.

      "Zwischen" -Abfragen

      Die "between" -Abfrage kombiniert den Code, den wir für die Abfragen "at mindestens" und "höchstens" verwendet haben. Im folgenden Codebeispiel werden alle Elemente ungeordneter Listen ausgewählt, die mindestens fünf, höchstens jedoch sechs Listenelemente enthalten .

       / * "Between" query * / ul li: nth-last-child (n + 5): nth-last-child (-n + 6): erstes Kind, ul li: nth-last-child (n + 5 ): nth-last-child (-n + 6): erstes Kind ~ li {background-color: orange; } 

      Um eine "between query" zu erstellen, verketten wir die CSS-Selektoren, die zu den entsprechenden "at-least" - und "at-most" -Abfragen gehören. Die "mindestens" -Abfrage in unserem Beispiel lautet :nth-last-child(n+5), während die "höchstens" -Abfrage lautet :nth-last-child(-n+6):first-child, wir verbinden Sie sie einfach mit einem Doppelpunkt .

      Anwendungsfälle

      Mengenabfragen haben viele interessante Anwendungsfälle von inhaltsorientierten Navigationen bis hin zu automatischen Grid-Systemen. Hier finden Sie eine Auswahl der Besten:

      • Eine Liste getrennt: Wie man eine inhaltsbewusste Navigation erstellt
      • Tomango: Eine Tag-Liste und ein flexibles Grid-System
      • Charlotte Jacksons Blog: Code-Experimente mit Mengenabfragen
      • Codepen: Ein automatisches Rastersystem von Vincent Durand
      • Codepen: Ein Bildraster mit Mengenabfragen und Flexbox von Lucas Lemonnier
      • Codepen: Eine zusammenklappbare Linkliste von Craig Morey

      Tools zum Erstellen von Mengenabfragen

      Es gibt einige großartige Entwicklerwerkzeuge, die Ihnen helfen können , Mengenanfragen einfacher zu erstellen .

      Mengenabfrage-Builder

      Mit diesem handlichen Mengenabfrage-Builder können Mengenabfragen einfach und unkompliziert erstellt werden. Sie müssen nur drei Eingabefelder (zu zählende Elemente, Art der Query, Anzahl der Positionen) ausfüllen und das Tool generiert die benötigte Mengenabfrage .

      Mengenabfrage-Mixins für SASS

      Sie können diese einfachen Mengenabfrage-Mixins in Ihren Sass-Projekten verwenden . Der Autor, Daniel Guillan, hat auch eine Codepen-Demo erstellt, in der Sie die Mixins in Aktion sehen können.

      PostCSS-Plugin für Mengenabfragen

      Dieses PostCSS-Plugin baut auf den oben genannten Mengenabfrage-Mixins auf und ermöglicht es Ihnen, Mengenabfragen in Ihren PostCSS-Workflow einzuschließen .

      Hosten Sie Ihre statische Website in Dropbox mit Pfannkuchen

      Hosten Sie Ihre statische Website in Dropbox mit Pfannkuchen

      Dropbox ist die führende Plattform zum Speichern, Sichern und Freigeben von Dateien über den Cloud-Speicher. Sie können Ihre Dateien im Dropbox-Ordner ablegen, und sie werden in Minuten synchronisiert, wenn Sie sie mit anderen geteilt haben. Aber wussten Sie neben dem Teilen von Dateien, dass Sie auch eine Website in Dropbox hosten können?Das

      (Tech- und Design-Tipps)

      40 malerische und schöne Unterwasser-Hintergründe

      40 malerische und schöne Unterwasser-Hintergründe

      Von Luftbildern am Strand bis hin zu Meeresfotografien - Meere und Ozeane waren schon immer eine Quelle der Inspiration für Künstler und Fotografen. Am erstaunlichsten ist es jedoch, das Wesen der Unterwasserwelt einzufangen.Hier sind einige der besten Hintergrundbilder, die wir aus den Online-Quellen gefunden haben, die die Unterwasserwelt und das erstaunliche Meeresleben zeigen.

      (Tech- und Design-Tipps)