Nicks illustrasjon hadde tre forskjellige lag for hodene. De er bare litt forskjellige varianter. Vi kunne bytte ut bildene med en animasjon eller med JavaScript eller noe, men å ha en animasjon som alltid kjører (eller til og med en som kjører hver sidelast), vil sannsynligvis være veldig irriterende for tunge forumbrukere. I stedet lager vi det til et påskeegg, det vil si en liten funksjon som du kanskje ikke legger merke til med mindre du tilfeldigvis snubler over det.
Det vi skal gjøre er å bytte ut bildene når nettleservinduet endres gjennom @media-spørringer. I stedet for bare en håndfull @media-spørsmål som vil endre hodet noen ganger, lager vi en crapload av @ media-spørsmål som endrer dem med noen få piksler. I hovedsak kanaliserer ånden i Arley McBlains “Lark Queries.”.
Vi bruker en Sass-løkke for å lage de mange @media-spørsmålene vi trenger. Til syvende og sist:
@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); ) ) )Det som er hyggelig med dette, er at vi ikke laster inn de ekstra bildene med mindre siden endres, så vi ikke laster inn ekstra ting bare for et påskeegg.