#060: Benutzerdefinierter Header für die Foren, Teil 2 (Rapid Media Queries)

Nicks Illustration hatte drei verschiedene Ebenen für die Köpfe. Es sind nur leicht unterschiedliche Variationen. Wir könnten die Bilder mit einer Animation oder mit JavaScript oder etwas Ähnlichem austauschen, aber eine ständig laufende Animation (oder sogar eine, die bei jedem Seitenaufruf ausgeführt wird) wäre für Vielnutzer von Foren wahrscheinlich mega nervig. Stattdessen machen wir es zu einem Osterei, das heißt, zu einer kleinen Funktion, die man vielleicht nicht bemerkt, es sei denn, man stolpert zufällig darüber.

Wir werden die Bilder beim Ändern der Browserfenstergröße über @media-Abfragen austauschen. Anstatt nur einer Handvoll @media-Abfragen, die die Köpfe ein paar Mal ändern würden, machen wir eine Menge @media-Abfragen, die sie alle paar Pixel ändern. Das kanalisiert im Wesentlichen den Geist von Arley McBlains „Lark Queries.“.

Wir verwenden eine Sass-Schleife, um die vielen benötigten @media-Abfragen zu erstellen. Letztendlich

@for $i from 25 through 125 {
  @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) {
    .forum-wrap { background-image: url(../wp-content/themes/CSS-Tricks-10/images/header-forums-2.png);
    }
  }
  @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) {
    .forum-wrap { background-image: url(../wp-content/themes/CSS-Tricks-10/images/header-forums-3.png);
    }
  }
}

Das Schöne daran ist, dass wir diese zusätzlichen Bilder nicht laden, es sei denn, die Seite wird in der Größe verändert, sodass wir keine zusätzlichen Dinge nur für ein Osterei laden.