Tutorial Fusion

Dans ce tutorial je vais vous expliquer comment pouvoir inserer une typographie exotique dans une page HTML classique. En effet, vous le savez peut-ètre déjà, mais lorsque vous construisez un site classique, vous n’avez le droit que d’utiliser que 5 grandes familles de police.

Pourquoi ? Et bien tout simplement pour vous assurez que votre page aura le mème rendu chez tout le monde. Si vous utilisiez la police WaltDisney par exemple, seul les utilisateurs disposant de cette police sur leur ordinateur la verrait.

La spécification CSS 2.1 met à notre disposition de puissantes possibilités de gestion des surfaces grâce à la propriété display dont certaines des facettes — pourtant séduisantes — continuent à être ignorées. L'implémentation tardive, voire totalement absente, de ces fonctions dans les UA actuels joue naturellement un rôle prédominant dans la méconnaissance de cette propriété. Faisons un instant abstraction des limitations techniques actuelles pour explorer quelques-unes des possibilités intéressantes du display.

Voici une nouvelle méthode pour rendre les PNG transparents sous Internet Explorer 6 mais cette fois-ci uniquement dans une feuille CSS.

La méthode consiste à utiliser la propriété CSS de Microsoft Expression. Celle-ci n'est bien sûr pas standard mais elle permet à Internet Explorer d'executer du pseudo-Javascript.

L'intercompatibilité des navigateurs ou la croisade permanente de l'intégrateur. Pour rappel, voici des petits trucs pour faciliter l'intégration d'une page web, mais attention les hacks CSS c'est comme l'alcool : À consommer avec modération !

J'insiste mais n'utilisez pas les hacks CSS constamment. La plupart des bugs d’affichages se résolvent souvent en utilisant les propriétés classiques.

Une méthode compatible sur la plupart des navigateurs pour réaliser des boutons simples, des boutons de validation ou des boutons de réinitialisation de formulaire customisés. Tout cela, uniquement en CSS bien sûr.

Vous avez envie d'afficher des détails supplémentaires lorsque votre visiteur survole un lien de votre menu. La plupart du temps, c'est Flash ou Javascript et sa gestion de calques affichés/masqués qui vous permettent de réaliser vos voeux.

Pourtant, il existe une manière plus compatible de réaliser cette technique sans langage de programmation, ni Flash.

Nous allons voir comment créer un menu déroulant comportant plusieurs menus, contenant chacun des sous-menus. Cette version de ce tutoriel a été remise à jour en août 2004 pour y apporter des simplifications et des fonctionnalités supplémentaires notamment au niveau de l'Accessibilité.

Ce tutoriel est estampillé délicat; Il ne doit pas être considéré comme une référence en la matière car il comporte certains problèmes intrinsèques.

Dans ce tutoriel, nous allons apprendre à réaliser des menus simples (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style.

Comme toujours, le choix des balises HTML doit être guidé par la nature du contenu qu'on souhaite y placer. Dans le cas d'un menu, la question est un peu délicate, dans la mesure où il n'existe pas de balise spécifique pour désigner un ensemble de liens.

Créer des effets de texte en CSS, comme des ombres portées, est très simple à mettre en oeuvre.

Important : les techniques actuelles relèvent toutes du "bidouillage" car elles poseront des problèmes si le navigateur des visiteurs est ancien ou n'a pas activé les styles CSS, ou simplement si vos visiteurs utilisent un navigateur textuel ou braille. En effet, dans ce cas, la structure HTML sera affichée brute et tous les textes ombrés apparaîtront en double, l'un à côté de l'autre.

Toutes ces entités de caractère sont reconnues par Mozilla 1.0 et pour Internet Explorer 7, toutes sauf celles de la section "caractères moins bien reconnus". Par défaut, les entités sont considérées prises en charge par Netscape 4 ; une note dans le champ compatibilité mentionne les entités reconnues dès les versions antérieures, ou pas reconnues par cette version.