L'illustration de Nick avait trois couches différentes pour les têtes. Ce ne sont que des variations légèrement différentes. Nous pourrions échanger les images avec une animation ou avec JavaScript ou quelque chose, mais avoir une animation toujours en cours d'exécution (ou même une qui exécute chaque chargement de page) serait probablement méga-ennuyeux pour les gros utilisateurs de forums. Au lieu de cela, nous en ferons un œuf de Pâques, c'est-à-dire une petite fonctionnalité que vous ne remarquerez peut-être pas à moins que vous ne tombiez dessus au hasard.
Ce que nous allons faire, c'est échanger les images lorsque la fenêtre du navigateur est redimensionnée via des requêtes @media. Au lieu d'une poignée de requêtes @media qui changeraient les têtes plusieurs fois, nous ferons un téléchargement de requêtes @media qui les changeraient tous les quelques pixels. Canalisant essentiellement l'esprit des «Lark Queries» d'Arley McBlain.
Nous utilisons une boucle Sass pour créer les nombreuses requêtes @media dont nous avons besoin. Finalement:
@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); ) ) )Ce qui est bien à ce sujet, c'est que nous ne chargeons pas ces images supplémentaires à moins que la page ne soit redimensionnée, donc nous ne chargeons pas de choses supplémentaires juste pour un œuf de Pâques.