| FI 3 /2002 |
|---|
|
Du Speedberg dans votre PHP... |
| LIENS UTILES |
|---|
• calendrier IT • calendrier des cours dispensés au SIC • rubrique emplois regroupe différentes offres concernant l'informatique, internes ou externes à l'EPFL. |
Le maillon faible ou les feuilles de styles appliquées
laurent.Klling[AT]epfl.ch,STI - IA 
Je ne désire pas faire l'apologie de certains jeux télévisés, mais mettre en évidence la difficulté de la mise en oeuvre des feuilles de styles (CSS2) et souhaite trouver une solution, permettant à chaque usager de disposer de l'information, en optant pour le style graphique qu'il lui convient.
Le jeu du Maillon faible consiste (après un questionnement en plusieurs rondes) à éliminer le candidat que les autres participants ont jugé trop faible et il est troublant de constater que l'imagination des concepteurs de spectacles audio-visuels franchit des degrés de méchanceté et de non-respect de la synergie entre êtres humains, au profit d'une course pseudo-darwiniste, où les plus forts devraient émerger du lot.
Si l'on observe les deux interprétations du même scénario, soit TF1 le dimanche vers 17h55 et la BBC à 18h45 la semaine, on réalise qu'elles accommodent la même mixture (organisation scénique et jeux de lumière) où les mêmes présentatrices, à l'apparence de maîtresses d'école sont revêches et impitoyables. En résumé, produire des perdants me semble une voie obsolète. Pourquoi ne pas s'ingénier à être tous gagnants... différemment?
Préambule
L'utilisation par le projet e-pfl de la technologie des feuilles de styles (Cascading Styles Sheet 2) nous confronte de nouveau à sa mise en place: un article a déjà paru dans ce journal ( FI10-97 par Jacqueline Dousson), mais son propos était plutôt technique et concernait la version 1 à une époque où son implémentation sur nos butineurs favoris était encore parcimonieuse.
L'utilisation de cette technique nous expose à nouveau au dilemme suivant:
• respecter une charte graphique en faisant accepter à l'usager sa rigueur => favoriser le look;
• rester fidèle à l'esprit de l'hypertexte et accepter la modification de l'apparence => favoriser le feel.
Historique
L'évolution de la technologie HTML, dans le temps, suit deux chemins:
• Une intégration de plus en plus importante d'aspects visuels et de leurs contrôles:
• dans cette logique, la norme HTML 1.x avait comme objectif de pouvoir intégrer des sources d'information comme des bibliographies et de les représenter sous un aspect relativement uniforme;
• la version suivante, HTML 2.x, offrit avec la mise en place des tableaux, un outil parfait pour représenter des données tabulées;
• sa combinaison avec les nouveautés incluses dans la version HTML 3.2 offrit une capacité quasiment complète pour définir l'aspect visuel;
• la version actuelle, HTML 4.x, doit offrir la complète plénitude en supprimant un contrôle local des polices par le tag <font> et leurs remplacements par les feuilles de styles.
• Une intégration plus importante avec les sources de données:
• la mise en oeuvre de XML fournit le chaînon manquant entre les structures de données et leurs contenus.
L'arrivée de XHTML devrait pouvoir réunir ces deux voies. Le concept de feuille de styles est simple et élégant:
• séparer la forme du contenu, favorisant une mise à disposition adaptée au médium (navigateur Web, impressions, wap, audio);
• autoriser une réutilisation de styles favorisant une homogénéisation de l'apparence et la mise en place de directives communes;
• mettre en place une hiérarchie de feuilles de styles, du plus général au plus particulier (en théorie).
Mise en oeuvre
Après cette brève présentation théorique, passons à la réalisation (ce qui est une justification du titre). En effet, toutes réalisations dans le domaine du Web doivent intégrer les navigateurs disponibles chez l'usager et leurs systèmes d'exploitation. On peut regrouper ces spécifications dans une matrice 3x3:
table 1
Résolution
La définition de ce paramètre n'est pas banale. On peut s'étonner de la faible résolution du Macintosh, mais par un heureux hasard, celle-ci est équivalente au Point Pica utilisé en imprimerie, soit 72 points par pouces. Pour s'adapter au matériel (la diagonale du moniteur), ce choix entraîne la mise en place de résolutions apparemment exotiques (832 x 624 par exemple). Cette méthode permit l'apparition du WYSIWYG et l'emploi majoritaire de cette plate-forme dans les arts graphiques. Dans le monde du PC, c'est la prédominance du matériel qui a défini la base de travail entraînant une définition plus élevée, soit 96 dpi.
Gamma
La dynamique de perception de l'oeil est particulièrement élevée (et son appréciation de la luminosité n'est pas linéaire). Un convertisseur numérique analogique pour la vidéo travaille sur 8 bits. Pour compenser cette différence d'échelle et pour simuler la dynamique de l'oeil, on introduit une correction sur la luminosité. Le choix d'un gamma différent entre les plates-formes PC et Macintosh entraîne une apparence claire ou foncée du contenu selon la source de création. Ce phénomène n'est pas sans conséquence, il entraîne la quasi-impossibilité de réaliser du commerce électronique pour le prêt à porter par faute d'absence de concordances entre les couleurs de l'écran et celle de la marchandise (sans évoquer la différence de spectre entre un éclairage naturel et artificiel).
Nous entrons dans un domaine glissant, et ne désirant pas entrer dans un débat de chapelle, je désire évoquer leurs relations avec les feuilles de styles. Il existe un fossé entre la définition d'un RFC et son implémentation, sans refaire l'historique de la guerre commerciale et technologique dans le domaine des butineurs, Netscape vs Internet Explorer. On peut les regrouper en 5 familles:
1. Antérieur
Dans cette catégorie entre l'ensemble des outils qui ont fait que la majorité des internautes identifie un butineur à Internet (confondant un outil avec un protocole).
2. Netscape 4.x
Voici donc le candidat pour l'élimination, en fait la grande bataille des navigateurs a laissé sur le carreau ce logiciel. Plus sérieusement, il a un défaut important, il casse l'héritage des styles dans les tableaux. Il existe un palliatif qu'il suffit d'appliquer pour le réintégrer dans le jeu.
3. Internet Explorer 5.x
C'est apparemment le vainqueur actuel, avec une occupation quasi hégémonique sur le terrain des systèmes d'exploitation et son implémentation correcte des principes des feuilles de styles. Le principal bémol à cet enthousiasme est son ouverture aux trous de sécurité.
4. Netscape 6.x
Par son implémentation complète de la norme 4.x, il a mis au supplice tous les rédacteurs de pages Web dont les horizons se limitaient à corriger les défauts de la version précédente. En offrant un outil propre à contenter ceux qui écrivent leur programme selon la documentation, il devient un challenger sérieux pour les futurs combats.
5. Autre
Dans cette catégorie, on peut ranger les autres qui pourront peut-être définir de nouveaux standards.
La pratique
Un style peut s'appliquer sur de nombreux éléments dans une page html, dans l'ordre hiérarchique:
• à un tag de mise en page;
• à une classe;
• à un identificateur unique dans la page.
Pour éviter la hiérarchie par paragraphe, on peut utiliser le tag <spam> à l'intérieur et le tag <div> à l'extérieur pour appliquer un style spécifique. On peut également définir des styles par type de Médium: écran, impression, wap. Cette utilisation n'est pas encore répandue, mais reste prometteuse.
Normalement*, un style hérite des styles antérieurs (d'où l'acronyme CSS, Cascading Styles Sheet).
La base de mon travail était la feuille de style disponible avec la version 1.0 de speedperg (voir code 1).
a { color: #000; font-weight: bold; font-size: 10px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.text:link, .text:visited, .text:hover, .text:active { color: #000; font-weight: bold; text-decoration: underline }
.text { color: #000; font-size: 10px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular }
.textbold { color: #000; font-weight: bold; font-size: 10px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular }
.boxtext { color: #000; font-size: 10px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; padding: 4px }
.boxtextbold { color: #000; font-weight: bold; font-size: 10px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular }
.path { color: #666; font-size: 10px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular }
.title { color: #999; font-size: 12px; font-weight: bold; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular }
.texttitle { color:#000; font-weight: bold; font-size: 12px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular }
.boxtitle { color: #fff; font-size: 11px; font-weight: bold; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular }Navigateur
Code 1
Pour compléter notre information, il peut être utile de se référer à la RFC qui contient une description d'une feuille de style théorique définissant l'aspect en HTML 4.x, http://www.w3.org/TR/1998/REC-CSS2-19980512/sample.html .
Il reste le choix de l'unité de mesure de la hauteur du texte, on peut la mesurer selon de nombreux critères. Les tailles suivantes sont en valeur absolue: cm, in, pt, pc (centimètres, inches, points, picas). Cela implique que la taille ne pourra pas être modifiée par l'usager. Celles-ci ont par contre des tailles relatives: em, ex, % (la taille de la police, la taille de la lettre x, le pourcentage). Le pourcentage se comporte de manière variée (c'est un euphémisme) selon les implémentations.
• Contrairement à la spécification, la taille en px (pixel) est comprise comme une taille fixe dans les navigateurs courants, et c'est l'unité de mesure choisie par e-pfl...
Figure 1 - le style e-epfl [1.0] sur la page de garde du site de la Faculté STI
Il ne faut pas oublier de tenir compte de la résolution effective du médium utilisé.
• Netscape 4.x prend en compte la résolution propre de l'écran, pour un Macintosh (72dpi) ou pour un PC (96dpi) ce qui entraîne une taille apparemment plus petite sur PC. Pour corriger cet effet, on doit multiplier par 4/3 la taille prévue pour un Macintosh pour obtenir la taille pour un PC. Cet effet entraîne la nécessité de disposer de 2 feuilles de styles;
• Netscape 6.x ou Internet Explorer 5.x font preuve d'un humour certain en offrant la possibilité de choisir la résolution à l'écran, mais en imposant une résolution de 96dpi.
Pour e-pfl, l'unité retenue a été le pixel (px).
• cela offre comme principal avantage que sur l'ensemble des navigateurs la taille apparente est identique;
• l'inconvénient est de ne pas tenir compte des préférences propres à l'usager entraînant une lisibilité discutable dans un environnement défavorable: écran à résolution élevée, faible acuité visuelle ou ergonomie défectueuse;
• de plus, cela contredit un principe de base du Web où le contenu doit suivre le contenant et ses préférences.
Pour pallier à ces défauts, après quelques essais avec les autres unités, j'ai choisi l'em.
• cette unité offre la capacité de tenir compte des préférences des navigateurs concernant la taille des caractères.
new.css
/* version 0.5 utilisant la taille relative pour s'adapter aux prefs des browsers */
/* départ from scratch - lk - 21 janv 2002 */
/* first, un style global pour le code html */
body {
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif;
font-size: 0.9em
}
/* second, un style pour les liens */
a {
color: #000;
font-weight: bold;
text-decoration: none
}
/* third, un style pour les tableaux */
td {
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif;
}
/* ensuite, les anciens styles */
.text { color: #000 }
.textbold { color: #000; font-weight: bold }
.boxtext { color: #000; padding: 4px }
.boxtextbold { color: #000; font-weight: bold }
.path { color: #666 }
.title { color: #999; font-weight: bold; font-size: 1.1em}
.texttitle { color: #000; font-weight: bold; font-size: 1.1em }
.boxtitle { color: #fff; font-weight: bold; font-size: 1em }
/* et le style pour le titre en texte */
.texttitlewhtbig { color: white; font-weight: bold; font-size: 1.5em }
.texttitlewht { color: white; font-weight: bold; font-size: 1.1em }
.textgray { color: #999; font-weight: bold; font-size: 1.1em }
code 2
Me trouvant devant le choix cornélien de choisir entre ces deux propositions, j'ai pris la voie suisse, ce qui ramène le choix à l'utilisateur (démocratie directe oblige). Dans une vision théorique, le style suivant (voir code 2) devrait nous satisfaire. Du fait du bogue de Netscape 4.x qui casse l'héritage dans les tableaux, le style en taille fixe doit ressembler au code 3. La version définitive est composée de quatre éléments
epfl-sti.css
/* version 0.6 avec bandeau texte et taille fixe*/
/* du 24 janvier 2002 */
/* base e-pfl */
a {
color: #000;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif;
text-decoration: none
}
/* second, un style pour les liens */
a:active, a:link {
color: #66C;
font-weight: bold;
text-decoration: none
}
a:visited, a:hover {
color: #99C;
font-weight: bold;
text-decoration: none
}
.text {
color: #000;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
...
/* pour les titre du bandeau en texte */
/* par laurent.kling[AT]epfl.ch */
.texttitlewhtbig {
color: white;
font-weight: bold;
font-size: 18px;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
.texttitlewht {
color: white;
font-weight: bold;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
.texttitlewht:active, .texttitlewht:link, .texttitlewht:visited, .texttitlewht:hover {
color: #e6e6e6;
font-weight: bold;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif;
text-decoration: underline
}
.textgray {
color: #999;
font-weight: bold;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
code 3
• deux scripts pour positionner dans les 2 états possibles;
• un script pour choisir le style adapté;
• une série de feuilles de styles adaptées aux différentes situations.
Dans le détail
Positionner les 2 états possibles
Pour faciliter la lecture du code html, j'ai choisi la solution de deux scripts PHP (on peut sans problème envisager un script avec un passage de paramètres):
setvar.php
<?
###
# setvar.php
#
# A script that set the cookie and reload the page
#
# Author : Laurent Kling (laurent.kling@epfl.ch)
# Version: 0.1
# Date : 25 février 2002
#
###
setcookie ("epfl_sti_style", "var",
time()+(3600*24*365), "/", "sti.epfl.ch", 0);
header("Location:" . $HTTP_SERVER_VARS
[HTTP_REFERER]);
?>
code 4
• note il est nécessaire de spécifier complètement le cheminement (path) du serveur, car le script réside sur un serveur spécifique (dans mon cas sti.epfl.ch) alors que le serveur qui contient la page pour activer ce script peut être ailleurs.
Le code suivant est à introduire à l'endroit que vous désirez pour obtenir la possibilité d'avoir des polices de taille variable:
Polices <a href="http://sti.epfl.ch/styles/
setvar.php" title="Change to var"
class="stylevar">variable</a>
ou <a href="http://sti.epfl.ch/styles/
setepfl.php" title="Change to fix"
class="stylefixe">fixe</a>
code 5
Pour ma part, je l'ai introduit dans une boîte rouge dans la page de garde des sites que je gère, par exemple http://sti.epfl.ch/index.html .
Choisir le style adapté
C'est le script dynastyle.php utilisé par chaque usager de l'apparence e-pfl modifié pour tenir compte de ces deux états:
/* Modification pour sti - lk - 25 janvier 2002 */
$stylefile = "epfl-sti.css" ;
$style_unix = "epfl-sti-unix.css" ;
$style_nts = "epfl-sti-nts.css" ;
$style_var = "epfl-sti-var.css" ;
...
$styledyn = $HTTP_COOKIE_VARS["epfl_sti_
style"];
if ( $styledyn == "var" )
{
$stylefile = $style_var;
}
code 6
Il est nécessaire de définir de nouvelles feuilles de styles pour l'ensemble des variantes (normal, NT et Unix), car je l'ai complété par mes propres créations.
Il faut également modifier la référence de dynastyle.php dans la page HTML:
<! pour test local >
<link rel="stylesheet" href="styles/epfl-sti-var.css" media="screen">
<! version epfl-sti >
<link rel="stylesheet" href="http://sti.epfl.ch/styles/dynastyle.php" media="screen">
code 7
La référence au style local (styles/epfl-sti-var.css) permet avec un éditeur comme GoLive de disposer d'un mode d'édition interactive particulièrement utile. La présence du lien sur dynastyle.php permet en production d'utiliser la version complète.
Les feuille de styles
En l'occurrence, la feuille de style pour des tailles variables de polices (voir code 8). On remarque que je préfère documenter directement le code source, ce qui facilite la gestion des différentes versions (qui existent à 4 exemplaires par styles).
epfl-sti-var.css
/* version 0.72 avec bandeau texte et taille variable*/
/* départ from scratch - lk - 21 janv 2002, 25 fevrier 2002 */
/* base e-pfl */
/* second, un style pour les liens */
a:active, a:link {
color: #003366;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif;
font-weight: bold;
text-decoration: none
}
a:visited {
color: #336699;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif;
font-weight: bold;
text-decoration: none
}
a:hover {
color: #336699;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif;
font-weight: bold;
text-decoration: underline
}
/* en premier, un style global pour le code html */
/* car Netscape Navigator 4 ne permet pas d'héritage dans les tableaux, et casses l'héritage après les tableaux, */
/* il est nécessaire de répéter les informations plutôt que définir le look dans le body */
/* définir la classe text avec les classes pour les paragraphes, les tableaux et les listes */
/* taille: 10px = 0.95em standard, 12px = 1em titre de rubrique, 13px = 1.1em sous-titre, 18px = 1.5em pour les titres */
body, p, td, li, .text {
color: #000000;
font-size: 0.95em;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
h3, .textbold {
color: #000000;
font-size: 0.95em;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
.boxtext {
color: #000000;
font-size: 0.95em;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif; padding: 4px
}
.boxtextbold {
color: #000000;
font-size: 0.95em;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
h2, .title, .textgray {
color: #999999;
font-size: 1em;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
.texttitle {
color:#000000;
font-size: 1em;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regula, sans-serifr
}
.boxtitle, .boxtitle:active, .boxtitle:link, .boxtitle:visited, .boxtitle:hover {
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
h1, .texttitlebig {
color: #000000;
font-size: 1.5em;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
/* pour les titre du bandeau en texte */
/* par laurent.kling[AT]epfl.ch */
/* taille pc, idem que pour fixe, car look conservé: 11px standard, 14px sous-titre, 18px pour les titres */
.path, .path:active, .path:link, .path:visited, .path:hover {
color: #666666;
font-size: 11px;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
.texttitlewht, .texttitlewht:active, .texttitlewht:link, .texttitlewht:visited, .texttitlewht:hover {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
.texttitlewhtbig {
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
/* pour les titre des lien de l'organigramme */
.textblack, .textblack:active, .textblack:link, .textblack:visited, .textblack:hover {
color: #000000;
font-size: 0.95em;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
/* pour les boutons de styles */
.stylefixe, .stylefixe:active, .stylefixe:link, .stylefixe:visited, .stylefixe:hover {
color: #003366;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
.stylevar, .stylevar:active, .stylevar:link, .stylevar:visited, .stylevar:hover {
color: #008000;
font-weight: bold;
font-size: 0.95em;
font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif
}
code 8
Quelques autres modifications que j'ai apportées au style e-pfl
Utiliser la taille du texte en em
C'est la principale modification qui permet de modifier l'apparence du contenu en fonctions des préférences du butineur; pour les personnes intéressées par ce choix, c'est également celui de l'exemple du RFC (voir plus haut) et je me permets de signaler un article qui explicite cette problématique: Text Size Control with CSS by Steve Mulder, http://hotwired.lycos.com/webmonkey/98/35/index2a.html .
Contrairement à ce que j'ai dit plus haut, il ne m'a pas paru judicieux de faire 2 feuilles de style (Macintosh et PC) pour tenir compte de la résolution d'écran différente entre ces 2 plates-formes du fait que les browsers récents (IE 5 et NS 6) tablent sur 96 dpi.
Favoriser la migration du contenu des anciens sites.
J'ai rajouté certains tag typiques comme body, p, td, li, h3, h2, h1 pour pouvoir sans gros travail incorporer le style e-pfl dans les différents sites que je gère.
De plus, cela permet d'éviter de rajouter à la main dans les tableaux <td> et les listes <li> le style text.
Ajouter une rétroaction visuelle sur les liens
Comme clin d'oeil à la sempiternelle règle des liens soulignés, je souligne le lien quand le curseur est dessus (a:hover).
Éliminer les bandeaux d'images par du texte
En accord avec mon précédent article Small is beautifull (FI 2-2000), bien que je comprenne la volonté de définir une apparence et de vouloir la conserver (en tant qu'architecte, je comprends le droit de suite), je pense qu'il n'est pas judicieux de créer des bandeaux de texte en images du point de vue de la vitesse de téléchargement du contenu chez l'usager. Par exemple, dans le bandeau selon la recommandation e-pfl
la taille du texte est de 5569 octets et celle des images générées pour le texte par l'outil de génération de pages dynamiques en PHP, SpeedBerg, http://www.myepfl.ch/speedberg/ de 35477octets; alors que dans son interprétation avec la feuille de style variable
la taille du texte est de 5966 octets et celle des images de 2341 octets, entraînant la comparaison représentée dans le tableau 1. Lire aussi Du Speedberg dans votre PHP... en première page.
Comme le bandeau de tête fait partie de l'identité de notre école, je conserve la taille en pixel du texte de ces éléments. À part la concession à l'aspect, c'est également la lisibilité du texte qui n'est pas en cause.
Figure 2 -La page du site Web de la Faculté STI avec le style variable (taille du texte du browser sur 14 points)
Éviter que certaines apparences soient modifiées par les liens
• Pour permettre une lecture adaptée des titres, ceci est une des autres concessions que je fais à l'aspect... Il suffit de rajouter au nom du style, les états de lien que l'on désire uniformiser (:active, :link, :visited, :hover).
• Pour que cela fonctionne, on doit incorporer le style dans le tag de lien <href...style="...">.
Ajouter la famille (sans-serif) dans la description des polices pour être conforme aux recommandations
Les 3 dernières modifications sont déjà intégrées dans la version 3.2 de la feuille de style e-pfl.
Tableau 1
En conclusion
Dans un futur proche, la mise en oeuvre de XHTML (http://www.w3.org/TR/xhtml1/ ) devrait réconcilier les partisans de pages dynamiques avec les amateurs de travail manuel. Pour éviter des problèmes de compatibilité future, nous pourrions déjà coder en utilisant les minuscules pour les tags et introduire un tag de fermeture pour ceux qui n'en possèdent pas. L'exemple le plus connu est le retour de ligne <br> qui devient </br>.
En offrant à chaque usager, un choix sur la manière de représenter l'information, cet article présente peut-être une solution alternative évitant le débat entre lesanciens et les modernes.