Afficher et cacher du texte en CSS
Depuis quelques temps, je fais la chasse aux frameworks Javascript inutiles. Par exemple, je m’interdis d’utiliser jQuery. En effet, il est généralement possible d’écrire du code équivalent avec l’API ECMAScript standard. C’est ce que certains appellent du Vanilla JS.
Introduction
Dernièrement, j’ai dû implémenter une fonctionnalité qui permettait d’afficher ou cacher des informations via un toggle button. L’idée est d’avoir un petit « (+) » cliquable en plein milieu d’un texte qui sur un clic affiche plus de détail. Ce détail peut être à nouveau masqué en cliquant sur un « -« . Ceci est plutôt simple à implémenter en Javascript (même sans framework).
Mais pourquoi utiliser du Javascript quand du CSS suffit ?
Solution
Pour cela, il faut utiliser une checkbox qui fera office de toggle button, personnaliser son affichage avec un label et enfin gérer l’affichage du détail avec des sélecteurs CSS de voisins généraux.
Patron HTML
<p> Première partie du texte toujours visible. <input type="checkbox" id="see-more-1" class="seemore"> <label for="see-more-1" class="seemore"></label> <span class="hide">Détail masqué et affichable</span> Seconde partie du texte toujours visible. </p>
Sélecteur CSS
/* par défaut, le détail est masqué */
span.hide { display: none; }
/* personnalisation du label */
label.seemore::before { content: "(+)"; }
label.seemore:hover { cursor: pointer; }
/* la checkbox est cachée en la déplaçant hors de l'écran pour ne pas être interprétée par les lecteurs */
input[type='checkbox'].seemore {
position: absolute;
left: -9999px;
top: -9999px;
}
/* quand la checkbox est cochée, le détail est rendu visible et on le termine par une parenthèse fermante */
input.seemore:checked~span.hide { display: inline; }
input.seemore:checked~span.hide::after { content: ")"; }
/* quand la checkbox est cochée, le "+" devient un "-" */
input.seemore:checked~label.seemore::before { content: "(- : "; }
Et rien de plus !
Démo
Conclusion
Comme souvent, il est préférable de connaitre les fondamentaux avant de se lancer dans des développements complexes. Ici, nous voyons qu’en connaissant quelques utilisations à peine avancées des sélecteurs CSS, nous nous épargnions l’intégration d’un framework ou le développement d’un composant. Soit un gain en performance et en maintenance !
https://blog.lecacheur.com/2019/09/03/afficher-et-cacher-du-texte-en-css/https://blog.lecacheur.com/wp-content/uploads/2019/09/CSS3_logo_and_wordmark.svg_.pnghttps://blog.lecacheur.com/wp-content/uploads/2019/09/CSS3_logo_and_wordmark.svg_-150x150.pngDéveloppementcss,javascriptDepuis quelques temps, je fais la chasse aux frameworks Javascript inutiles. Par exemple, je m'interdis d'utiliser jQuery. En effet, il est généralement possible d'écrire du code équivalent avec l'API ECMAScript standard. C'est ce que certains appellent du Vanilla JS. Introduction Dernièrement, j'ai dû implémenter une fonctionnalité qui permettait d'afficher ou cacher...SeBSébastien LECACHEUR23r0@laposte.netAdministratorLe weblogue de SeB
Je fais la même chasse aux frameworks, et pour afficher ou masquer un bloc, deux lignes de CSS suffisent largement. Moins de JavaScript, c’est aussi moins de choses à relire dans six mois quand on a oublié pourquoi telle classe traînait là.
Rien à voir avec le CSS, mais cette semaine j’ai dû joindre une copie de ma carte d’identité à un dossier de location. J’ai photographié le recto et le verso avec le téléphone, puis avec lensup.ai je les ai posés sur une seule page A4 à taille réelle, prête à imprimer. Le traitement se fait dans l’onglet, les fichiers ne sont jamais envoyés sur un serveur, ce qui me rassure pour ce genre de document. Le seul truc : il faut penser à cadrer bien à plat, sinon on refait la photo.
Je suis assez d’accord sur le fond : pour afficher ou masquer un bloc, une classe et deux lignes de CSS suffisent, pas besoin d’embarquer une lib. J’ai encore vu cette semaine un site charger tout un framework pour un menu déroulant.
Ma propre chasse aux outils inutiles s’est arrêtée sur une paperasse : ma banque demandait une copie de ma carte d’identité, recto et verso sur une seule feuille A4, à taille réelle. J’ai photographié les deux faces au téléphone, puis je les ai montées dans lensup.ai pour les poser côte à côte sur la page. Les fichiers restent sur l’appareil et le traitement se fait dans l’onglet du navigateur, ce qui m’arrangeait pour ce genre de document. Petit bémol honnête : la compression vise le poids qu’on choisit, il m’est arrivé de dépasser un peu, donc je jette un œil avant d’envoyer le dossier.