Dave Rupert mit etwas modernem CSS-Zauber, das sich mit einem dieser klassischen Rätsel befasst: Was passiert, wenn die CSS für eine Komponente den Inhalt, den wir ihr zumuten, nicht verarbeiten kann?
Die spezifische Situation ist, wenn ein Layout-Grid erwartet ...
Kalender, Warenkörbe, Galerien, Dateiexplorer und Online-Bibliotheken sind einige Situationen, in denen auswählbare Elemente in Grids (d.h. quadratischen Gittern) angezeigt werden. Sie kennen das, selbst diese Sicherheitsüberprüfungen, die Sie bitten, alle Bilder mit Zebrastreifen auszuwählen, oder so etwas...
Ein echter CSS-Trick, wenn es je einen gab! @ShadowShahriar hat eine CodePen-Demo erstellt, die Pseudo-Elemente verwendet, um Kommas zwischen Listenelementen zu platzieren, die inline angezeigt werden, und das Ergebnis ist ein natürlich aussehender vollständiger Satz mit korrekter Interpunktion...
Ich musste neulich einige Elemente zwischen zwei festen Indizes auswählen – buchstäblich das zweite bis fünfte Element. Ironischerweise habe ich einen ganzen Beitrag über „Nützliche :nth-child-Rezepte“, aber dies war keines davon.
Die Antwort, es …
Zwischen jedem Beitrag von Erics Meyer Blog gibt es diese ziemlich schöne Illustration, die zufällig eine von diesen fünf Optionen sein kann:…
Das gibt es nicht.
Aber irgendwie schon!
Bram beschreibt, wie frustrierend .bar:nth-child(2) ist. Es bedeutet nicht „das zweite Element der Klasse .bar auswählen“. Es bedeutet „das zweite Element auswählen, wenn es *auch* die Klasse .bar hat“. Die gute Nachricht? …
Nehmen wir an, Sie möchten ein Element für einen lustigen visuellen Effekt bei :hover bewegen.
@media (hover: hover) {
.list--item {
transition: 0.1s;
transform: translateY(10px);
}
.list--item:hover,
.list--item:focus {
transform: translateY(0);
}
}Cool, cool. Aber was, wenn Sie …
Es gibt keine Einheitslösung für Styling. Eine Bildergalerie mit drei Bildern muss möglicherweise anders gestylt werden als eine Bildergalerie mit zwölf. Es gibt einige coole Tricks, mit denen Sie zahlenbasierte Logik hinzufügen können …
Charlotte Jackson verwendet diese klassische clevere Technik, um den border-radius pseudo-zufällig zu machen und unregelmäßige Kreise für ein Fotogitter zu erzeugen.
…Eine Zikade ist ein ziemlich grimmig aussehender kleiner Käfer. Sie haben vielleicht davon gehört. Es gibt eine Art namens Periodical
