Bases de l'interactivité en CSS

L'objectif est de comprendre comment marchent les techniques permettant de faire de l'interactivité en CSS. L'exemple est volontairement absurde.

Rappels

Sélecteurs de descendance

Dans le cadre de l'interactivité, on a en général besoin de combiner des sélecteurs, pour que nos effets interactifs soient limités aux éléments qui nous intéressent. Dans l'exemple suivant (qui n'est pas encore interactif !), on ne sélectionne que les éléments strong qui descendent d'un élément de classe interactif :

.interactif strong {
	border: 1px solid tomato;
	background-color: goldenrod;
}

Lorem ipsum dolor sit amet quibusdam nostrum aut eum cupiditate aut. Qui in ut iste eum tempore quia molestiae quia. Veniam soluta voluptatem iusto sit qui eius quaerat dolorum. Voluptatibus voluptatem nulla ut sunt.

Ce paragraphe va être interactif ! Similique ipsam voluptatum optio non quisquam molestias. Reprehenderit necessitatibus et dolor quo omnis dolor. Et sunt quo nemo officiis. Velit blanditiis magni quaerat officia a provident.

Pseudo-classes

Pour rendre les pages interactives en CSS, on utilise une pseudo-classe qui sélectionne des éléments dynamiquement, typiquement :hover. Survolez les éléments en gras dans la démo suivante :

strong:hover {
	border: 1px solid tomato;
	background-color: goldenrod;
}

Notez que ça marche pour les deux paragraphes, alors qu'on voudrait que seul le 2e soit interactif.

Limiter l'interactivité à un contexte particulier

On va pouvoir faire cela en combinant tout simplement les deux sortes de sélecteurs, comme ceci :

.interactif strong:hover {
	border: 1px solid tomato;
	background-color: goldenrod;
}

Ici, on ne sélectionne que les éléments strong qui descendent d'un élément de classe interactif. Tester la démo :

Faire disparaître un élément

Quand on parle d'interactivité en CSS, on ne pense pas à un simple changement de couleur au survol. La base, c'est de faire apparaître/disparaître des éléments de la page.

Une première idée est de rendre un élément invisible, jusqu'à ce qu'il soit survolé. Essayez de survoler les trous dans le 2e paragraphe :

.interactif strong {
	opacity: 0;
}

.interactif strong:hover {
	opacity: revert;
}

Faire vraiment disparaître un élément

Le plus souvent, on ne veut pas que les éléments soient simplement invisibles, on veut qu'ils disparaissent complètement, sans même occuper d'espace sur la page. Pour cela il faut utiliser display:none : l'effet est le même que si on avait enlevé l'élément (et tous ses descendants) du HTML.

.interactif strong {
	display: none;
}

.interactif strong:hover {
	display: revert;
}

Remarquez qu'il n'y a plus ni mots en gras ni trous dans le 2e paragraphe :

Cependant, il n'y a plus non plus d'interactivité : on ne peut pas faire réapparaître les éléments cachés en les survolant ! Pourquoi ?!

Un peu de recul

On ne peut pas survoler les éléments qui sont en display:none, puisqu'ils n'existent plus dans la page !

Pour les faire apparaître, il est nécessaire que l'interaction se fasse avec un autre élément, typiquement son parent. Illustrons cette idée sur le cas plus simple des couleurs :

.interactif:hover strong {
	border: 1px solid tomato;
	background-color: goldenrod;
}

Notez la différence subtile entre le .interactif strong:hover des sections précédentes et le .interactif:hover strong de cette section ! Passez la souris sur le 2e paragraphe pour voir le résultat, et comparer avec la démo de la section « Limiter l'interactivité » :

Résultat final

Il ne reste plus qu'à combiner cette idée (faire porter l'interaction sur le parent de l'élément concerné) avec la technique du display:none par défaut :

.interactif strong {
	display: none;
}

.interactif:hover strong {
	display: revert;
}

Remarque : ce n'est pas le comportement qu'on avait dans la section avec opacity:0, car au survol du paragraphe tous les éléments strong apparaissent. Ce n'est pas grave ici car cet exemple est absurde… Dans les cas réalistes, soit il n'y a pas d'ambiguïté sur le parent à utiliser pour déclencher l'interaction, soit il suffit d'ajouter un parent exprès pour ça.