Tweet
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 :
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 :
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)
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 :
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 :
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)
Commentaire