Joomladay francophone 2018 à Paris 18 et 19 mai

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

  • #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 ?
      Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
      Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
      http://documentation.informaticien51...couverte-de-k2

      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é

        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;
          }
          Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
          Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
          http://documentation.informaticien51...couverte-de-k2

          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

            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 !

              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:
                    
                .box-gris {
                    /* 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;
                }
                .box-gris > div {
                    /* afficher les div enfants comme cellules centrées verticalement */
                    display: table-cell;
                    vertical-align: middle;
                }
                
                [class^="file-"] {
                    /* 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;
                }
                .file-pdf { background-position: 0 -1080px; }

                Pour le HTML:
                Code:
                <div class="box-gris">
                    <div class="file-pdf"></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é.
                Avec Ghazal et Manu93fr nous guiderons les Grands Débutants au https://www.joomladay.fr/ le 19 mai à Paris
                ---
                UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ...
                plein de nouveaux modules et plugins 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

                  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
                    Avec Ghazal et Manu93fr nous guiderons les Grands Débutants au https://www.joomladay.fr/ le 19 mai à Paris
                    ---
                    UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                    bgMax
                    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ...
                    plein de nouveaux modules et plugins 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

                      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

                        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 ?
                          http://spritegen.website-performance.org/

                          Bon courage
                          Avec Ghazal et Manu93fr nous guiderons les Grands Débutants au https://www.joomladay.fr/ le 19 mai à Paris
                          ---
                          UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ...
                          plein de nouveaux modules et plugins 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

                            Commentaire


                            • #15
                              Re : Histoire de sprite

                              Si c'est réglé merci de l'indiquer :
                              http://forum.joomla.fr/announcement.php?f=230

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X