Ancestors

Written by Julien W. on 2024-10-08 at 13:39

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

Written by Vincent Valentin on 2024-10-08 at 19:01

@julienw preneur d’un petit bac à sable pour mieux voir le besoin.

=> More informations about this toot | More toots from vincent@oisaur.com

Written by Julien W. on 2024-10-09 at 14:31

@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

Written by Vincent Valentin on 2024-10-09 at 18:50

@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

Written by Vincent Valentin on 2024-10-09 at 19:28

@julienw Je confirme, à moins de basculer sur une grid et de casser encore plus l’accessibilité, je ne vois que JS pour faire ça :

• https://codepen.io/vincent-valentin/pen/wvVozbY

• https://codepen.io/vincent-valentin/pen/ZEgBBWb

=> More informations about this toot | More toots from vincent@oisaur.com

Written by Julien W. on 2024-10-10 at 15:58

@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

Written by Julien W. on 2024-10-10 at 15:59

@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

Toot

Written by Julien W. on 2024-10-10 at 16:13

@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

Descendants

Written by Vincent Valentin on 2024-10-10 at 16:17

@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

Written by Julien W. on 2024-10-10 at 17:23

@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