Les vignettes sont l'un des éléments les plus purs de l'utilisabilité que l'ère numérique a créés. Essentiellement, une vignette est un aperçu, une promesse de ce que vous verrez si vous cliquez sur le lien. Un petit aperçu avec moins de données, plus rapide à charger et moins gourmand en écran que l’actif en taille réelle. Ils sont idéaux pour les images, mais qu'en est-il de la vidéo?
Eh bien, en étendant une technique que nous utilisons déjà pour les états de boutons, nous pouvons créer des miniatures animées étonnantes avec CSS de base et un peu jQuery.
De nos jours, les vitesses de téléchargement ne sont pas un problème pour les développeurs Web. Bien sûr, de petites tailles de fichiers sont toujours souhaitables, mais le nombre de requêtes HTTP est le véritable facteur de performance. Chaque fois que votre site charge un actif, le navigateur effectue une requête HTTP qui est envoyée, traitée et renvoyée. Vérifiez votre console, vous verrez qu'une grande partie du retard sur votre site n'a rien à voir avec la taille de l'image, elle est passée à attendre une réponse du serveur.
La solution est la technique de sprite CSS; l'assemblage de plusieurs images dans un seul fichier image, puis l'affichage sélectif de différentes parties de cette image à l'aide de CSS.
Traditionnellement, pour tout bouton que nous ne pouvons pas créer avec des styles CSS de base, nous créerions trois états; un off , un over et un down :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Cela conduirait à télécharger trois images du serveur et à générer trois requêtes HTTP.
En construisant ceci en tant que sprite CSS, nous sauvegardons les trois images les unes à côté des autres dans un seul fichier (de sorte qu'au lieu d'avoir trois images de 200px de large, nous avons une image de 600px) et modifions la position de l'image :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Considérez l'élément comme une fenêtre à travers laquelle vous visualisez l'image. Vous pouvez déplacer l'image, mais la fenêtre reste dans la même position. Si vous vous assurez que l'élément a la même taille que la partie de l'image que vous souhaitez afficher, l'effet est transparent: