निक के दृष्टांत में प्रमुखों के लिए तीन अलग-अलग परतें थीं। वे केवल थोड़े भिन्न रूप हैं। हम एक एनीमेशन के साथ या जावास्क्रिप्ट या कुछ के साथ छवियों को स्वैप कर सकते हैं लेकिन हमेशा चलने वाला एनीमेशन (या यहां तक कि हर पृष्ठ लोड चलाता है) शायद भारी मंचों उपयोगकर्ताओं के लिए मेगा-कष्टप्रद होगा। इसके बजाय हम इसे ईस्टर एग बना देंगे, यानी यह एक छोटी सी विशेषता है जिसे आप तब तक नोटिस नहीं कर सकते जब तक कि आप इसे बेतरतीब ढंग से ठोकर नहीं खाते।
जब ब्राउज़र विंडो @media क्वेरीज़ के माध्यम से आकार बदलता है तो हम क्या करेंगे। केवल कुछ मुट्ठी भर @ हेडिया प्रश्नों के बदले, जो कुछ समय बाद सिर बदल देंगे, हम @मीडिया प्रश्नों का एक बोझ बना देंगे जो उन्हें हर कुछ पिक्सेल में बदल देते हैं। अर्ली मैकबेलैन की "लार्क क्वेरी" की भावना को अनिवार्य रूप से प्रसारित करना।
हम कई @media क्वेरीज़ की आवश्यकता बनाने के लिए एक Sass लूप का उपयोग करते हैं। अंतत:
@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); ) ) )इसके बारे में क्या अच्छा है कि हम उन अतिरिक्त छवियों को लोड नहीं करते हैं जब तक कि पेज आकार नहीं लेता है, इसलिए हम अतिरिक्त सामान केवल ईस्टर अंडे के लिए लोड नहीं कर रहे हैं।