Nicks illustration havde tre forskellige lag til hovederne. De er bare lidt forskellige variationer. Vi kunne bytte billederne ud med en animation eller med JavaScript eller noget, men at have en altid kørende animation (eller endda en, der kører hver sideindlæsning), ville sandsynligvis være meget irriterende for tunge forumbrugere. I stedet gør vi det til et påskeæg, det vil sige en lille funktion, som du muligvis ikke bemærker, medmindre du tilfældigvis snubler over det.
Hvad vi skal gøre er at bytte billederne ud, når browservinduet ændrer størrelse via @media-forespørgsler. I stedet for bare en håndfuld @media-forespørgsler, der ville ændre hovederne et par gange, laver vi en crapload af @media-forespørgsler, der ændrer dem hvert par pixels. I det væsentlige kanaliserer ånden i Arley McBlains “Lark Queries”.
Vi bruger en Sass-løkke til at oprette de mange @media-forespørgsler, vi har brug for. Ultimativt:
@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.webp); ) ) @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.webp); ) ) )Hvad der er pænt ved dette er, at vi ikke indlæser de ekstra billeder, medmindre siden ændrer størrelse, så vi ikke indlæser ekstra ting bare til et påskeæg.