Afficher/masquer du contenu

Hyogapag · 3 Septembre 2006

Depuis quelques jours, je réfléchis à l'intégration d'un système pour masquer/afficher du contenu sur mon site selon le principe du lien "Lire la suite..." que l'on retrouve sur de nombreux sites, dont les blogs.

Ces liens, bien souvent, chargent une nouvelle page contenant la totalité du message, ce qui ne me convenait pas, pas plus que les solutions utilisant AJAX et limitant le référencement auprès des moteurs de recherche.

Je me suis donc d'abord penché vers une solution en DHTML ne portant aucun préjudice aux personnes ne disposant pas / ne voulant pas de Javascript, ce que j'ai réussi à obtenir grâce à l'aide d'un des membres de ce forum.

Seulement, utiliser du Javascript me gênait quelque peu. J'ai donc cherché une solution en XHTML / CSS. J'y suis finalement parvenu.

Nécessite :

Un navigateur qui reconnaît la norme CSS3
Pour une automatisation du principe, PHP

Le principe :

Il s'agit de combiner le principe des ancres et de la pseudo-classe target. Celle-ci permet d'agir directement sur l'élément dont l'ID est donnée (et donc de le cacher / montrer, mais aussi de changer son style, etc.)

Limitations :

IE ne reconnaisssant pas la norme CSS3, j'ai utilisé des balises IF en HTML pour qu'il affiche la page entièrement développée, sans les liens pour cacher/montrer. Je n'ai pas testé avec Opéra.

Par ailleurs, ce système ne fonctionnant qu'avec les ID, il faut créer une ID unique pour chaque élément à masquer/montrer. Une légère modification dans le code PHP (dans un foreach affichant des résultats de requête par exemple, devrait suffire) côté XHTML/HTML mais côté CSS, vous devrez aussi créer ces ID, ce qui implique un style.php et non .css et impose la création d'une boucle foreach similaire dans ce fichier (+ probablement aussi la récupération de variables par la méthode GET). Je pense néanmoins que le jeu en vaut la chandelle.

Le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>essai</title>
  <style type="text/css">
	#montrer {display: none;}
	#cacher:target {display: none;}
	#montrer:target {display: block;}
  </style>
  <!--[if IE]>
  <style type="text/css">
	#montrer {display: block;}
  </style>
  <![endif]-->
</head>
<body>
  <!--[if !IE]> <--><p><a href="#montrer">Montrer le texte</a></p><!--> <![endif]-->
	<div id="montrer">
	  <div id="cacher">
		Texte à montrer.<!--[if !IE]> <--> <a href="#cacher">Cacher le texte</a><!--> <![endif]-->
	  </div>
	</div>
</body>

Je tiens par ailleurs à faire remarquer qu'utilisé en combinaison avec le Javascript posté dans le forum correspondant (qui ne cache pas le contenu aux moteurs de recherche et ne gêne pas si Javascript n'est pas utilisé), il permet de toucher à la fois

les visiteurs acceptant Javascript
ceux ne le possédant pas/l'ayant désactivé et n'utilisant pas IE

Cette solution qui me semble intéressante m'a été inspirée par CSS Play de Stu Nicholls, et pour la mettre en oeuvre je me suis servi d'un article de Blog & Blues.

J'espère que ce code servira à certains.

ajpg · 3 Septembre 2006

Salut,

Il faudrait tester tous les navigateurs dans leurs différentes versions et filtrer ceux qui ne supportent pas :target... Bon courage :rolleyes:

Internet Explorer n'est pas le seul a ne pas supporter :target, c'est le cas également de l'excellent Opera (y compris la dernière version). Le contenu serait donc inaccessible à moins de désactiver la feuille de style.

Par ailleurs, en dehors des éventuels problèmes d'accessibilité, il faudrait estimer les limites qu'imposent cette méthode : par exemple comment atteindre une ancre à l'intérieur de la partie cachée ?

Sinon, remarque technique, je vois mal l'intérêt de cette div#cacher puisque n'importe quel autre lien que href="#montrer" reviendrait à cacher div#montrer (cause du problème évoqué dans le paragraphe ci-dessus)

Enfin le module CSS3 concernant les sélecteurs n'est pas une norme comme c'est d'ailleurs indiqué dans le document concerné :

This is still a draft document and may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to cite a W3C Working Draft as other than "work in progress".

smile · 4 Septembre 2006

Et puis même au niveau référencement, cacher une partie du texte aux visiteurs mais visible par les moteurs, n'est ce pas interdit ?

Dans ce cas je lui préfère Ajax, la partie cachée n'est pas visible par les moteurs, mais qui a l'avantage de respecter le Guideline des moteurs de recherche.

**captain_torche** · 4 Septembre 2006

Les moteurs de recherche ne pénalisent pas systématiquement les contenus "masqués", bien heureusement.

Et de toutes façons, avec les méthodes préconisées (masquage en JS au chargement de la page), les moteurs ne verront pas de blocs masqués.

smile · 4 Septembre 2006

Ben si ils indexeront le contenu caché si celui-ci se trouve dans une balise div sauf si on l'appelle via Ajax.

Et comment faire la différence entre un contenu masqué acceptable et un contenu masqué non acceptable ? A mon avis des derives peuvent etre constatées ...

Connexion

Afficher/masquer du contenu

Sujets conseillés

Hyogapag

ajpg

smile

captain_torche

smile

Veuillez vous connecter pour commenter

Parcourir

Activité