Les gens qui font du CSS, vous avez une super idée pour aligner les icônes dans un layout "table" avec une des cellules qui contiendrait:
texte
autre texte
faire que les icones soient alignées verticalement quel que soit le texte? Et que le texte "ait l'air" centré.
Pour l'instant on a un padding-inline-start en pourcentage pour pouvoir s'adapter à la taille de la cellule...
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw preneur d’un petit bac à sable pour mieux voir le besoin.
=> More informations about this toot | More toots from vincent@oisaur.com
@vincent c'est pas trop bac à sable, mais c'est ça : https://deploy-preview-764--mozilla-perfcompare.netlify.app/compare-results?baseRev=e0a1b8bc6bd28305a0b1c293ac0176599149c1ba&baseRepo=mozilla-central&newRev=02bd95b16de9ef621d6b04626d655e3a346da296&newRepo=mozilla-central&framework=12&search=memory
Les petites icônes dans la colonne "confidence"
Attention le HTML et le CSS sont pas géniaux, c'est un peu de la soupe de React Material UI...
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw Je vois… pas simple ! Je te dis si je trouve quelque chose de malin mais j'y crois peu.
=> More informations about this toot | More toots from vincent@oisaur.com
@julienw Aucun commentaire sur l’accessibilité, c’est ça ? 😬
=> More informations about this toot | More toots from vincent@oisaur.com
@vincent ahah
compliqué l'accessibilité sur un cas comme ça mais je sais qu'on peut faire mieux que ce qu'on a aujourd'hui...
Par exemple je pensais un peu naïvement qu'en mettant des role "cell" et "columnheader" aux bons endroits, le navigateur saurait les relier, mais en fait pas trop
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw Je confirme, à moins de basculer sur une grid et de casser encore plus l’accessibilité, je ne vois que JS pour faire ça :
=> More informations about this toot | More toots from vincent@oisaur.com
@vincent merci d'avoir jeté un oeil, je vais regarder tes propositions !
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@vincent sur le premier, belle bidouille à base de :before/:after et display:contents :-) je pense pas assez au display:contents !
Sur le second, je comprends pas pourquoi tu utilises offsetWidth et clientWidth, et pas juste l'un des deux, dans ta computation? J'aurais utilisé que offsetWidth mais j'imagine que tu as une bonne raison.
Chouette solution mais je pense pas que ce soit jouable pour nous car on peut avoir vraiment beaucoup d'items :/
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@vincent C'est aussi la raison pour laquelle on utilise pas display: grid sur l'ensemble de la table d'ailleurs, peur que la performance ne soit pas au rendez-vous dès qu'on a plein de lignes.
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@vincent pourquoi dis-tu que la méthode grid casse encore plus l'accessibilité ? à cause de display: contents?
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw Oui. C’est un display qui associé à un élément avec un poids sémantique le fait sauter.
=> More informations about this toot | More toots from vincent@oisaur.com
@vincent oki
sur display:contents j'ai vu passer ça aujourd'hui => https://mastodon.social/@Thain/113283467731812905
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw Non, c’est une erreur, j'ai alterné entre les deux.
=> More informations about this toot | More toots from vincent@oisaur.com This content has been proxied by September (3851b).Proxy Information
text/gemini