Nick's illustration hade tre olika lager för huvuden. De är bara lite olika variationer. Vi kan byta ut bilderna med en animering eller med JavaScript eller något men att ha en animation som alltid körs (eller till och med en som kör varje sidbelastning) skulle förmodligen vara irriterande för tunga forumanvändare. Istället gör vi det till ett påskägg, det vill säga en liten funktion som du kanske inte märker om du inte råkar slumpa över det.
Vad vi ska göra är att byta ut bilderna när webbläsarfönstret ändras genom @media-frågor. Istället för bara en handfull @media-frågor som skulle ändra huvudet några gånger, gör vi en crapload av @media-frågor som ändrar dem med några pixlar. I huvudsak kanaliserar andan i Arley McBlains "Lark Queries".
Vi använder en Sass-loop för att skapa de många @media-frågorna vi behöver. I sista hand:
@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); ) ) )Vad som är trevligt med det här är att vi inte laddar in dessa ytterligare bilder såvida inte sidan ändrar storlek så att vi inte laddar extra saker bara för ett påskägg.