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 Quand tu dis layout "table", c'est une vraie , un display: table, ou bien autre chose qui a l'air d'une table ? (de mémoire, dans les tables, on a un vertical-align: middle, mais ça fait un bail que je fais plus que du flex :D )
=> More informations about this toot | More toots from lamecarlate@pouet.it
@lamecarlate autre chose qui a l'air d'une table
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw Tu peux poster un ptit exemple quelque part ? Normalement avec flex / inline-flex, c'est trivial (mais dans la vraie vie on sait bien que c'est jamais trivial :D ).
=> More informations about this toot | More toots from lamecarlate@pouet.it
@lamecarlate tiens cadeau ! 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 icônes de la colonne "confidence" 🙂
attention les yeux, le DOM et le CSS sont pas d'une propreté absolue 😅
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw Après test rapide, vertical-align: middle sur les svg des chevrons semble arranger les choses. Ça permet que la div parente prenne la bonne taille et donc ça centre (grâce au align-items: center; de .cell). À voir comment le faire pour que ça n'impacte pas trop loin.
=> More informations about this toot | More toots from lamecarlate@pouet.it
@julienw on dirait que tu décris une Grid
=> More informations about this toot | More toots from hommemystere@piaille.fr
@hommemystere c'est un peu plus compliqué que ça :D
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 icônes dans la colonne "confidence")
=> More informations about this toot | More toots from julienw@pouet.chapril.org
@julienw Un span autour du texte est possible ?
=> More informations about this toot | More toots from arkhi
@arkhi tout est possible !
=> 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 (ba2dc).Proxy Information
text/gemini