{"id":416,"date":"2011-09-06T07:23:45","date_gmt":"2011-09-06T06:23:45","guid":{"rendered":"http:\/\/dev.meriech.com\/2011\/09\/06\/les-sprites-css\/"},"modified":"2011-09-06T07:23:45","modified_gmt":"2011-09-06T06:23:45","slug":"les-sprites-css","status":"publish","type":"post","link":"https:\/\/dev.meriech.com\/fr\/les-sprites-css\/","title":{"rendered":"Les sprites CSS"},"content":{"rendered":"<h2 class=\"doc-title\">Les sprites CSS<\/h2>\n<div class=\"doc-abstract\">Le temps des onmouseover, des  images pr\u00e9charg\u00e9es via JavaScript et des autres joyeuset\u00e9s h\u00e9rit\u00e9es des  grandes p\u00e9riodes de tag soup est, comme le temps des Elfes de la Terre  du Milieu, d\u00e9finitivement r\u00e9volu : faire des effets de rollover sur des  images est tout \u00e0 fait possible en utilisant uniquement les CSS.<\/div>\n<p>\t \t            <img loading=\"lazy\" decoding=\"async\" class=\"avatar size-full wp-image-408\" src=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/forum.alsacreations.com_avatars_small_212-apple-touch-.png\" border=\"0\" width=\"50\" height=\"50\" \/>       <\/p>\n<p>Tutoriel par <a href=\"http:\/\/www.alsacreations.com\/profil\/lire\/212-nico3333fr.html\"><span>Nico3333fr<\/span><\/a> (D\u00e9veloppeur\/Int\u00e9grateur web, France voisine de Gen\u00e8ve)<br \/>       <span class=\"meta\">Mis \u00e0 jour le 13 Ao\u00fbt 2010. 81600 lectures.       <br \/><span>Tags : <a href=\"http:\/\/www.alsacreations.com\/search\/tag\/css\">css<\/a>, <a href=\"http:\/\/www.alsacreations.com\/search\/tag\/rollover\">rollover<\/a>, <a href=\"http:\/\/www.alsacreations.com\/search\/tag\/sprite\">sprite<\/a>, <a href=\"http:\/\/www.alsacreations.com\/search\/tag\/sprites\">sprites<\/a><\/span>       <\/span>     <\/p>\n<div class=\"doc-content\">\n<p>La technique consiste \u00e0 <strong>exploiter un fichier unique pour stocker de multiples images, positionn\u00e9es les unes \u00e0 c\u00f4t\u00e9 des autres<\/strong>.  Celles-ci seront ensuite appel\u00e9es dans la feuille de style, et la  fen\u00eatre d&rsquo;affichage sur l&rsquo;une ou l&rsquo;autre image sera d\u00e9finie en CSS gr\u00e2ce  \u00e0 la propri\u00e9t\u00e9 background-position.<\/p>\n<div class=\"remarque\">\n<p><strong>Attention :<\/strong> la technique expos\u00e9e dans ce tutoriel  est \u00e0 manier avec pr\u00e9caution car elle peut engendrer des probl\u00e8mes  d&rsquo;accessibilit\u00e9 (typiquement lorsque les images ne sont pas actives). Il  est donc d\u00e9conseill\u00e9 de l&#8217;employer pour des images dont le contenu est  pertinent (menu par exemple).<\/p>\n<\/p><\/div>\n<p>Les avantages des sprites CSS sont multiples\u00a0:<\/p>\n<ul>\n<li>cela permet de se passer totalement de JavaScript\u00a0: il n&rsquo;y a pas  besoin de pr\u00e9chargement d&rsquo;images ni de gestionnaire d&rsquo;\u00e9v\u00e9nements comme onmouseover pour d\u00e9clencher l&rsquo;effet survol\u00e9 (en CSS),<\/li>\n<li>dans les cas de recherche de performances ou d&rsquo;optimisations  pointues, quelques astuces permettent d&rsquo;obtenir des r\u00e9sultats tr\u00e8s  int\u00e9ressants en r\u00e9duisant le nombre de requ\u00eates au serveur pour afficher  plusieurs images,<\/li>\n<li>comme ces techniques se basent sur XHTML et CSS, tous les  avantages de ces derniers utilis\u00e9s \u00e0 bon escient sont pr\u00e9sents\u00a0:  s\u00e9paration pr\u00e9sentation\/structure, code lisible et l\u00e9ger, accessibilit\u00e9,  etc.<\/li>\n<\/ul>\n<p>Par exemple vous pourrez stocker de la sorte dans le m\u00eame fichier les  diff\u00e9rents onglets d&rsquo;un menu de navigation graphique, tel que celui  qu&rsquo;on retrouve sur <a href=\"http:\/\/www.lagazettedescommunes.com\/\">La Gazette des Communes<\/a> :<\/p>\n<p class=\"center\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-409\" src=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_doc_full_tabs-sprites-gazette1.png\" border=\"0\" alt=\"Sprites pour menu\" width=\"500\" height=\"138\" srcset=\"https:\/\/dev.meriech.com\/site\/uploads\/2011\/09\/www.alsacreations.com_xmedia_doc_full_tabs-sprites-gazette1.png 500w, https:\/\/dev.meriech.com\/site\/uploads\/2011\/09\/www.alsacreations.com_xmedia_doc_full_tabs-sprites-gazette1-300x83.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Des sites \u00e0 fort trafic (<a href=\"http:\/\/www.youtube.com\/\">Youtube<\/a>, <a href=\"http:\/\/www.google.com\/\">Google<\/a>, <a href=\"http:\/\/www.facebook.com\/\">Facebook<\/a>, <a href=\"http:\/\/www.amazon.com\/\">Amazon<\/a>, &#8230;) exploitent cette technique sur des pages que vous consultez tous les jours\u00a0:<\/p>\n<p class=\"center\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-410\" src=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_doc_full_sprites-big-sites.png\" border=\"0\" alt=\"Sprites sur grands sites\" width=\"514\" height=\"535\" srcset=\"https:\/\/dev.meriech.com\/site\/uploads\/2011\/09\/www.alsacreations.com_xmedia_doc_full_sprites-big-sites.png 514w, https:\/\/dev.meriech.com\/site\/uploads\/2011\/09\/www.alsacreations.com_xmedia_doc_full_sprites-big-sites-288x300.png 288w\" sizes=\"auto, (max-width: 514px) 100vw, 514px\" \/><\/p>\n<h3>La technique des sprites CSS<\/h3>\n<h4>Approche de base (sans sprite)<\/h4>\n<p>      L&rsquo;id\u00e9e est de n&rsquo;utiliser que XHTML\/CSS pour mettre en forme un  lien. En partant de l&rsquo;id\u00e9e somme toute logique que le lien en question  poss\u00e8de une image en \u00e9tat normal et une autre en \u00e9tat survol\u00e9, voici ce  que cela pourrait donner :     <\/p>\n<pre class=\"code\">&lt;!-- pour le XHTML --&gt; &lt;a href=\"#\" title=\"L'\u00e9dito\" id=\"editorial\"&gt;&lt;span&gt;L'\u00e9dito&lt;\/span&gt;&lt;\/a&gt; <\/pre>\n<pre class=\"code\">\/** pour la CSS **\/ #editorial{   display:block;   width:80px;   height:31px;   background:url(edito_normal.jpg) 0 0 no-repeat; } #editorial:hover,#editorial:active,#editorial:focus{   background:url(edito_survole.jpg) 0 0 no-repeat; } #editorial span{   text-indent: -5000px; } <\/pre>\n<p>      La technique semble naturelle&#8230; seul souci, l&rsquo;appel au fichier edito_survole.jpg  se fait au moment du survol sur le lien. Il en r\u00e9sulte un  \u00ab\u00a0clignotement\u00a0\u00bb, ou un d\u00e9lai d&rsquo;apparition sur certains navigateurs, selon  le temps de chargement. Cette technique, bien que naturelle, est donc \u00e0  oublier. \t<\/p>\n<h4>Principe (avec sprite)<\/h4>\n<p>      C&rsquo;est l\u00e0 que les sprites CSS entrent en jeu, l&rsquo;id\u00e9e va \u00eatre la suivante\u00a0: \t<\/p>\n<p>   <img loading=\"lazy\" decoding=\"async\" class=\"right size-full wp-image-411\" src=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_tuto_exemples_sprites_edito_explication.jpg\" border=\"0\" alt=\"Partie affich\u00e9e de l'image de l'\u00e9dito\" width=\"82\" height=\"64\" \/>  \t<\/p>\n<ul>\n<li>les deux images de fond (\u00e9tat normal et \u00e9tat survol\u00e9) seront <strong>combin\u00e9es en une seule<\/strong>,<\/li>\n<li>seule la partie haute de l&rsquo;image va \u00eatre affich\u00e9e gr\u00e2ce \u00e0 background (ci-contre encadr\u00e9e en rouge), <\/li>\n<li>l&rsquo;image de fond du lien sera simplement <strong>d\u00e9cal\u00e9e<\/strong> lorsqu&rsquo;on la survole avec la souris gr\u00e2ce \u00e0 background-position.<\/li>\n<\/ul>\n<pre class=\"code\">&lt;!-- pour le XHTML --&gt; &lt;a href=\"#\" title=\"L'\u00e9dito\" id=\"editorial\"&gt;&lt;span&gt;L'\u00e9dito&lt;\/span&gt;&lt;\/a&gt; <\/pre>\n<pre class=\"code\">\/** pour la CSS **\/ #editorial{   display:block;   width:80px;   height:31px;   background:url(\"editorial.jpg\") 0 0 no-repeat; } \/* on d\u00e9cale l'image de fond de la hauteur du lien, soit 31 px *\/ #editorial:hover,#editorial:active,#editorial:focus{   background-position:0 -31px; } \/* permet de cacher le texte du lien *\/ #editorial span{   text-indent: -5000px; } <\/pre>\n<p>      On affiche en background les premiers 31 pixels du haut de l&rsquo;image (l&rsquo;\u00e9tat normal du lien), et on d\u00e9cale l&rsquo;image gr\u00e2ce \u00e0 background-position pour faire appara\u00eetre celle en-dessous. \t<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-412\" src=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_tuto_deco_web.png\" border=\"0\" width=\"15\" height=\"15\" \/>       Le d\u00e9calage \u00e9tant instantan\u00e9, l&rsquo;illusion est parfaite, comme le montre <strong><a href=\"http:\/\/www.alsacreations.com\/xmedia\/tuto\/exemples\/sprites\/exemple1.html\" title=\"Exemple num\u00e9ro 1\">l&rsquo;exemple n\u00b01<\/a><\/strong>. \t<\/p>\n<h3>Pousser la logique de la technique des sprites \u00e0 l&rsquo;extr\u00eame : qu\u00eate de performance<\/h3>\n<p>      Les extensions ap\u00f4tres de la performance des sites que sont Google  Page Speed et Yahoo Yslow vous l&rsquo;indiqueront\u00a0: il faut autant que  possible <strong>minimiser les requ\u00eates HTTP<\/strong>. Autrement dit, il faut essayer de <strong>charger le moins de fichiers possible<\/strong>.  Certes les sprites CSS permettent de n&rsquo;avoir qu&rsquo;une image par lien au  lieu de deux (\u00e9tat normal et survol\u00e9), mais cela fait quand m\u00eame 10  fichiers images \u00e0 charger si vous avez 10 liens&#8230; et donc 10 requ\u00eates  HTTP GET pour chaque image. M\u00eame si les connexions ADSL actuelles sont  tr\u00e8s performantes, il est l\u00e9gitime de penser \u00e0 am\u00e9liorer la vitesse de  chargement sur les petites connexions, les Smartphones, etc. Le gain  sera toujours appr\u00e9ciable entre le temps mis par le navigateur pour  formuler la requ\u00eate et l&rsquo;affichage de l&rsquo;image. \t<\/p>\n<p> \t L&rsquo;id\u00e9e des sprites CSS peut alors \u00eatre pouss\u00e9e \u00e0 l&rsquo;extr\u00eame\u00a0: nous  allons combiner les 10 images de liens d&rsquo;un bandeau&#8230; en une seule. \t<\/p>\n<pre class=\"code\">&lt;!-- pour le XHTML --&gt; &lt;div id=\"bandeau\"&gt; &lt;div id=\"menugauche\"&gt;  &lt;ul&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"cv\"&gt;&lt;span&gt;CV&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"edito\"&gt;&lt;span&gt;Edito&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"skins\"&gt;&lt;span&gt;Skins&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"newsweblog\"&gt;&lt;span&gt;Weblog&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"realweb\"&gt;&lt;span&gt;R\u00e9alisations&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;  &lt;\/ul&gt; &lt;\/div&gt; &lt;div id=\"menudroite\"&gt;  &lt;ul&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"liens\"&gt;&lt;span&gt;Liens&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"terragen\"&gt;&lt;span&gt;Terragen 2&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"animations\"&gt;&lt;span&gt;Animations&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"photonum\"&gt;&lt;span&gt;Photo num\u00e9rique&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;   &lt;li&gt;&lt;a href=\"#\" id=\"plansite\"&gt;&lt;span&gt;Plan du site\/Contact&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;  &lt;\/ul&gt; &lt;\/div&gt; &lt;\/div&gt; <\/pre>\n<p> Construisons la CSS petit \u00e0 petit, je ne mettrai que les propri\u00e9t\u00e9s  r\u00e9ellement utiles \u00e0 la compr\u00e9hension, la totalit\u00e9 du code est donn\u00e9e  dans l&rsquo;exemple. <\/p>\n<pre class=\"code\">#bandeau{   background:url(\"top.jpg\") 0 0 no-repeat;   width:980px;   padding:0; } <\/pre>\n<p>La div bandeau prend donc l&rsquo;<a href=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_tuto_exemples_sprites_top.jpg\">image de fond<\/a>, jusqu&rsquo;ici rien de bien extraordinaire.<\/p>\n<pre class=\"code\">#menugauche span,#menudroite span{   text-indent: -5000px; } #menugauche ul,#menudroite ul{   list-style-type:none;   margin:0;   padding:0;   border:0; } #menugauche li,#menudroite li{   margin:0;   padding:0; } <\/pre>\n<p>Ensuite, on fait dispara\u00eetre les textes des liens pour n&rsquo;afficher que  les images de fond, et on fixe \u00e0 0 toutes les marges et autres paddings  des divers \u00e9l\u00e9ments.<\/p>\n<pre class=\"code\">#menugauche li a,#menudroite li a{   position:absolute;   top:36px;   left:30px;   display:block;   height:52px;   width:92px;   background:url(\"bandeau.jpg\") no-repeat;   margin:0;   border:0; } <\/pre>\n<p>Ici nous d\u00e9finissons les propri\u00e9t\u00e9s communes \u00e0 tous les liens du  bandeau, afin de factoriser la CSS\u00a0: les liens seront donc positionn\u00e9s  en absolu, auront tous la m\u00eame image <a href=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_tuto_exemples_sprites_bandeau.jpg\">bandeau.jpg<\/a>  en fond (\u00e9tat normal comme survol\u00e9, tous sont inclus dedans), auront  tous la m\u00eame taille et hauteur. Seul le positionnement des liens et de  l&rsquo;image de fond va diff\u00e9rer pour chacun.<\/p>\n<pre class=\"code\">#menugauche #cv{   background-position:2px 0; } #menugauche #cv:hover,#menugauche #cv:active,#menugauche #cv:focus{   background-position:2px -52px; } #menugauche #edito{   left:122px;   background-position:-89px 0; } #menugauche #edito:hover, #menugauche #edito:active, #menugauche #edito:focus{   background-position:-89px -52px; } \/* etc... *\/ <\/pre>\n<p>Le premier lien est positionn\u00e9 (il garde dej\u00e0 les propri\u00e9t\u00e9s left:30px et top:36px d\u00e9finies plus haut dans les propri\u00e9t\u00e9s communes aux liens. Le suivant est d\u00e9cal\u00e9 \u00e0 droite et a son background  d\u00e9cal\u00e9, l&rsquo;effet de rollover \u00e9tant aussi assur\u00e9 par un d\u00e9calage (celui  du lien en \u00e9tat normal sur l&rsquo;axe x, et le lien en \u00e9tat survol\u00e9 sur l&rsquo;axe  y).<\/p>\n<p>   <img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-412\" src=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_tuto_deco_web.png\" border=\"0\" width=\"15\" height=\"15\" \/>       Le d\u00e9calage \u00e9tant toujours instantan\u00e9, l&rsquo;illusion est parfaite, comme on peut le constater sur <strong><a href=\"http:\/\/www.alsacreations.com\/xmedia\/tuto\/exemples\/sprites\/exemple2.html\" title=\"Exemple num\u00e9ro 2\">l&rsquo;exemple n\u00b02<\/a><\/strong>. \t<\/p>\n<p>      Les avantages sont ind\u00e9niables en termes de performances\u00a0: une  seule image permet de charger tous les liens de mon bandeau. Si vous  g\u00e9n\u00e9ralisez le concept comme je l&rsquo;ai fait pour int\u00e9grer le design de mon  site dont sont tir\u00e9s ces exemples\u00a0: \t<\/p>\n<ul>\n<li>Les liens du bandeau utilisent donc <strong>une seule image au lieu de 10<\/strong>\u00a0! <\/li>\n<li><strong>12 images pour mes titres h1 sont combin\u00e9es en une seule image<\/strong>, qui plus est, cette image se pr\u00eate bien au format GIF\u00a0: 26,2 Ko pour 12 titres en image, c&rsquo;est plut\u00f4t appr\u00e9ciable\u00a0!<\/li>\n<li>Avantage suppl\u00e9mentaire\u00a0: <strong>le temps de chargement du graphisme sera instantan\u00e9 pour les autres pages<\/strong>, l&rsquo;image des h1 ayant d\u00e9j\u00e0 \u00e9t\u00e9 charg\u00e9e.<\/li>\n<li>Au final, la totalit\u00e9 du graphisme se charge en <strong>seulement 6 images au lieu de 26<\/strong>.<\/li>\n<\/ul>\n<h3>Inconv\u00e9nients<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-415\" src=\"http:\/\/dev.meriech.com\/wp-content\/uploads\/2011\/09\/www.alsacreations.com_xmedia_tuto_deco_warning.gif\" border=\"0\" width=\"17\" height=\"16\" \/>       N\u00e9anmoins, la technique des sprites CSS pouss\u00e9e \u00e0 l&rsquo;extr\u00eame pr\u00e9sente quelques inconv\u00e9nients\u00a0: \t<\/p>\n<ul>\n<li>Si l&rsquo;on doit changer une image d&rsquo;un unique lien du bandeau, il faut rechanger et r\u00e9-exporter toute l&rsquo;image au lieu d&rsquo;une seule.<\/li>\n<li>La feuille de style CSS sera un petit peu plus lourde.<\/li>\n<li>Le positionnement peut \u00eatre ardu si vous devez comme dans mon cas  positionner au pixel pr\u00e8s pour que les divers fonds soient parfaitement  raccord\u00e9s.<\/li>\n<\/ul>\n<p>      L&rsquo;essentiel est de savoir \u00e0 quel niveau s&rsquo;arr\u00eater\u00a0: si le temps  d&rsquo;int\u00e9gration et\/ou de maintenance explose litt\u00e9ralement les b\u00e9n\u00e9fices  en termes de performances, autant revenir \u00e0 la m\u00e9thode classique. Bien  entendu, ne se pose pas le probl\u00e8me de temps si vous faites votre  int\u00e9gration CSS \u00e0 temps perdu. Toutefois, certains cas peuvent vous  permettre de passer outre cette complexit\u00e9&#8230; certaines fois en  am\u00e9liorant encore les performances de votre int\u00e9gration. Jetons un oeil \u00e0  ces astuces. \t<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Les sprites CSS Le temps des onmouseover, des images pr\u00e9charg\u00e9es via JavaScript et des autres<\/p>\n","protected":false},"author":1,"featured_media":408,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classe"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"fr","enabled_languages":["en","fr"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/posts\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":0,"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/media\/408"}],"wp:attachment":[{"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.meriech.com\/fr\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}