L'édition Web (HTML, XML et CSS)

Sommaires

1. Le langage de balise HTML et XML
2. L'arbre DOM, une représentation du document en mémoire
3. Le langage CSS
   1. Comment insérer une feuille de style
   2. Élément de type bloc ou en-ligne
   3. Introduction au déclaration CSS
   4. Attributs id et class
   5. Les sélecteurs simples
   6. Les sélecteurs complexes
   7. Les couleurs
      1. Format RGB
      2. Format RGBA
      3. Format HSL
      4. Format HSLA
      5. Formule de conversion de format RGB-HSL
      6. Formule de composition des couleurs
   8. Les unités de mesures
   9. Les fontes de caractères

Les normes du W3C proposent un langage d'édition web comprenant le HTML ou plus rigoureusement le XHTML qui dérive du XML, et comprenant le language de feuilles de styles CSS (cascading Steel Sheet) qui permet de spécifier comment doit s'afficher chaque élément d'un document HTML ou XML, c'est à dire de définir le style de chaque élément HTML ou XML.

Il existe également une autre norme publique intéressante qu'est l'Open Document, et qui concerne les fichiers exploités par des applications d'édition évoluées tel que Open Office.

Le langage HTML ou XML & CSS est brute, et peut être manipulé par un simple éditeur de texte en faisant du copier-coller, et il peut être visualisé par n'importe quel navigateur internet (respectant les normes, tel que Firefox ou SeaMonkey...). L'IDE Aptana Studio 2, ou comme plugins d'Eclipse, à base de java, téléchargable sur le site http://www.aptana.com/products/studio2, peut être utilisé pour éditer des fichiers CSS avec complétion de code, ce qui permet un apprentissage plus facile.

La technologie a démocratisé l'édition : chacun peut imprimer un document couleur de qualité (dessins et polices vectorielles) pour un coût minime, ou le mettre en ligne et le consulter à l'aide d'un navigateur internet. Cela rend d'autant plus intéressant l'usage d'un langage universel d'édition, sachant que celui-ci s'étend à la création d'interface applicative évoluée, la création de clients léger plus perfectionné à l'aide de la technologie AJAX (Asynchronous Javascript And XML) et du standart DOM (Document Object Model) recommandé par le consortium W3C.

L'usage de ces langages d'édition forme l'auteur au développement web et participe à la démocratisation du langage. Certe les navigateurs ne respectent pas complètement cette norme, mais tendent à la respecter. Noter que des différences persistantes subsistent avec l'Internet Explorer de Microsoft (et comme nous n'avons pas soucis de nous soummettre à la politique commerciale de Microsoft, il sera fait selon les normes publiques sans autres préoccupations, rendant l'application utilisable à l'aide de navigateurs tel que Firefox, à l'exception regrétable de Internet Explorer).

Les sites de référence pour les standarts du web :

• http://openweb.eu.org/ (fr)
• http://www.w3.org/TR/ (en)

Bibliographe :

1) Le langage de balise HTML et XML

Le HTML est un langage de balises. Le XHTML complète le HTML avec des règles un peu plus stricte et dérive du XML. Une balise ouvrante est de la forme <nom> et est associée à une balise fermante </nom>, où nom désigne un type d'élément HTML. Il existe une cinquantaine de types d'éléments HTML que l'on note souvent par leur balise ouvrante sans attribut. Par contre le XML s'affranchie de cette limitation, toutes les balises y sont autorisées. Un navigateur moderne sait afficher un document HTML ou XML et le mettre en forme à l'aide d'un fichier css.

Les balises ouvrantes et fermantes se comportent comme des parenthèses ouvrantes et fermantes. Elles peuvent s'emboiter comme des niveaux de parenthèses pour former une structure d'arbre. Elles ne doivent pas se chevaucher comme dans l'exemple suivant : <div><p></div></p>. Une bonne combinaison est <div><p></p></div> qui correspond à l'emboitement d'un élément <p> dans un élément <div>. Une autre bonne combinaison est <div></div><p></p> qui correspond à la succession d'un élément <div> suivi d'un élément <p>. Dans le document web, un élément est déterminé par la séquence continue de caractères composée de sa balise ouvrante, d'un corps, et de sa balise fermante.

L'élément peut posséder des attributs. Ils sont alors notés dans sa balise ouvrante. Par exemple <div att="terre" id="Toto" class="sommaire"> spécifie 3 attributs que sont att, id et class, auquels sont attribués des valeurs qui sont des chaines de caractères. Le corps de l'élément est déterminé par l'ensemble du texte se trouvant entre sa balise ouvrante <div ...> et sa balise fermante </div>.

Les balises autofermantes sont à la fois ouvrantes et fermantes. Elles ne contiennent donc pas de corps, seulement d'éventuels attributs. On ferme la balise sans corps en ajoutant un espace et un slash (/) à la fin de la balise. Elle forme à elle seul un élément. Exemples : <br />, <input id="ON" type="button" value="ON" />

On appliquera les 6 règles syntaxiques suivantes du XHTML :

• Les noms des balises et des attributs sont écrits en minuscules et commence par une lettre ou un souligné. Exemple : <p>
• Les valeurs des attributs sont placées entre apostrophes simples ou doubles. Exemple : <p class="Toto">
• Tout attribut doit impérativement recevoir une valeur.
• Toute balise ouverte doit être fermée. Exemple : <p>Bonjour</p>
• Les balises autofermantes (sans corps) se caractérisent avec un espace et un slash (/) à la fin. Exemple : <hr id="fin" />
• Les balises seront correctement imbriquées sans chevauchement.

Un document web se compose d'un élément <html> qui contient un élément <head> et un élément <body>. Dans l'élément <head> est spécifié en principe tous ce qui concerne la page globalement, et dans l'élément <body> est spécifié tout ce qui doit être affiché.

<html> <head> ... </head> <body> ... </body> </html>

En XML toutes les imbrications d'éléments sont aurorisés (sauf si on se restreind soit-même par l'intermédiaire d'un schéma).

Par contre en HTML toutes les imbrications d'éléments ne sont pas autorisée. Chaque type d'éléments possèdent une liste de types possibles d'élément enfant. Voir les sites suivant :

http://www.la-grange.net/w3c/xhtml11/doctype.html
http://giminik.developpez.com/xhtml/p.htm

Nous présentons dans ce tableau la liste des éléments HTML d'usage en présisant ; s'ils sont de type Bloc ou En-ligne, leur déscription sémantique, s'ils contiennent du texte, et la liste des types d'éléments enfant qu'il peuvent posséder.

Les éléments sont rangés par module de développement.

Line = <title> <abbr> <br> <cite> <code> <dfn> <em> <option> <kbd> <q> <samp> <span> <strong> <var> <a> <button> <input> <label> <legend> <select> <optgroup> <textarea> <caption> <img> <object> <param> <sub> <sup> <meta> <link>

Bloc = <address> <blockquote> <div> <h1>...<h6> <p> <pre> <dl> <dt> <dd> <ol> <ul> <li> <fieldset> <form> <table> <td> <th> <tr> <hr> <style>

Elem = Line union Bloc

2) L'arbre DOM, une représentation du document en mémoire

Lors du chargement d'un document texte sructuré selon le langage HTML ou XML, le navigateur analyse les différents types de texte qui le constituent (balises, attributs, valeurs, textes...) et leur assigne à chacun un noeud, puis les organise hiérarchiquement afin de former l'arbre DOM, qui est mémorisé dans la mémoire de l'ordinateur et qui correspond à la représentation réelle de ce que nous voyons à l'écran du navigateur.

L'arbre est composé de noeuds. Il existe principalement 4 types de noeuds : les noeuds éléments, les noeuds texts, les noeuds attributs, et les noeuds documents.

Un noeud élément est un élément HTML ou XML, qui est déterminé par sa balise ouvrante, son corps et sa balise fermante, et qui est ainsi localisé à un endroit précis dans l'arbre DOM.

Le noeud document est le noeud racine, il contient un unique noeud fils qui est un élément <html>.

Un noeud text contient une valeur qui est une chaine de caractères.

Un noeud attribut contient deux valeurs chaine de caractères que sont son nom d'attribut et sa valeur.

L'arbre DOM est composé de noeuds éléments et de noeuds texts. Voici un exemple de code HTML avec l'arbre DOM correspondant :

Code HTML	Arbre DOM
<html> <head> <title>Essai</title> <style> div.toto {background-color:#FF99FF;} </style> </head> <body> <h1>Titre</h1> <div class="toto"> <p>Bonjour</p> </div> </body> </html>

Le noeud document possède un unique fils qui est l'élément <html>, qui possède à son tours deux fils, un élément <head> suivie d'un élément <body>.

L'élément <title> contient un noeud text qui correspond au nom affiché dans la barre de titre de la fenêtre du navigateur.

L'élément <style> contient un noeud text qui contient la feuille de style du document.

L'élément <h1> contient un noeud text qui correpond à un texte affiché comme titre.

L'élément <div> possède un attribut class qui n'apparait pas dans l'arbre et qui est affecté à la valeur "toto", et contient un élément <p>.

L'élément <p> correspond à un paragraphe et contient un noeud text.

Chaque élément, définie à l'aide des balises ouvrantes et fermantes, est un noeud élément. Le texte finale, contenu entre les balises ouvrantes et fermantes, est un noeud text. Il se peut qu'il y ait des noeuds texts supplémentaires dont la valeur est nulle.

Les attributs, tel que l'attribut class de l'élément <div>, n'apparaissent pas dans l'arbre. Chaque attribut d'un élément est un noeud attribut qui n'apparait pas dans l'arbre DOM.

Le navigateur Firefox, avec l'extention FireBug ou DOM Inspector, permet de visualiser l'arborescence des noeuds du document.

3) Le langage CSS

Ce langage permet de spécifier comment doit s'afficher chaque élément d'un documents HTML ou XML. Chaque élément possède une spécification d'affichage modifiable, appelé son style. L'ensemble des spécifications d'affichages, ou styles, regroupé dans un fichier, s'appel une feuille de style. Le langage CSS (Cascading Style Sheets) est un langage de feuille de style. On parlera de fichier css pour désigner des fichier contenant des feuilles de style, et ayant l'extention css.

Cette technique permet de séparer le style des documents, du contenu des documents, et simplifie ainsi l'édition de documents Web et leur maintenance.

3.1) Comment insérer une feuille de style

Chaque élément possède un style par défaut, qui peut être modifié par la feuille de style du document, ou bien directement par son attribut style. Voici quatre façons d'ajouter un style dans un document HTML.

La feuille de style correspond au fichier essai.css. On notera que la dernière façon permet d'emboiter les feullles de styles les unes dans les autres en plusieurs fichiers avec des @import, sorte d'include, faisant qu'une feuille de style peut faire appel à d'autres feuilles de style et ainsi de suite.

Voici les 4 exemples complets :

<html>
  <head>
  </head>
  <body>
    <div style="text-align:center">
      oOoOoOo
    </div>
    <p style="color:red; background:#999">
      Bonjour
    </p>
  </body>
</html>

<html>
  <head>
    <style>
      p {color:red; background:#999}
      div {text-align:center}
    </style>
  </head>
  <body>
    <div>oOoOoOo</div>
    <p>Bonjour</p>
  </body>
</html>

<html>
  <head>
    <style>
      @import url(essai.css);
    </style>
  </head>
  <body>
    <div>oOoOoOo</div>
    <p>Bonjour</p>
  </body>
</html>

<html>
  <head>
    <link rel="stylesheet" type="text/css"
          href="essai.css" />
  </head>
  <body>
    <div>oOoOoOo</div>
    <p>Bonjour</p>
  </body>
</html>

On lie une feuille de style essai.css dans un document XML à l'aide de la déclaration d'en-tête suivante :

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="essai1.css" type="text/css"?>

Noter qu'en HTML chaque élément possède un style prédéfini et certains éléments mettent en oeuvres des mécanismes d'affichage qui ne peuvent se traduire en feuille de style d'un document XML.

3.2) Élément de type bloc ou en-ligne

Les éléments en-lignes se comportent comme une suite de caractères s'insérant dans un flux de caractères selon le sens de l'écriture hérité. Ils peuvent contenir d'autres éléments en-ligne mais ne peuvent contenir d'élément de type bloc. L'élément en-ligne se comporte comme une portion linéaire de texte que l'on insérerait dans un texte en ligne, où la longueur de la ligne et les éventuels passages à la ligne ne dépendent pas de l'élément en-ligne question mais de l'élément de type bloc qui l'englobe.

Voici une liste d'éléments en-lignes : <a> <br /> <code> <img> <label> <input> <select> <span> <strong> <textarea>

Les éléments blocs se comportent comme des blocs de taille parfaitement définissable et de position absolue, ou relative, dans un flux de blocs de haut en bas, ou de gauche à droite d'abord si précisé, etc...

Voici une liste d'éléments blocs : <blockquote> <div> <form> <h1> <h2> <h3> <p> <pre> <table> <td> <tr> <li> <ol> <ul>

L'élément bloc le plus générale est <div>, et l'élément en-ligne le plus générale est <span>. La propriété display permet de changer le caractère en-ligne ou bloc de élément. Ainsi on peut inverser les rôles et l'élément suivant :

<div style="display:inline">coucou</div>

deviendra un élément en-ligne et l'élément suivant :

<span style="display:block">coucou</span>

deviendra un élément bloc.

3.3) Introduction aux déclarations CSS

Une feuille de style est une liste de déclarations CSS. Chaque déclaration se compose de deux parties, une première partie appelée sélecteur qui déterminent quels sont les éléments du document désignés par cette déclaration, et une seconde partie comprise entre accolade qui contient une liste de propriété-valeurs liées par un deux-points, et séparées par des point-virgules. Exemple :

p {text-align:justify; background:yellow; font-size:12px}

Cette déclaration précise que les éléments <p> (les paragraphes) auront toutes un texte justifé, un fond jaune et une taille de caractère de 12 pixels : Cette déclaration peut s'écrire également avec des espaces et en passant à la ligne comme suit :

p {
   text-align: justify;
   background: yellow;
   font-size: 12px
}

ou bien en répétant trois déclaration relative aux éléments <p> comme suit :

p {text-align: justify}
p {background: yellow}
p {font-size: 12px}

Ainsi les propriétées CSS s'ajoutent-elles lors des différentes déclaration CSS.

3.4) Attributs id et class

Chaque élément HTML posséde des attributs quelconques. Mais il existe deux attributs qui ont un rôle particulier, l'attribut id qui contient un nom permettant d'identifier l'élément, et l'attribut class qui contient la liste des classes (séparées par des caractères blancs) auxquels l'élément appartient.

3.5) Les sélecteurs simples

Dans l'exemple précédent le sélecteur p désigne toutes les éléments <p> présent dans le document.

Il existe 7 types de sélecteurs simples :

1. le sélecteur universel *,
2. le sélecteur d'élément div,
3. le sélecteur d'indentificateur #intro,
4. le sélecteur d'attribut [att="Toto],
5. le sélecteur de classe .menu,
6. le sélecteur de pseudo-classe - :first-child, :link, :visited, :hover, :active, :focus, et :lang(fr)
7. le sélecteur de pseudo-éléments.:first-line, :first-letter, :before, et :after.

Dans le tableau synoptique, les noms en italique peuvent être remplacé par tout autre nom. Ainsi on utilise l'élément div à titre d'exemple, mais celui-ci peut être remplacée par n'importe quelle autre tye d'élément que l'on souhaite. De même on utilise un identificateur "intro", une classe "prem", et une chaîne de caratère "Toto", mais ceux-ci peuvent être remplacés par n'importe quelle autre chaine de caractères que l'on souhaite. De même, on utilise un attribut att, mais celui-ci peut être remplacé par n'importe quelle nom d'attribut que l'on souhaite. Ces noms en italiques sont variables.

Voici quelques exemples :

3.6) Les sélecteurs complexes

Plusieur sélecteurs simples A, B, C peuvent être collés en ABC, avec comme restriction que l'éventuel sélecteur d'élément ou universel soit placé en premier, et que l'éventuel sélecteur de pseudo-élément soit placé en dernier. Ce groupe de sélecteurs collés désigne alors les éléments qui sont à la fois A, B et C.

Les sélecteurs complexes se construisent à partir des sélecteurs simples ou collés X, Y, en les ajoutants à la suite selon deux opérations possibles symbolisées par le caractère blanc et le symbole > et qui dénotent un lien de descendance d'un ou plusieur niveaux, ou seulement d'un seul niveau (lien parent-enfant). Mais il y a une restriction. L'éventuel sélecteur de pseudo-élément doit être placé en dernier :

X Y     désigne les éléments Y descendant des éléments X
X > Y  désigne les éléments Y qui sont enfants des éléments X

Une dernière opération accessoire qu'est la virgule, et qui est de priorité plus faible que les autres opérations, permet d'unir les différents sélecteurs en un seul sélecteur :

X, Y    désigne les éléments X et les éléments Y réunis.

Voici quelques exemples :

Ce langage CSS, trés riche, se confronte aux restrictions nombreuses et arbitraires du HTML. Mais il peut être utilisé pour le XML dans lequel il n'y a pas de tels restrictions.

3.7) Les couleurs

Dans le langage CSS, il existe 4 formats de définition de couleur : RGB, RGBA, HSL, HSLA, qui utilisent sous certaine condition des nombres hexadécimaux, des nomrbres décimaux et des pourcentages.

3.7.1) Format RGB

Le format RGB (Red, Green, Blue) demande trois valeurs comprise entre 0 et 255 pour les intensités lumineuses du rouge, du vert et du bleu. Voici un exemple de déclaration CSS, précisant la couleur d'écriture des paragraphes. Ce même exemple est exprimé sous 4 façons différentes :

p { color: #2F1 }
p { color: #22FF11 }
p { color: rgb(34,255,17) }
p { color: rgb(13.3%, 100%, 6.7%) }

Le symbole # demande un nombre héxadécimal en 3 caractères ou bien en 3*2 caractères. Le format RGB accepte soit 3 entiers positifs ou négatifs quelconques qui sont tronqués en des entiers compris entre 0 et 255, soit 3 pourcentages positifs ou négatifs quelconques avec d'éventuel décimal qui sont tronqués en des pourcentage compris entre 0.0% et 100.0%

3.7.2) Format RGBA

Le format RGBA (Red, Green, Blue, Alpha) demande une valeur décimale supplémentaire comprise entre 0 et 1 spécifiant l'opacité (0 = transparent, 0.5 = semi-transparent, 1 = opaque).

p { color: rgba(34,255,17,0.5) }
p { color: rgba(13.3%, 100%, 6.7%, 0.5) }

La valeur d'opacité est un nombre positif ou négatif quelconque, avec ou sans décimal, qui est tronqués en un nombre compris entre 0.0 et 1.0

3.7.3) Format HSL

Le format HSL (Hue, Saturation, Lightness) demande une première valeur comprise entre 0 et 360, pour désigner la nuance (0 = rouge, 120 = vert, 240 = bleu), et un pourcentage pour désigner la saturation de la couleur (100% = couleur pure, 50% = couleur pastel, 0% = gris), et un pourcentage pour désigner la luminosité de la couleur (100% = blanc, 50% = moitier lumineux, 0% = noir).

p { color: hsl(34, 100%, 6.7%) }

Le format HSL accepte un premier nombre positif ou négatif quelconque, avec ou sans décimal, qui est transformé modulo 360 en un nombre compris entre 0.0 et 360.0, puis accepte 2 pourcentages relatifs quelconques avec d'éventuel décimal qui sont tronqués en des pourcentages compris entre 0.0% et 100.0%

3.7.4) Format HSLA

Le format HSLA (Hue, Saturation, Lightness, Alpha) demande une valeur décimale supplémentaire comprise entre 0 et 1 spécifiant l'opacité (0 = transparent, 0.5 = semi-transparant, 1 = opaque).

p { color: hsla(34, 100%, 6.7%, 0.5) }

La valeur d'opacité est un nombre positif ou négatif quelconque, avec ou sans décimal, qui est tronqués en un nombre compris entre 0.0 et 1.0

3.7.5) Formule de conversion de format RGB-HSL

http://www.irem.univ-montp2.fr/optionsciences/20052006/nuanciers.pdf

(R,G,B) (H,S,L)

soit M=max(R,G,B), et m = min(R,G,B)

si M =R alors H = 60+(G-B)/M-m
si M =G alors H = 120+(B-R)/M-m
si M =B alors H = 240+(G-B)/M-m

L = (M+m)/2

si (M+m)<1 alors S = (M-m)/(M+m)
si (M+m)>1 alors S = (M-m)/(1-M-m)

3.7.6) Formule de composition des couleurs

La lumière est composée d'un spéctre trés riche. Chaque composante de la lumière correspond à une fréquence. Mais ici, il n'y a que trois composantes rouge, vert, bleue que l'on note sous la forme d'un vecteur x = [x1,x2,x3], l'indice évocant l'ordre des fréquences. x1 représente l'intensité de la lumière rouge, x2 l'intensité de la lumière verte, et x3 l'intensité de la lumière bleue.

Voir théorie des couleurs

3.7.7) Noms standarts des couleurs

Les 16 premières couleurs

3.8) Les unités de mesures

Les longueurs sont exprimées par une valeur numérique, positive ou négative, avec ou sans décimal, directement suivie d'une unité. Pour la valeur 0, l'unité est toutefois facultative.

Il existe 3 types d'unités de distance, les unités absolues, les unités relatives et les pourcentages.

Les valeurs de longueur

Les valeurs de longueur sont données en valeur numérique. Pour cela, il y a deux sortes d'unités :

• unités absolues : in, mm, cm, pt, pc
• unités relatives : em, ex, px

Les unités de longueur absolues

Les unités absolues ont un certain rapport entre elles comme l'indiquent les valeurs suivantes :

• cm ( centimeter = 1cm = 10 mm )
• in ( inche = 1in = 2.54 cm )
• mm ( millimeter )
• pc ( pica = 1pc = 12pt )
• pt ( point = 1pt = 1/72 in )

Par contre, elles n'ont pas de rapport avec le contexte, avec le reste du document. Nous allons voir maintenant les unités de longueur relatives

L'unité em

L'unité em se rapporte à la taille de la police. Avec elle on peut affecter une mesure relative à la taille de police de l'élément parent. Elle permet d'avoir des feuilles de style plus facilement adaptables d'un média à un autre. Les nombres décimaux sont autorisés, mais il faut tout simplement remplacer la virgule par un point. Cette valeur em est utilisable pour d'autres propriétés acceptant la mention de longueur.

L'unité ex

L'unité ex est utilisée souvent pour exprimer la hauteur des caractères. Le point de référence est la hauteur des minuscules souvent appelée hauteur "x" lowercase. En d'autres termes, dans le cas où la taille est donnée avec une unité "ex", celle-ci est alors mesurée par rapport à la hauteur de la minuscule x de l'élément parent.

Tout comme l'unité em, cette unité est utilisée pour toutes les propriétés acceptant la mention de longueur. Toutefois, la plupart des navigateurs ont encore une certaine hésitation à traduire correctement cette valeur.

L'unité px

L'écran d'un ordinateur ou moniteur est formé par plusieurs petits "carrés". Ces carrés définissent la résolution ou densité de l'écran en pixels d'affichage selon l'unité de sortie, c'est-à-dire l'écran de l'ordinateur. L'unité px qui veut dire pixel correspond à un de ces petits carrés.

C'est en fait le plus petit élément de la résolution d'écran. Cette unité peut être utilisée pour toutes les propriétés acceptant les mentions de longueur.

3.9) Les fontes de caractères

Après la couleur, la fonte, appelé aussi police de caractère, est probablement la propriété la plus fondamentale dans une page. Toutes les fontes ne sont pas disponibles sur tous les ordinateurs (il y a des milliers de fontes). CSS fournit un mécanisme de choix de fonte par défaut. Vous inscrivez les fontes que vous voulez d'abord et vous finissez la liste avec une fonte générique.

Il y a 5 font génériques : serif, sans-serif, monospace, cursive et fantasy :

• serif : à empattement, les extrémités des caractères comportent de petits crochets décoratifs.
• sans-serif : sans empattement, les extrémités des caractères sont droites.
• monospace : à chasse fixe, la place occupée par un caractère est constante
• cursive : imitant plus ou moins une écriture manuscrite
• fantasy : il s'agit plutôt d'icônes que de caractères

On peut consulter la liste des fontes les plus couramment installées. Voir le site http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml, et en rangeant les fontes selon leur pourcentage d'installation a, b et c réspectivement sur les systèmes Windows, Mac et Unix et en évaluant selon la valuation a + b + c + a*b + b*c + a*c + a*b*c, on optient la liste préférentielle suivante (décembre 2010) :

Les meilleures familles de polices compatibles linux/windows/mac :

Le site http://www.logz.org/art-407-tit-Les-meilleures-familles-de-polices-compatibles-linux-windows-mac propose d'utiliser les familles suivantes :

3.10) Les ombres

text-shadow

-moz-box-shadow

-moz-radial-gradient
-moz-linear-gradient