Bonsoir,
pour créer un "récapitulatif" visuel je souhaite ajouter des icônes à une page web. Est-il préférable de les faire en CSS ou SVG (ou autres formats d'image)
- d'un point de vue performance
- d'un point de vue recommandation W3C
merci
Version imprimable
Bonsoir,
pour créer un "récapitulatif" visuel je souhaite ajouter des icônes à une page web. Est-il préférable de les faire en CSS ou SVG (ou autres formats d'image)
- d'un point de vue performance
- d'un point de vue recommandation W3C
merci
Es-tu sûr de ton questionnement ?
Le CSS, c'est de la mise ne forme, le SVG c'est un format de graphique (il y a aussi jpg, png, bmp, etc etc).
Donc, ton CSS te permet de préciser le placement et l'apparence d'un élément dans le flux de la page, cet élément étant codé à l'origine… sous un format quelconque. La performance ? ben ça va aussi dépendre de la machine du client, et en es-tu à gérer les µs d'une foule de clients ? La recommandation W3C ? ben, un format reconnu, et le svg est répertorié au W3C que je sache.
Quelle est la vraie question ?
combien d’icônes ?
moins d'une douzaine ? c'est peanuts question probleme de performances.
une cinquantaine ? faut utiliser un sprite
jusqu'a 255? utiliser une fonte..
Au delà ? à moins de travailler sur un famework adapté, attention à l'usine à gaz ... ;)
@AdmChiMay
ce lien explique comment dessiner des images (en CSS) notamment des images animées.
@psychadelic entre 10 et 20 icônes.
@tous
mon idée étant de résumer pour que d'un clin d'oeil (exemple une croix rouge pour signifier une réponse négative, un "V" vert pour de l'affirmatif) on voit de quoi il est question. La taille ne sera pas plus grande que 2 à 4 fois celle d'un smiley.
pour les performances, vu le nombre d'icônes, je me doutais que leur influence est quasi nul (pour un ordinateur tout du moins) mais quand est-il de la validation W3C notamment pour l'accessibilité. Car une image (quelque soit son format) n'est pas traité de la même manière qu'un dessin en CSS.
Bonjour,
attention toutefois dans certains cas le CSS peut générer du code plus lourd qu'un simple SVG.
Le CSS ne sera que décoratif alors que le SVG pourra être porteur d'information.
Il existe aussi des caractères ASCII qui peuvent très bien faire l'affaire et gérable comme une fonte standard.
exemple :
- ✔ ✔
- ✖ ✖
- ✂ ✂
type infobulle ? ce serait parfait.Citation:
Envoyé par NoSmoking
Non ici on parle porteur d'information utile/nécessaire à la compréhension du document, les « info-bulles » sont une façon d'ajouter une précision sur un élément donné.
Pourquoi parles tu « info-bulles » justement ?
Je me fourvoie peut-être sur le sens d'info-bulle mais il y a sous nos yeux l'exemple parfait pour illustrer mon propos (CSS ou SVG) et mes attentes (performance / recommandation W3C-accessibilité / ajout d'information). Et c'est à NoSmoking que l'on doit cet exemple.
Dans son "profil", à gauche de ses réponses, sous les étoiles rouges, il y a 6 "icônes" qui indique tant par l'icône que par les information lors du survole de ces icônes que NoSmoking est rédacteur, modérateur, etc.
Mes besoins nécessiteront en moyen 10-15 icônes (jusqu'à 50 je dirai par précaution), éventuellement plus grandes, et avec affichage d'informations lors du survole.
PS:un petit exemple pour illustrer ?Citation:
ici on parle porteur d'information utile/nécessaire à la compréhension du document, les « info-bulles » sont une façon d'ajouter une précision sur un élément donné
Bonjour,
Ensuite, générer une "info-bulle" est une autre problématique. :recherch: "CSS info-bulle"
Dans le cas précité le code est
Il s'agit dans ce cas d'image type icône.Code:<img src="https://www.developpez.net/forums/images/ranks/embleme-redacteur.png" title="Rédacteur - 2 articles publiés" user="405341" role="publications" style="cursor: pointer;">
L'« info-bulle » est en fait le texte contenu dans l'attribut title.
Un exemple de quel propos ?
Prend le logo en haut à gauche de cette page
et maintenant prend les icônes de droite avec les réseaux sociauxCode:
2
3
Code:
2
3
4
5