SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape
Missions des feuilles de style JavaScript (JSSS)Ne vous étonnez pas, si dans les exemples d'affichage relatifs à cette page, rien n'est encore "dynamique". Ici, c'est en fin de compte une variante spécifique à Netscape pour la définition de feuilles de style qui est présentée. Il s'agit de définir des feuilles de style à l'aide de JavaScript.
JSSS signifie "JavaScript Style Sheets".
L'idée qui s'y cache paraît logique. Si avec JavaScript on doit pouvoir
accéder de façon dynamique aux formatages, il est judicieux de définir tout
de suite les formatages comme étant des propriétés d'un objet JavaScript.
C'est pourquoi les feuilles de style basées sur JavaScript sont volontiers
traitées en relation avec le HTML dynamique selon Netscape. Même dans cette
documentation, il en est ainsi. N'attendez pas ici d'explications avancées:
l'apport des JSSS de Netscape tourne un peu dans le vide. Pour le 
positionnement
dynamique avec Netscape, tel qu'il est possible avec le navigateur dans
sa version 4.x, JSSS ne joue aucun rôle particulier.
Dans la syntaxe JSSS, il y a par exemple des instructions comme tags.H1.color = "blue".
Vous devez lire une telle notation de la façon suivante: il y a un objet
JavaScript tags. Subordonnés à cet objet se trouvent tous les
repères HTML disponibles. H1 est par exemple l'un d'entre eux. C'est
pourquoi, il peut être noté derrière tags, séparé par un
point. Une mention telle que tags.H1.color est donc à lire exactement
comme par exemple window.document.images.src. Tous deux sont de la
syntaxe JavaScript pour adresser des propriétés d'objet. Vous trouverez
plus de détails sur ce sujet dans la partie sur les Objets propriétés et méthodes
de la section JavaScript.
 
|
Vous pouvez incorporer des feuilles de style JSSS de deux façons en HTML: Soit dans le fichier HTML proprement-dit dans l'entête, ou comme fichier externe, contenant les définitions de feuilles de style.
<head> <style type="text/javascript"> ... Ici suivent les définitions de feuilles de style ... </style> </head> |
Avec <style type="text/javascript"> vous
définissez dans un fichier HTML un passage dans lequel vous pouvez faire des
mentions de feuilles de style (style = style, format). Il s'agit de la
même commande que pour incorporer des feuilles de style CSS en HTML.
La seule différence réside dans la mention du type: "text/javascript".
Ainsi, ce passage ne sera lu que par Netscape à partir de la
version 4.x, et pas par l'Explorer Internet MS.
<head> <link rel=stylesheet type="text/javascript" href="formats.htm"> </head> |
Vous pouvez référencer un fichier contenant les mentions de feuilles de
style dans l'entête d'un fichier HTML avec une commande HTML du type <link...> (link =
lien). Il s'agit de la même commande que pour définir des feuilles de style CSS dans un fichier séparé.
La seule différence réside dans la mention du type: "text/javascript".
Le fichier dans lequel les formats sont définis est incorporé
dans l'exemple comme fichier HTML. Pour cela, notez la mention href=,
suivie du nom de fichier placé entre guillemets. Des chemins de
fichiers relatifs ou des adresses URL absolues sont également autorisés. Le
fichier ne doit contenir que des définitions de feuilles de style valables
d'après la syntaxe JSSS.
|
|
Formater des repères HTML avec des feuilles de style JSSS Vous pouvez formater des repères HTML à l'aide de mentions de feuilles de
style JSSS. Le processus est le même que pour définir des formats pour les repères HTML
d'après la syntaxe CSS.
<style type="text/javascript">
tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with(tags.H3)
color = "green";
with(tags.H2)
{
color = "red";
fontSize = "16pt";
marginTop = "2cm";
}
</style>
|
Pour formater des repères HTML à l'aide de la syntaxe JSSS, vous disposez de deux possibilités de notation:
Pour la première possibilité de notation, notez d'abord le mot-clé tags (écrit en minuscules!). Il est suivi, séparé par un point, du repère HTML qui n'est cependant pas placé dans les crochets pointus habituels (<>). Pour le nom du repère HTML, l'écriture minuscules/majuscules n'a aucune importance, vous pouvez donc par exemple aussi bien noter h1 que H1. Dans l'exemple ci-dessus, les repères <h1> et <p> reçoivent chacun par ce moyen une mention de feuilles de style.
Pour la deuxième possibilité de notation, notez d'abord le mot-clé with (avec), suivi entre parenthèses, à nouveau du mot clé tags suivi lui-même, séparé par un point à nouveau, du repère HTML. Si vous ne voulez affecter qu'une mention de feuille de style au repère HTML, vous pouvez le faire simplement derrière ou sous la parenthèse comme dans l'exemple ci dessus pour with(tags.H3). Cette forme de notation est cependant conçue pour le cas où vous voulez noter pour un repère HTML, plusieurs mentions de feuilles de style. Dans ce cas notez les mentions dans des parenthèses accolades comme dans l'exemple pour with(tags.H2). Dans les parenthèses accolades, vous n' avez ensuite besoin que de noter les mentions de feuilles de style proprement-dites (donc sans qu'elles soient précédées de tags.H2.).
Pour affecter une valeur à une mention de feuilles de style, notez, derrière le terme de la mention de feuilles de style, un signe égal suivi de l'affectation de valeur. L'affectation de valeur doit figurer entre guillemets. La syntaxe pour l'affectation de valeurs est différente de celle des feuilles de style CSS.
Pour le formatage, vous disposez de toutes les mentions de feuilles de style qui en CSS
sont également interprétées par Netscape. Dans le
chapitre 
mentions
de feuilles de style, les différentes mentions de feuilles de style sont
décrites.
Vous devez observer une convention importante : De nombreuses mentions de feuilles de style contiennent normalement des traits d'union comme par exemple font-size (taille de police) ou background-color (couleur d'arrière plan). Quand vous notez ce genre de mentions de feuilles de style en syntaxe JSSS, le trait d'union doit être omis et le première lettre du mot situé derrière doit être en majuscules. Au lieu de font-size, vous devez donc écrire fontSize, et au lieu de background-color, vous devez noter backgroundColor.
Toutes les valeurs que vous assignez à des mentions de feuilles de style JSSS, doivent figurer entre guillemets, étant donné qu'elles représentent pour JavaScript des chaînes de caractères.
|
|
Définir des classes avec les feuilles de style JSSS Vous pouvez créer des sous-classes de formats. Il est ainsi possible
d'affecter à un élément HTML, un titre n°2 par exemple, différents formats.
Pour cela, affectez des noms aux sous-classes correspondantes. La façon de
procéder est la même que pour définir
des sous-classes de formats d'après la syntaxe CSS.
<html>
<head>
<title>Titre du fichier</title>
<style type="text/javascript">
classes.important.H1.color = "blue";
classes.teletexte.all.fontFamily = "Courier";
with(classes.infosplus.H2)
marginLeft = "1cm";
with(classes.sujet.H2)
{
color = "red";
fontSize = "16pt";
marginTop = "2cm";
}
</style>
</head>
<body>
<h1 class="important">Titres N°1 en bleu</h1>
<p class="teletexte">paragraphe de texte avec police courrier</p>
<div class="teletexte">passage avec police courrier</div>
<h2 class="sujet">rouge, 16 points et 2cm d'espace vertical</h2>
<h2 class="infosplus">normal, mais avec un espace de 1cm à gauche</h2>
</body>
</html>
|
Pour définir des classes de format pour des repères HTML à l'aide de la syntaxe JSSS, vous disposez à nouveau des deux possibilités de notation:
Pour la première possibilité de notation, notez d'abord le mot-clé classes (en minuscules!) suivi lui-même, séparé par un point, du nom pour la classe (que vous pouvez attribuer vous même). Le nom ne doit comporter que des lettres, des chiffres et des tirets de soulignement. Les minuscules et les majuscules sont différenciées. Si vous ne voulez affecter qu'une mention de feuille de style au repère HTML, vous pouvez le faire. Dans l'exemple ci-dessus, une classe nommée important a été ainsi créée.
Derrière le nom de classe suit le nom du repère HTML duquel doit s'inspirer cette sous-classe. Dans l'exemple est définie une sous-classe pour H2.
Derrière le nom du repère HTML notez la mention de feuille de style
désirée pour le formatage. Ici sont à respecter les conventions
spéciales.
Pour la deuxième possibilité de notation, notez d'abord le mot-clé with (avec), suivi entre parenthèses, à nouveau du mot clé classes suivi lui-même, séparé par un point du nom que vous avez attribué vous même, et enfin le repère HTML pour lequel la sous-classe doit être définie. Dans l'exemple ci-dessus a été ainsi introduit avec with(classes.sujet.H2)une série de formatages pour la classe sujet, cette classe étant une sous-classe du repère HTML <H2>. Dans les parenthèses accolades figurent ensuite les mentions de feuilles de style proprement-dites.
Exactement comme pour les feuilles de style CSS vous pouvez aussi définir pour les feuilles de style JSSS des classes de format "abstraites", qui ne sont pas affectées à un repère HTML précis. Pour cela, notez lors de la définition à la place du repère HTML, simplement le mot-clé all. Dans l'exemple ci-dessus a été définie de cette façon une classe nommée teletexte.
Dans les repères HTML, appliquez de telles classes de formats en notant l'attribut class= dans le repère HTML d'ouverture, suivi du nom de la classe. Les classes que vous n'avez définies que pour certains repères HTML, ne peuvent être employées que dans de tels repères (dans l'exemple,la classe sujet ne peut être employée que pour les titres <h2>). Les classes qui ont été définies avec all peuvent, elles, être employées sur tous les repères HTML.
|
|
Définir des formats indépendants avec des feuilles de style JSSS Vous pouvez définir des formats individuels indépendants que vous
pouvez ensuite utiliser selon les besoins en HTML avec les feuilles de style
JSSS. La façon de procéder est la même que pour définir
des formats indépendants d'après la syntaxe CSS.
<html>
<head>
<title>Titre du fichier</title>
<style type="text/javascript">
ids.rouge.color = "red";
with(ids.rougegras)
{
color = "red";
fontWeight = "bold";
}
</style>
</head>
<body>
<p id="rouge">paragraphe de texte en rouge</p>
<p>paragraphe de texte avec <b id="rougegras">du texte rouge en caractères gras</b>.</p>
</body>
</html>
|
Pour définir des formats indépendants avec la syntaxe JSSS, vous avez à nouveau deux possibilités de notation à votre disposition:
Pour la première possibilité de notation, notez d'abord le mot-clé ids (en minuscules!), suivi, séparé par un point, d'un nom que vous pouvez attribuer vous-même. Le nom ne doit comporter que des lettres, des chiffres et des tirets de soulignement. Les minuscules et les majuscules sont différenciées. Dans l'exemple ci-dessus, une classe nommée rouge a été ainsi définie.
Derrière le nom, notez la mention de feuilles de style désirée.
Pour ceci sont à respecter les
conventions
spéciales.
Pour la deuxième possibilité de notation, notez d'abord le mot-clé with (avec), suivi entre parenthèses à nouveau du mot-clé ids, suivi du nom de format que vous attribuez vous-même. Dans l'exemple ci-dessus a été défini un format indépendant avec with(ids.rougegras). Dans les parenthèses accolades figurent ensuite les mentions de feuilles de style proprement-dites.
Appliquez des formats indépendants dans des repères HTML en notant dans le repère d'ouverture HTML l'attribut id= suivi du nom du format.
|
|
Définir des formats pour des repères HTML imbriqués avec des feuilles de style JSSSAvec les feuilles de style JSSS, vous pouvez définir des formats pour repères HTML
qui ne sont valables que si le repère HTML se trouve dans un autre repère HTML
déterminé. La façon de procéder est la même que pour définir
des formats pour repères HTML imbriqués d'après la syntaxe CSS.
<html> <head> <title>Titre du fichier</title> <style type="text/javascript"> contextual(tags.P, tags.I).color = "red"; </style> </head> <body> <div>passage de texte normal avec <i>du texte normal en italique</i>.</div> <p>passage de texte normal avec <i>du texte normal en italique en rouge</i>.</p> </body> </html> |
Pour définir, à l'aide de la syntaxe JSSS, un format pour un repère HTML
qui ne doit recevoir un formatage déterminé que s'il est placé dans un
repère HTML déterminé, vous devez d'abord noter le mot-clé contextual
suivi d'une expression entre parenthèses. Notez d'abord selon la syntaxe
JSSS le repère HTML "parent, externe" (dans l'exemple ci-dessus tags.P),
suivi, séparé par une virgule, du repère HTML "enfant, intérieur"
(dans l'exemple tags.I). Derrière la parenthèse de fermeture suit à nouveau
un point, suivi lui-même de la mention de feuille de style désirée. Ici sont à respecter les conventions
spéciales.
Les formats définis sont appliqués en HTML. Dans l'exemple ci-dessus, le texte qui a été défini comme texte en italique avec <i>...</i> sera en rouge quand il sera situé dans un paragraphe de texte (<p>...</p>). Dans tous les autres cas, les repères <i>...</i> recevront le formatage habituel.
|
|
Définir des formats JSSS dans des repères HTMLVous pouvez également utiliser des définitions JSSS pour un formatage rapide dans la définition de repères HTML
distincts. Cela fonctionne exactement comme pour formater
des repères HTML distincts d'après la syntaxe CSS. La seule
différence est la notation des mentions de feuilles de style.
<p style="fontSize='14pt'; marginLeft='1cm'">paragraphe de texte</p> |
Vous pouvez déterminer des mentions de format pour un repère HTML en notant dans le repère d'ouverture la mention style=, suivie entre guillemets de la définition de format désirée. Dans les définitions de format, les mentions de feuilles de style sont permises. Chaque affectation à une propriété comporte un nom, par exemple color et une valeur, par exemple red, séparés par un signe égal (différent de la syntaxe CSS!). Les mentions de feuilles de style qui sont normalement écrites avec un trait d'union, sont écrites dans la syntaxe JSSS en un seul mot. Chaque partie située en CSS après le trait d'union commence en JSSS par une majuscule. Ainsi margin-left devient par exemple marginLeft, background-color devient backgroundColor, et border-bottom-width devient borderBottomWidth. Notez les affectations de valeur entre guillemets simples (apostrophe), comme dans l'exemple '14pt'. Vous ne pouvez pas utiliser de guillemets habituels, étant donné que l'expression style= complète figure déjà entre guillemets.
Cette façon de définir des mentions de feuilles de style JSSS ne fonctionne pas encore avec la version simple 4.0 de Netscape. Ce n'est que pour des mises à jour du type V4.0x que fonctionnent les mentions de feuilles de style JSSS dans des repères HTML.
Les mentions que vous définissez ainsi dans un repère HTML sont ignorées par l'Explorer Internet MS.
|
|
Combiner des feuilles de style JSSS et des feuilles de style CSS Rien n'empêche d'utiliser des feuilles de style CSS et des feuilles de style JSSS dans le même fichier HTML. Ici, deux principes simples sont à respecter:
<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
p { font-size:10pt; color:red; }
</style>
<style type="text/javascript">
with(tags.P)
{
fontSize = "12pt";
color = "blue";
}
</style>
</head>
<body>
<p>texte, dont l'apparence est différente avec Netscape et l' IE MS </p>
</body>
</html>
|
Dans l'exemple ci-dessus, le repère HTML <p>...</p> est d'abord formaté avec la syntaxe CSS, et ensuite avec la syntaxe JSSS. D'après la syntaxe CSS, le texte est d'une hauteur de 10 points et rouge, d'après la syntaxe JSSS, il est d'une hauteur de 12 points et bleu.
L'Explorer Internet MS n' accède qu'à la définition CSS, étant donné que ce navigateur ignore le passage noté avec <style type="text/javascript">. Netscape, en revanche, accède à la définition JSSS. Non pas parce que celle-ci aurait d'avance priorité sur le définition CSS, mais uniquement parce qu'elle est notée "derrière" la définition CSS. Si le passage JSSS était noté avant le passage CSS, Netscape utiliserait également les mentions CSS pour le formatage.
|
| |
après: |
Positionnement dynamique (Netscape)
|
avant: |
Filtres dynamiques (Microsoft)
|
SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape
Serge François, 13405@free.fr
