Histoire de sprite

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Histoire de sprite

    Bonjour,

    Dans ma quête d'optimisation de la vitesse de chargement de mon site (très lent), j'essaie de réduire le nombre de requête en réunissant des icones en un seul sprite.

    J'ai actuellement dans mon template JSN Boot des classes css qui affichent par exemple ceci :

    Cliquez sur l'image pour l'afficher en taille normale

Nom : css-initial-sans-sprite.jpg 
Affichages : 1 
Taille : 5,4 Ko 
ID : 1823496

    Mais ce css fait appel à autant d'images différentes qu'il y a de variantes de cette classe, et j'aimerais les réunir en 1 seul sprite.

    Version initiale du css
    (le 2ème paragraphe est en fait beaucoup plus long, car il liste toutes les classes de cette catégorie utilisant différents icônes)

    .text-file-pdf {
    border-top: 2px solid #e5e5e5;
    border-bottom: 2px solid #e5e5e5;
    background: #f2f2f2 url(../images/icons/icon-text-file-pdf.png) no-repeat;
    }

    .text-file-pdf {
    background-position: left center;
    padding: 0.8em 0.8em 0.8em 5em;
    min-height: 20px;
    }

    Pour commencer, j'ai donc créé le sprite :
    Les icones mesurent larg. 60 x haut. 24, dimension qui inclut une zone transparente à droite et une à gauche).
    J'ai empilé les icones les unes sur les autres, tous les 24 px.

    J'ai ensuite essayé de modifier le custom.css ainsi :

    Version modifiée
    (le 1er paragraphe liste en fait toutes les classes icones différentes, et le 2nd liste en réalité les 10 classes sur fond gris)

    .text-file-pdf {
    background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
    background-repeat: no-repeat;
    width: 60px;
    height: 24px;
    padding: 0.8em 0.8em 0.8em 5em;
    min-height: 20px;
    }

    .text-file-pdf {
    border-top: 2px solid #e5e5e5;
    border-bottom: 2px solid #e5e5e5;
    background-color: #f2f2f2;
    }

    .text-sign-info {
    background-position: 0 -144px;
    }

    Mais malheureusement, il y a un truc que je ne gère pas correctement, visiblement :

    Cliquez sur l'image pour l'afficher en taille normale

Nom : css-sprite-rate.jpg 
Affichages : 1 
Taille : 7,4 Ko 
ID : 1823497

    Je ne trouve pas comment faire pour dire que l'icône doit mesurer 60x24 sans que cela impacte tout le paragraphe affecté par la classe décorée par cette icône.
    Et pourquoi alors que je dis bien que le background mesure 24px de haut mon css affiche-t-il 2 icones l'une au dessus de l'autre ? (autrement dit il prend une hauteur de 48px au moins puisqu'on voit 2 icônes de 24px de haut)

    Ma difficulté vient du fait que je dois combiner le fait de faire s'afficher une icône avec celui d'affecter le texte avec une couleur de fond, un padding, etc. Peut-être certains paramètres sont-ils communs aux deux, et peut-être est-ce pourquoi les éditeurs du Template ont-ils créé ces classes avec des images distinctes et non un sprite ? (que par ailleurs les éditeurs utilise pour les icônes des liens par exemple)

    Y aurait-il quelqu'un ici qui aurait l'envie et la patience de me donner un cours de css sur cet exercice pratique ?

    Merci d'avance pour ce partage de connaissance (et merci au site Alsacréation sur lequel je suis allée apprendre comment gérer les sprites, mais là encore une fois je crois que j'essaie de faire appel à 2 techniques à la fois, non ?)

    Flo

    PS: si vous avez besoin de voir le css en live action, la capture d'écran ci-dessus a été faite sur cette page (en bas de l'article) : http://www. rouchenergies .fr/qui-sommes-nous/qualifications/rge-qualibois.html (sans espace de part et d'autres de rouchenergies)
    Dernière édition par FlodAriege à 28/08/2015, 11h58
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #2
    Re : Histoire de sprite

    Bonjour,

    Pas assez de connaissance en CSS pour résoudre ton problème par contre je pense que ton icone doit faire une class différente avec un display: inline-block; quelques part enfin c'est ce qu'on apprend dans le début des cours CSS en tout cas.

    Commentaire


    • #3
      Re : Histoire de sprite

      tes sprites ne serait ils pas contenus dans la meme div que ton texte ?

      Commentaire


      • #4
        Re : Histoire de sprite

        Envoyé par lefabdu51 Voir le message
        tes sprites ne serait ils pas contenus dans la meme div que ton texte ?
        Si, absolument !

        Le html de l'exemple donne ça :

        <p class="text-file-pdf">bla bla bla</p>


        Je viens d'essayer en scindant le truc en 2 classes (une pour la box de couleur + une pour l'icône), mais le résultat à l'écran est le même.

        Cette fois mon css donne ça :

        .box-gris {
        border-top: 2px solid #e5e5e5;
        border-bottom: 2px solid #e5e5e5;
        background-color: #f2f2f2;
        }

        .box-jaune,
        .box-bleu,
        .box-rose,
        .box-gris,
        .box-orange,
        .box-vert {
        padding: 0.8em 0.8em 0.8em 5em;
        min-height: 20px;
        }

        .icon-1,
        .icon-2,
        .icon-3,
        .file-pdf {
        background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
        background-repeat: no-repeat;
        width: 60px;
        height: 24px;
        }

        .file-pdf {
        background-position: 0 -1080px;
        }

        Mais si j'imagine correctement ta prochain réponse, je pourrais sans doute écrire un peu différemment mon html, comme ceci ? :

        <p class="box-gris"><span class="file-pdf">bla bla</span></p>

        D'ailleurs, en attendant ta réponse je vais aller tester ça.



        ************
        EDIT :
        ***********

        Ah ! Il y a du mieux ! Ce n'est pas encore tout à fait çà, mais c'est déjà beaucoup mieux.
        Voilà ce que ça donne (avec le html susmentionné) :
        Cliquez sur l'image pour l'afficher en taille normale

Nom : css-sprite-pas-encore-ca.jpg 
Affichages : 1 
Taille : 7,2 Ko 
ID : 1805025

        + c'est la bonne image qui s'affiche,
        + elle s'affiche toute seule (adieu la voisine du dessous)
        + le background-color est correct et le texte s'affiche correctement sur toute la largeur de la page

        - l'icône a l'air un peu rognée en bas (désolée pour la piètre qualité de l'image, je l'ai pourtant enregistrée en png et en grand format, mais une fois insérée sur le forum elle devient minuscule...)
        - l'icône n'est pas au bon endroit : mais là je pense que c'est mon css qui doit être mal rédigé

        Des idées de ce que je devrais faire pour arranger ça ?

        MERCIIIIIII
        Dernière édition par FlodAriege à 20/08/2015, 20h31 Raison: test réalisé
        Flo, Ariège

        Il n'y a que celui qui a honte d'apprendre qui a peur de demander

        Commentaire


        • #5
          Re : Histoire de sprite

          ajoutes un margin-left négatif a ta classe.. cela devrais ton icone renvoyer avant.

          ou tu peut aussi essayer
          p.file-pdf:before {
          background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
          background-repeat: no-repeat;
          width: 60px;
          height: 24px;
          }

          Commentaire


          • #6
            Re : Histoire de sprite

            Envoyé par lefabdu51 Voir le message
            ajoutes un margin-left négatif a ta classe.. cela devrais ton icone renvoyer avant.

            ou tu peut aussi essayer
            p.file-pdf:before {
            background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
            background-repeat: no-repeat;
            width: 60px;
            height: 24px;
            }
            Merci pour ton aide.
            J'ai d'abord essayé avec
            p.file-pdf:before
            Mais peut-être ne l'ai-je pas fait comme il faut, en tout cas l'icone n'apparaissait pas du tout
            (j'ai une longue liste d'icones, et au début j'ai essayé de faire :
            p.icon1,
            p.icon2,
            p.icon3,
            p.file-pdf:before {
            (etc)

            Puis j'ai essayé avec :
            p.icon1:before,
            p.icon2:before,
            p.icon3:before,
            p.file-pdf:before {
            (etc)

            Mais dans les 2 cas, aucune icône à l'écran.

            Je suis donc passé à ta technique n°1, le margin-left
            En l'occurrence, j'ai ajouté un margin-left: -60px; ici :
            .map,
            .map-map-marker,
            .paperclip,
            .phone {
            background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
            background-repeat: no-repeat;
            width: 60px;
            height: 24px;
            margin-left: -60px;
            }

            C'est mieux, l'icône apparaît, et au bon endroit, mais la 1ère ligne de texte se décale aussi...
            (et l'icône est toujours rognée dans sa partie basse, bizarre) :
            Cliquez sur l'image pour l'afficher en taille normale

Nom : css-sprite-presque-ca.jpg 
Affichages : 1 
Taille : 6,1 Ko 
ID : 1805026

            Grâce à toi je ne dois plus être très loin du résultat recherché, mais comme je fais du css comme un singe qui imite l'homme, sans tout comprendre à ce que je fais... ben j'ai encore besoin d'aide


            PS : en essayant d'en apprendre un peu plus sur ces techniques (sprites et css), je suis tombées sur un article qui me semble décrire ce que j'essaie de faire. Mais, franchement, j'ai du mal à voir comment l'appliquer à mon cas et le combiner avec les différentes box de notification... C'est en anglais : http://www.smashingmagazine.com/2012...-padded-images
            Dernière édition par FlodAriege à 20/08/2015, 22h17
            Flo, Ariège

            Il n'y a que celui qui a honte d'apprendre qui a peur de demander

            Commentaire


            • #7
              Re : Histoire de sprite

              Bon alors, je up un peu mon post, parce que j'ai fait quelques progrès en bidouillant un peu.
              J'arrive maintenant à afficher mon icône en entier (elle n'est plus rognée en bas), toute seule (adieu la voisine du dessous), et presque au bon endroit. Ah oui ! et le texte est bien à sa place (la première ligne ne fait plus marche arrière).
              Si je reviens demander votre aide, c'est que je n'arrive pas à régler l'alignement vertical de l'icône... qui reste obstinément aligné sur la 1èère ligne de texte au lieu de s'aligner joliment au milieu de la hauteur de la box grise...

              Mon html =

              Code:
              <p class="box-gris" style="text-align: justify;">
              <span class="file-pdf"></span>
              bla bla bla </p>
              Mon css =

              Code:
              .box-gris {
              	border-top: 2px solid #e5e5e5;
              	border-bottom: 2px solid #e5e5e5;
              	background-color: #f2f2f2;
              }
              
              .box-jaune,
              .box-bleu,
              .box-rose,
              .box-gris,
              .box-orange,
              .box-vert {
              	padding: 0.8em 0.8em 0.8em 5em;
              	min-height: 20px;
              }
              
              .file-pdf {
              	display: inline-block;
              	background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
              	background-repeat: no-repeat;
              	width: 60px;
              	height: 24px;
              	float: left;
              	margin-left: -5em;
              	vertical-align: middle;
              }
              
              .file-pdf {
              	background-position: 0 -1080px;
              }

              J'ai fait en sorte que mon css reconnaisse les 2 html différents (celui du Template d'origine avec des images uniques celui sur lequel je travaille et qui nécessitera une réécriture du html pour être mis en œuvre).

              Et sur la page suivante (enlevez les espaces de part et d'autres de rouchenergies) :
              http://www. rouchenergies .fr/qui-sommes-nous/qualifications/rge-qualibois.html
              en bas de l'article, j'ai doublé la box :
              # la 1ère est celle du css du Template (1 icône = 1 image + une seule classe qui définit la box et l'icône)
              # la 2nde est celle du css sur lequel je travaille (1 icône = 1 partie d'un sprite + une classe pour la box et une classe pour l'icône) : j'ai volontairement ajouté plein de retour à la ligne pour que mon "problème" soit facilement visible. Je voudrais aligner l'icône de telle sorte qu'elle s'affiche à mi-hauteur de la zone grise.

              Je pensais avoir réglé le problème avec le vertical-align:middle;
              mais visiblement ça ne suffit pas (je n'arrive pas à faire comprendre à l'icône au mileu de quoi il faut qu'il s'aligne)
              J'ai fait un paquet d'expériences avec span.file-pdf, file-pdf > span et autre, mais je ne suis pas assez calée pour trouver la solution...

              Encore un petit coup de main siouplait ?
              Merci !
              Flo, Ariège

              Il n'y a que celui qui a honte d'apprendre qui a peur de demander

              Commentaire


              • #8
                Re : Histoire de sprite

                Bonjour,

                Que de code !!!!

                J'ai l'impression que tu mélanges les problèmes.
                1°/ centrer verticalement les contenus d'un bloc. Ce qui peut être fait dans une structure de type table.
                2°/ afficher une sprite en sachant que les seuls ajustements disponibles, dans ce cas, sont la dimension visible du background (height & height) et le décalage de l'image dans cette partie visible (background-position).

                Pour le CSS :
                Code:
                    [B]
                .box-gris[/B] {
                    /* afficher la boite comme une table */
                    display: table;
                    width: 100%;
                    /* la personnalisation de la boite */
                    border-top: 2px solid #e5e5e5;
                    border-bottom: 2px solid #e5e5e5;
                    background-color: #f2f2f2;
                }
                [B].box-gris > div[/B] {
                    /* afficher les div enfants comme cellules centrées verticalement */
                    display: table-cell;
                    vertical-align: middle;
                }
                
                [B][class^="file-"][/B] {
                    /* fond pour toutes les classe commençant par file-. Evite l'énumération ... */
                    background-image: url(../../../images/small-n-flat-master/sprite-small-n-flat.png);
                    background-repeat: no-repeat;
                    width: 60px;
                    height: 24px;
                }
                [B].file-pdf [/B]{ background-position: 0 -1080px; }

                Pour le HTML:
                Code:
                <div class="[B]box-gris[/B]">
                    <div class="[B]file-pdf[/B]"></div>
                    <div>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
                </div>
                Je n'ai pas testé, mais cela devrait fonctionner.
                Note: N'ayant pas eu le courage de lire en entier tous tes posts, il est possible qu'une subtilité m'ait échappé.
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  Re : Histoire de sprite

                  Désolée Lomart pour la longueur de mes posts (la synthèse et moi, ça fait 2). Too long... didn't read!
                  J'ai essayé ta solution, et j'aurais bien aimé qu'elle marche, car celle que j'ai trouvée n'est apparemment pas très bien digérée par Chrome.

                  Voici une capture de ce que donne ton code :
                  Cliquez sur l'image pour l'afficher en taille normale

Nom : table-cell.jpg 
Affichages : 1 
Taille : 21,3 Ko 
ID : 1805039

                  La solution que j'ai trouvée, c'est celle du display: flex; assortie d'un align-items: center;
                  J'obtiens un résultat quasiment similaire à l'original : petit désalignement du texte qui s'approche un peu trop de l'icône, amis c'est imperceptible... sauf sur Chrome où le texte se colle carrément à l'icône.

                  Bref.
                  Du coup, j'aimerais bien arriver à faire fonctionner TA solution.
                  Est-ce que la capture ci-dessus te donne une idée de ce que je pourrais faire pour arriver à ça :
                  Cliquez sur l'image pour l'afficher en taille normale

Nom : original.jpg 
Affichages : 1 
Taille : 17,7 Ko 
ID : 1805040

                  Merci
                  Flo, Ariège

                  Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                  Commentaire


                  • #10
                    Re : Histoire de sprite

                    Du coup, j'aimerais bien arriver à faire fonctionner TA solution.
                    Est-ce que la capture ci-dessus te donne une idée de ce que je pourrais faire pour arriver à ça :
                    Je viens de mettre mon code dans une page test et j'obtiens ceci sous Chrome et Firefox :
                    Cliquez sur l'image pour l'afficher en taille normale

Nom : essai-sprite.jpg 
Affichages : 1 
Taille : 25,7 Ko 
ID : 1805041
                    donc, c'est possible

                    Note: flex est mal supporté pour l'instant
                    UP, le plugin universel à découvrir sur https//up.lomart.fr
                    bgMax
                    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                    Commentaire


                    • #11
                      Re : Histoire de sprite

                      OK, je vais donc ré-éplucher mon travail pour voir où j'ai fait une bourde.
                      Merci
                      Flo, Ariège

                      Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                      Commentaire


                      • #12
                        Re : Histoire de sprite

                        OK, alors j'ai bien tout ré-épluché et trouvé une boulette.
                        Ca va mieux mais... ce n'est pas encore ça : pour une raison que j'ignore, la ligne height: 24px; n'est pas respectée, et la classe affiche autant d'icônes que la hauteur de la box (en fonction de la longueur du texte ou de la largeur du navigateur) lui permet d'en voir dans le sprite...

                        Cliquez sur l'image pour l'afficher en taille normale

Nom : table-cell-corrige.jpg 
Affichages : 1 
Taille : 19,8 Ko 
ID : 1805044

                        Cliquez sur l'image pour l'afficher en taille normale

Nom : table-cell-corrige-4-lignes.jpg 
Affichages : 1 
Taille : 20,4 Ko 
ID : 1805045

                        Je laisse le code en place si jamais tu as le temps d'y jeter un œil, ici : http://www. rouchenergies.fr /qui-sommes-nous/qualifications/rge-qualibois.html
                        Flo, Ariège

                        Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                        Commentaire


                        • #13
                          Re : Histoire de sprite

                          Bonsoir,

                          Pour coller à ton exemple, j'avais mis :
                          .file-pdf { background-position: 0 -1080px; }
                          car tu utilises des images empilées.

                          En réalité, si l'on veut centrer (ou répéter) verticalement des images, il faut utiliser un sprite avec les images à l'horizontal et comme css :
                          .file-pdf { background-position: -1080px center; }
                          ce center permet de centrer une tranche qui n'a rien dessus et dessous.

                          C'est une des limites des sprites !

                          Il faut donc refaire l'image globale avec les images cote à cote.

                          Connais tu ce site pour t'aider ?
                          A tool for generating image sprites and CSS for your web site. Using this tool can help you dramatically reduce the number of HTTP requests made for higher performance.


                          Bon courage
                          UP, le plugin universel à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          Commentaire


                          • #14
                            Histoire de sprite

                            Ah ben d'accord... Je pouvais toujours chercher ...
                            Merci pour le lien, parce qu'empiler 50 icônes l'une au dessus de l'autre, c'est pas ce que je préfère faire quand je fais joujou avec The Gimp

                            Merci Lomart (1 fois encore !!)

                            Édit: c'est fait, ça marche au poil ! (Et le sprite + son css généré en quelques secondes, j'adore !!)
                            Dernière édition par FlodAriege à 22/08/2015, 23h32
                            Flo, Ariège

                            Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                            Commentaire


                            • #15
                              Re : Histoire de sprite

                              Si c'est réglé merci de l'indiquer :
                              Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide.
                              Confucius

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X