Илюстрацията на Ник имаше три различни слоя за главите. Те са просто малко по-различни вариации. Можем да разменяме изображенията с анимация или с JavaScript или нещо подобно, но наличието на постоянно работеща анимация (или дори такава, която изпълнява всяко зареждане на страница) вероятно ще бъде мега досадно за тежки потребители на форуми. Вместо това ще го направим великденско яйце, тоест малка характеристика, която може да не забележите, освен ако случайно не се натъкнете на нея.
Това, което ще направим, е да разменяме изображенията, когато прозорецът на браузъра се преоразмерява чрез заявки @media. Вместо само шепа заявки @media, които биха сменили главите няколко пъти, ще направим скачане на заявки @media, които ги променят на всеки няколко пиксела. По същество насочвайки духа на „Запитванията на чучулигата“ на Арли Макблейн.
Използваме цикъл на Sass, за да създадем многобройните @media заявки, от които се нуждаем. В крайна сметка:
@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); ) ) )Хубавото на това е, че не зареждаме тези допълнителни изображения, освен ако страницата не преоразмерява, така че не зареждаме допълнителни неща само за великденско яйце.