Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

La propriété behaviour et fichiers HTC

Voilà un billet qui était dans mes cartons depuis au moins 6 mois ! Je ne l’avais pas publié car je le trouvais vide de sens car c’est une technologie créée par et pour Microsoft. Cependant, je vois maintenant certaines personnes chercher des infos sur ce sujet en vain. Je publie donc le peu de connaissances que j’ai à ce sujet en y mettant de fortes réserves quand à son utilisation. Peut-être cela assouvira-t-il la curiosité de certains !

Comment je suis arrivé à utiliser ce système

Il y a environ 1 an je réalisais ma participation intitulée « Somewhere » à CSSZenGarden pour la catégorie Special Effects. La particularité de ma participation était l’exploitation poussée de la pseudo-classe :hover pour l’affichage et le masquage des paragraphes.

Le gros problème c’est qu’Internet Explorer, le navigateur obsolète, interprètre la pseudo-classe :hover uniquement sur les ancres (<a>)

J’ai donc cherché une solution et, si mon souvenir est bon, c’est Rorschach sur le forum de FreeGaïa qui m’a aiguillé sur la propriété behaviour et les fichier htc.

Je vais donc tenter de vous expliquer comment je me suis servi de cette propriété pour simuler la pseudo-classe :hover sur Internet Explorer.

Attention ! Cette propriété n’est pas valide, elle est d’ailleurs encore moins prévue dans une nouvelle version de CSS. Evitez donc absolument de l’utiliser pour des sites se voulant accessibles et aux normes.


Qu’est-ce qu’un fichier HTC ?

C’est une sorte de fichier JavaScript externe permettant d’agir sur les éléments XHTML d’une page.

Comment s’utilise la propriété behaviour ?

Cette propriété a pour seul but d’appeler le fichier HTC qui agira sur l’élément.
Exemple :

[css] #element {behavior: url('fichier.htc');}

Que contient un fichier HTC ?

Un fichier HTML Component doit posseder en premier lieu une en-tête définissant ses actions (onmouseover, onmouseout, etc.) et les fonctions JavaScript qu’utiliseront ces handlers.

Exemple :

[html] <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="montrer(this)" /> <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="cacher(this)" />

Ensuite viennent les fonctions comme dans un fichier JavaScript externe classique.


Simuler la pseudo-classe :hover sous Internet Explorer

Tout d’abord, créons un piti code XHTML.

[html] <div class="exemple">    <h2>Mon titre</h2>    <p>Sed ligula. Cras et enim ac mauris porta gravida. In pulvinar nibh quis    turpis. Etiam congue metus vitae arcu. Aenean est. Nulla ut est.</p> </div>

L’effet désiré va être qu’au survol du <h2> nous allons faire apparaître le paragraphe qui est par défaut caché. Pour ce faire, un bon navigateur comme Firefox va aisément comprendre ce petit code CSS :

[css] .exemple p {display:none;} .exemple:hover p {display:block;}

Mais pour Internet Explorer, ce code, c’est trop de bonheur d’un seul coup donc il comprends pas trop ce qu’il se passe dans sa tête. Il faut donc utiliser une entourloupe rustinesque qui s’appelle behaviour. On applique donc cette propriété sur l’élément source de l’effet, ici le <h2>.

[css] .exemple {behavior: url(display.htc);} .exemple p {display:none;} .exemple:hover p {display:block;}

Et là, c’est le drame ! Il faut créer le fameux fichier HTC, mais là, vaut mieux avoir des connaissances en JavaScript, sinon c’est pas la peine d’essayer d’utiliser cette méthode ! D’autant plus, que lorsque j’ai bossé dessus je crois me souvenir que certaines possibilités était bloquées. Par contre, faire un petit alert(« Kikoo ! »); skybloguesque pour la déconne internationale est permis.

Voici donc deux petites fonctions JavaScript toutes simples pour afficher et cacher tout les paragraphes <p>.

 function montrer() { 	for(i=0; i<ListeP.length; i++) 		{ListeP[i].style.display = 'block';} 	} function cacher() { 	for(i=0; i<ListeP.length; i++) 		{ListeP[i].style.display = 'none';} 	}

Mais bon, là, e petit exemple devenu traditionnel s’impose…

Voir l’exemple

Plus d’infos à ce sujet :


Ce que nos lecteurs en disent :

  1. Tuf

    hé bé c’est tordu !

  2. neak

    en flash c + rapide ;)

  3. Ju

    intéressant, je ne connaissais pas cette fameuse propriété pour cacher du texte , merci :)

  4. bobo

    moi j’aime bien le calendar .htc de microsoft
    pour des codes compliqués ca évite beaucoup de redeveloppement, mais bon juste pour un intranet car pas compatible (il existe un working groupe sur le W3C je crois

  5. Adysone

    Bonjour :)
    Au lieu de faire un .htc, n’est-il pas possible d’écrire un Javascript qui se lance au chargement de la page, et qui ajouterait des comportements sur les éléments exemple ?

    Genre : classExemple.onmouseover = montrerP; // En bouclant, évidemment…

    ?

    • Shemu

      Oui, mais le but du HTC est justement de ne passer que par le CSS.

  6. Adysone

    N’avoir que du CSS, c’est bien, mais est-ce que les HTC fonctionnent si on désactive Javascript ?

Les commentaires sont clos.