L’arrivée du module CSS Grid Layout (modèle de disposition en grille) et sa prise en charge par la majorité des navigateurs modernes a véritablement révolutionné notre façon de réaliser des mises en page, mais pas seulement…
Parallèlement, plusieurs astuces ont également vu le jour, dont une nous intéressant plus particulièrement aujourd’hui :
Simuler une transition CSS vers la valeur auto.
En effet, si vous utilisez le langage CSS régulièrement dans votre travail ou pour vos loisirs (chose que je comprendrais parfaitement 😏), vous avez sans doute été, un jour, confronté à ce problème : effectuer une transition ou une animation CSS entre les valeurs 0 et auto. Ces deux valeurs étant souvent associées à la propriété CSS height, afin d’afficher/masquer des panneaux dépliants tels que les accordéons.
En règle générale, une transition CSS entre deux états n’est possible que pour les propriétés CSS acceptant des valeurs numériques fixes (avec ou sans unité), des pourcentages, ou bien encore des couleurs.
La valeur auto représente un cas complexe et les spécifications requièrent de ne pas animer celle-ci. Il est donc, théoriquement, impossible d’effectuer une transition CSS vers la valeur auto.
Mais fort heureusement, il existe quelques astuces pour pallier cette limitation technique. 😉
max-heightUne des astuces les plus répandues est d’utiliser la technique du max-height.
Reprenons l’exemple évoqué précédemment, celui d’un panneau dépliant, en comparant la méthode classique basée sur la valeur auto associée à la propriété CSS height, et la technique basée sur la propriété CSS max-height.
Utilisation d...
[Courte citation de 8% de l'article original]