Dans cette vidéo tutorielle, le présentateur explique la technique des sprites CSS, qui consiste à regrouper plusieurs icônes ou images dans un seul fichier afin de diminuer le nombre de requêtes HTTP lors du chargement d’une page web. Il commence par exposer le problème des multiples requêtes et leurs impacts sur la latence, l’expérience utilisateur et le SEO. Ensuite, il montre comment structurer le HTML : une balise <section> avec un titre H1, un <aside> contenant quatre <div class="item">, chacune avec un sous‑titre H2 et une <div> destinée à afficher une icône via un sprite. Le présentateur décrit le style de base du H1, l’ajout d’ombre portée pour la lisibilité, puis la mise en place d’un conteneur flex (display:flex, space‑around, align‑items:flex‑start) pour disposer les quatre blocs. Il détaille la création du sprite : définition du background‑image, du background‑size (600 px de largeur), du border‑radius, du curseur pointer, puis le calcul du background‑position négatif pour chaque icône (mutualisé, dédié, VPS, cloud) afin d’afficher la bonne portion du sprite dans chaque <div>. Des ajustements de position sont faits pour centrer les images non carrées. Enfin, il ajoute un effet hover avec transform:scale(1.1) et une transition pour un agrandissement progressif. La vidéo se conclut en rappelant l’utilité des sprites CSS lorsqu’on possède de nombreuses images et en indiquant que les liens de téléchargement des images sont fournis dans la description.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle astuce de développement web. Aujourd'hui, nous allons voir les sprites CSS. La technique des sprites CSS consiste à combiner plusieurs images dans un seul et unique fichier. En effet, dans les pages web qui renferment beaucoup d'images, en l'occurrence les icônes et les images miniatures, si ces dernières sont des fichiers séparés, alors il faut les intégrer de manière indépendante. Ce qui signifie que le navigateur passera autant de requêtes au serveur qu'il y a d'images dans le document au moment du chargement. Ces requêtes multiples posent parfois des problèmes de latence, et dire même que le nombre de requêtes globales passées au serveur au moment du chargement d'une page constitue une métrique de grande importance qui reflète le niveau d'optimisation du site ou de l'application web, chose qui a des répercussions non négligeables sur l'expérience de l'utilisateur et par conséquent sur la manière avec laquelle les moteurs de recherche appréhendent votre contenu. Bien entendu, ces requêtes multiples ne concernent pas que les images, mais aussi les feuilles CSS, les fichiers de code JavaScript, les polices, etc. Par conséquent, il serait judicieux de minimiser le nombre de requêtes autant que possible et la technique des sprites CSS constitue une bonne solution pour intégrer les images. Nous allons commencer par intégrer le contenu et on commence par la balise principale section. On va mettre un titre H1. Comme texte, on mettra par exemple type d'hébergement web. Après, on va mettre une autre section ou juste la balise aside. Dedans, on va mettre les objets souhaités. On mettra donc un autre container qui est dans ce cas une balise div. Avec la classe item et dans celle-ci on mettra 2 objets: une autre div identifiée par div1 par exemple et un titre h2 où je mettrai le premier type d'hébergement qui dans ce cas hébergement mutualisé. La div identifiée par div1 est censée accueillir une image et c'est cette image que l'on va intégrer à l'aide des sprites CSS. Exécutons déjà pour voir ce que ça donne sur le navigateur. Alors ça donne ceci. Bien sûr on va mettre du style CSS après. J'aurai besoin de 4 divs parce qu'en général il y a 4 types d'hébergement. Alors je vais copier ce bloc 4 fois. Et là, je vais changer les ID, je mettrai 2, 3 et 4. Et là, le deuxième type d'hébergement qui est l'hébergement dédié. Et là, l'hébergement VPS. Et là, l'hébergement cloud. Je mettrai un D majuscule comme ça et un M majuscule si vous voulez. À la fin, on aura ceci sur le navigateur. L'alignement est par défaut vertical, c'est normal parce que les balises sont toutes des balises bloc. Mais il est temps de mettre du style là-dedans. Alors on commence par styler la balise H1 avec une taille de texte de 36 points. Je mettrai aussi un souligné en guise de bordure basse. Qui aura une couleur blanche un peu transparente. Donc ça donne ceci. Je vais centrer le texte. Je vais appliquer un padding supérieur. De 60 pixels par exemple et une marge inférieure si vous voulez de 60 pixels encore. Ça donne ceci. Bon, il y a juste un petit problème parce que vu l'image d'arrière-plan, il y a des parties du texte qui sont pas trop visibles parce que ça tombe pile sur les parties claires de l'image. Donc on va mettre une sorte d'ombre portée pour le texte. On mettra text-shadow Avec une étendue de 6 pixels et une couleur sombre, par exemple du noir légèrement transparent. Donc là, je crois que c'est mieux. Maintenant, voici la balise aside, c'est-à-dire le container qui contient les 4 types d'hébergement avec leurs images bien entendu. Je vais appliquer le style display flex. Je mettrai space-around pour mettre de l'espace entre les différents objets intégrés. Et align-items, je mettrai flex-start. Voilà, comme ça. Après, je vais styler les divs qui renfermeront les images, c'est-à-dire ces divs. Elles sont déjà identifiées par des ID différents, mais dans un premier temps, elles auront un style commun. Donc je vais les cibler de manière générale en passant par leur parent item. Je vais appliquer une largeur et une hauteur de 200 pixels, par exemple. Je vais aussi appliquer une couleur d'arrière-plan, toujours avec la fameuse RGBA. Je vais opter pour le blanc transparent. Alors ça donne ceci. Après, je vais appliquer les images d'arrière-plan et c'est là bien sûr que je mettrai en œuvre les sprites CSS. Les images sont ici. Il y en a 9 au total. Je vous mettrai en description de cette vidéo les différents liens pour télécharger des images de bonne qualité de manière gratuite. Alors je mets background image. C'est une image PNG à fond transparent. Donc ça applique cette image, c'est normal parce que c'est cette partie qui correspond avec l'emplacement par défaut, bien la position par défaut de l'arrière-plan. Après, on va régler ça avec les sprites CSS. Je mettrai margin auto afin que les objets soient centrés. Ça change pas trop. Je mettrai aussi background-size Donc l'image est là, on va voir sa taille. Elle mesure 600 pixels de largeur. Ça correspond bien aux dimensions que je souhaite, mais imaginez que vous disposez d'une image avec des dimensions différentes, alors vaut mieux fixer le background-size. Je mettrai 600px dans ce cas et auto pour la hauteur. Un petit border-radius de 20 pixels par exemple. Je vais juste essayer 16 pixels pour voir. C'est bon, c'est satisfaisant. Je vais aussi changer la forme du curseur une fois que je survole cet objet pour que ça donne l'impression d'être cliquable. C'est bon. Alors on a ça. Maintenant on va styliser le texte qu'il y a en dessous. C'est la balise H2. Voilà, c'est ça. Je vais centrer le texte. Bon, je vais spécifier la taille 18 points. Ça donne ceci. Bon, même problème que tout à l'heure, des parties du texte correspondent avec des fonds qui sont trop clairs. Du coup, on ne distingue pas le texte. Donc il faut mettre du contraste. La solution la plus simple, c'est d'appliquer encore un text-shadow. Je vais juste copier ça. Donc là, c'est plus visible. Maintenant, il est temps d'appliquer les sprites CSS. L'idée, c'est que je vais faire correspondre la partie de l'image que je souhaite au container. C'est-à-dire par exemple pour l'hébergement mutualisé, bon, je vais considérer que cette icône reflète bien la nature de cette technique. Alors c'est bon, on va la laisser, on va rien modifier. Pour les autres images, je vais faire en sorte de les faire correspondre avec le container. Voilà comment je vais faire. La div 1, c'est réglé. L'image qui est placée là-dessus correspond bien à ce que j'attends, donc je vais pas apporter des modifications. Maintenant, je vais plutôt cibler la div 2. Comme ça parce que c'est un ID. Ensuite je vais jouer sur le background-position. Pour l'hébergement dédié, je vais choisir par exemple cette image, la deuxième. Donc je vais faire correspondre cet emplacement avec le container. Donc mon image telle que je l'ai exprimée sur le CSS mesure 600 pixels. Alors là ça correspond à la position de 100 pixels, là c'est la position 400 pixels. Mais il faut déclarer ceci comme étant des valeurs négatives parce que c'est comme si je vais faire déplacer l'image vers la gauche. Alors la valeur sera négative. Donc là c'est -200 pixels et là c'est -400 pixels. Alors je mettrai -200 pixels dans ce cas. Et pour la hauteur, je fais rien parce que c'est bon. Donc là c'est la position initiale, je vais la laisser telle qu'elle est. Je mettrai 0. Exécutons. Et voilà, maintenant la deuxième image est appliquée comme je le souhaite. Je fais pareil pour l'hébergement VPS. Pour le VPS par exemple, on va choisir la troisième image. Donc la position sera dans ce cas -400 pixels et 0 toujours au niveau vertical. Alors je mettrai copier. Là c'est -400 pixels. C'est bien. Il reste maintenant la dernière image qui correspond à l'hébergement cloud. Pour cloud, alors je crois que cette image paraît la mieux placée. Sa position, c'est toujours -200 pixels au niveau horizontal et au niveau vertical, ça sera cet emplacement. Ça sera aussi une valeur négative. On dira par exemple -200 pixels aussi si on imagine que l'image est carrée. C'est -200 et là c'est -200px encore et là c'est la div 4. Exécutons. D'accord, sauf que l'image n'est pas bien centrée. C'est naturel parce que l'image n'est pas vraiment carrée. Alors regardons encore. Donc la largeur c'est 600 pixels et la hauteur c'est 564 pixels à peu près. Alors je vais changer légèrement la valeur, je mettrai par exemple -180. On va voir ce que ça va donner. Je crois que c'est bon, c'est centré. Voilà, donc là c'est les sprites CSS. Vous avez constaté que nous disposons d'un seul fichier d'image. On a pu jouer sur le background-position afin de faire correspondre la partie que je souhaite de l'image au container qui va l'abriter. On va ajouter un dernier effet. Quand je survole par exemple une image, je veux que celle-ci soit un peu plus grande. Alors je vais faire ici la pseudo-classe hover. J'applique le style transform avec la fonction scale avec la valeur 1.1, ce qui va agrandir légèrement l'image. Voilà, c'est bien. Bon, je voudrais quand même que ça s'agrandisse de manière progressive. Alors je vais appliquer les transitions. Je fais pareil sur l'état initial. Exécutons. Voilà, maintenant je crois que c'est bon. Alors j'espère que vous avez compris le principe des sprites CSS. C'est très utile surtout si vous avez beaucoup d'images au sein de votre page. Comme j'ai mentionné tout à l'heure, je vous mettrai les liens vers les sites où j'ai téléchargé les images et les icônes. Merci pour votre attention et à la vidéo prochaine.
