Le Hollandais Volant#14358 - [CSS] Petite astuce pour le responsive
J’ai une liste de 25 <div> qui constituent un diagramme en barre. Les <div> sont côte-à-côte, de largeur 30 et de hauteur variable. Ça me donne ça : http://lehollandaisvolant.net/img/a9/arts.png
Le problème pour le responsive, c’est que les éléments finissent par glisser sur deux lignes quand l’écran est trop petit.
On peut appliquer un "overflow:hidden", mais dans ce cas, les éléments les plus récents (ceux à droite) sont masqués. Ce n’est pas ce qu’on veut : on veut les éléments les plus récents visibles.
Il faudrait que l’overflow vire les éléments sur la gauche.
C’est possible, en CSS avec une petite astuce très simple : "direction: rtl;"
Inversez (dans le HTML) l’ordre des éléments, puis au graphique, appliquez le CSS " direction: rtl;". « RTL = right ro left ».
Ça va les remettre dans le sens normal (l’inversion CSS va compenser l’inversion en HTML).
Ajoutez maintenant le "overflow:hidden".
Maintenant, si l’écran est rétrécit, les éléments qui sont masqués sont ceux qui sont à gauche, et les barres du graphique qui sont visibles sont ceux les plus à droite (les plus récents aussi).
Si le texte dans chaque barre du graphique est lui aussi inversé, ajoutez un "direction: ltr" à ces éléments là.
Et là tout marche. \o/
Le problème pour le responsive, c’est que les éléments finissent par glisser sur deux lignes quand l’écran est trop petit.
On peut appliquer un "overflow:hidden", mais dans ce cas, les éléments les plus récents (ceux à droite) sont masqués. Ce n’est pas ce qu’on veut : on veut les éléments les plus récents visibles.
Il faudrait que l’overflow vire les éléments sur la gauche.
C’est possible, en CSS avec une petite astuce très simple : "direction: rtl;"
Inversez (dans le HTML) l’ordre des éléments, puis au graphique, appliquez le CSS " direction: rtl;". « RTL = right ro left ».
Ça va les remettre dans le sens normal (l’inversion CSS va compenser l’inversion en HTML).
Ajoutez maintenant le "overflow:hidden".
Maintenant, si l’écran est rétrécit, les éléments qui sont masqués sont ceux qui sont à gauche, et les barres du graphique qui sont visibles sont ceux les plus à droite (les plus récents aussi).
Si le texte dans chaque barre du graphique est lui aussi inversé, ajoutez un "direction: ltr" à ces éléments là.
Et là tout marche. \o/