Hình minh họa của Nick có ba lớp khác nhau cho những cái đầu. Chúng chỉ là những biến thể hơi khác nhau. Chúng tôi có thể hoán đổi hình ảnh bằng hoạt ảnh hoặc bằng JavaScript hoặc thứ gì đó nhưng việc có hoạt ảnh luôn chạy (hoặc thậm chí chạy mỗi lần tải trang) có thể sẽ rất khó chịu đối với người dùng diễn đàn nặng. Thay vào đó, chúng tôi sẽ biến nó thành một quả trứng Phục sinh, tức là một tính năng nhỏ mà bạn có thể không nhận thấy trừ khi bạn ngẫu nhiên tình cờ bắt gặp nó.
Những gì chúng tôi sẽ làm là hoán đổi các hình ảnh khi cửa sổ trình duyệt thay đổi kích thước thông qua các truy vấn @media. Thay vì chỉ một số ít các truy vấn @media sẽ thay đổi phần đầu một vài lần, chúng tôi sẽ tạo ra một loạt các truy vấn @media thay đổi chúng sau mỗi vài pixel. Về cơ bản, truyền tải tinh thần của “Truy vấn chim sơn ca” của Arley McBlain.
Chúng tôi sử dụng vòng lặp Sass để tạo nhiều truy vấn @media mà chúng tôi cần. Cuối cùng:
@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); ) ) )Điều tốt đẹp về điều này là chúng tôi không tải những hình ảnh bổ sung đó trừ khi trang thay đổi kích thước để chúng tôi không tải thêm nội dung chỉ cho một quả trứng Phục sinh.