Niko iliustracijoje buvo trys skirtingi galvos sluoksniai. Tai tik šiek tiek skirtingi variantai. Galėtume sukeisti paveikslėlius naudodami animaciją ar „JavaScript“ ar pan., Tačiau visada veikiančios animacijos (ar net tokios, kuri paleidžia kiekvieną puslapį) tikriausiai būtų nemalonu sunkių forumų vartotojams. Vietoj to mes padarysime tai velykinį kiaušinį, ty nedidelę funkciją, kurios galite nepastebėti, nebent atsitiktinai ją suklupote.
Ką mes padarysime, tai pakeisime vaizdus, kai naršyklės lango dydis pakeičiamas naudojant „@media“ užklausas. Vietoj kelių „@media“ užklausų, kurios kelis kartus pakeistų galvą, mes atliksime daugybę „@media“ užklausų, kurios jas pakeis kas kelis taškus. Iš esmės nukreipia Arley McBlain'o „Lark Queries“ dvasią.
Mes naudojame „Sass“ kilpą, kad sukurtume daugybę mums reikalingų „@media“ užklausų. Galų gale:
@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); ) ) )Malonu tai, kad mes neįkeliame tų papildomų vaizdų, nebent puslapis pakeičiamas, todėl nekrauname papildomų dalykų tik Velykų kiaušiniui.