Ілюстрація Ніка мала три різні шари для голови. Це лише трохи різні варіації. Ми могли б поміняти зображення анімацією або за допомогою 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); ) ) )Що приємно в цьому, так це те, що ми не завантажуємо ці додаткові зображення, якщо тільки сторінка не змінює розмір, тому ми не завантажуємо зайві речі лише для писанки.