Dies vs. Das

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Hier ist eine schöne Seite von Phuoc Nguyen, dem ich schon einmal ein gutes Gespür für clevere Seiten zugeschrieben habe. Dies vs. Das stellt verschiedene verwandte Konzepte als Thema für einen Artikel gegenüber. Zum Beispiel gibt es in CSS display: none;, opacity: 0; und visibility: hidden;, und sie alle "verbergen" auf den ersten Blick etwas, aber sie unterscheiden sich auf wichtige Weise voneinander. Das ist einer der Artikel. Der Inhalt ist auch Open Source, falls Sie etwas hinzufügen möchten.

Das erinnert mich an diesen Pen von Adam Thompson

Alles, was dieser Pen tut, ist, die Farben einiger Pillenboxen festzulegen, aber er tut es auf buchstäblich sieben verschiedene Arten – in diesem Fall ist keine davon "besser" als eine andere

  1. Klasse tauschen
  2. Klasse tauschen, Farben in Sass @mixin definiert
  3. Klasse tauschen, Klasse tauscht Wert einer benutzerdefinierten Eigenschaft
  4. Wert einer benutzerdefinierten Eigenschaft tauschen
  5. Tauscht den Wert einer benutzerdefinierten Eigenschaft, Farben werden nur in JavaScript gespeichert
  6. Inline-Stile setzen
  7. Das CSSOM manipulieren
  8. Ein nicht standardmäßiges Farbattribut setzen

Sie alle tun letztendlich dasselbe. Und es könnte noch viele weitere geben: Klasse auf einem übergeordneten Element ändern. data-* Attribute verwenden. Eine Art Farbton-verschiebungsfilter verwenden. Farbmathematik in JavaScript verwenden, um Farbtöne zu manipulieren. Den Checkbox-Hack verwenden, um Stile zu ändern. Sicherlich gibt es noch Dutzende mehr.

Direkter Link →