Bug onglet en CSS avec :target

Bonjour,

Effectivement le comportement est "attendu", même s'il n'existait pas à l'époque de la rédaction de ce tutoriel.
Pour corriger ce comportement, il faut essayer d'utiliser des éléments plus en amont dans le document qui serviraient de target, mais qui auraient un display: none;
Bizarrement cette solution fonctionne plutôt pas mal, puisque le target fonctionne, mais le navigateur ne "glisse" pas vers une ancre qui n'est pas visible.

Adaptation du code HTML :

<span class="controls" id="volet_clos"></span>
<span class="controls" id="volet_ouvert"></span>
<div id="volet">
	<p>Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus</p>
	<p>Wurscht elementum semper tellus s'guelt Pfourtz !</p>
			
	<a href="#volet" class="ouvrir" aria-hidden="true">Ouvrir !</a>
	<a href="#volet_clos" class="fermer" aria-hidden="true">fermer !</a>
</div>

Adaptation du code CSS (seuls les blocs édités apparaissent) :

/* ajouter */
.controls {
    display: none;
}
/* supprimer cette partie
#volet:target {
	left: 10px;
}*/
#volet_ouvert:target ~ #volet {
	left: 10px;
}

/* code pour la fermeture */

#volet_ouvert:target ~ #volet a.fermer {
	display: block;
}
#volet_ouvert:target ~ #volet a.ouvrir {
	display: none;
}
#volet_clos:target ~ #volet {
	left: -270px;
}

Avec ces modifications, cela devrait fonctionner.
Bon courage

Merci beaucoup ca marche parfaitement !

Si jamais d'autre ont besoin de ce topic, il y a juste une petite modification à apporter :

<span class="controls" id="volet_clos"></span>
<span class="controls" id="volet_ouvert"></span>
<div id="volet">
	<p>Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus</p>
	<p>Wurscht elementum semper tellus s'guelt Pfourtz !</p>
			
	<a href="#[#red]volet_ouvert[/#]" class="ouvrir" aria-hidden="true">Ouvrir !</a>
	<a href="#volet_clos" class="fermer" aria-hidden="true">fermer !</a>
</div>