Les feuilles de style dans XUL

Utilisant les standards du Web, c'est avec les feuilles de style en cascade que XUL définit la présentation des composantes des interfaces qu'il construit.

Types prédéfinis

XUL dispose de type déjà définies qui s'appliquent à des types de composants données.

plain

Ce type supprime les bords et les marges ainsi que tout élément de style, et il s'applique à la plupart des composants qui disposent par défaut de ces éléments de style.

outset

Affiche une ligne de bordure autour du composant.

groove

Là ou il y a une ligne, elle sera rainurée.

Il y a bien d'autre types prédéfinis qui sont donnés dans la table de référence des éléments.

Définir un style

On définit un style au niveau global pour l'interface, pour un fichier donné, ou pour un composant.

Définir un thème global

Cela se fait avec une ligne de la sorte:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

La definition signifie que le thème se trouve dans fichier nommé global.css, et donc que les composantes ont leur style définit dans ce fichier avec des identifieurs id ou class.
Il est ainsi facile de changer de thème en changeant de fichier.
Sans fichier de thème, le style ordinaire des composants Mozilla est utilisé.

Ajouter un style à un fichier

Pour définir l'apparence des composants dans ce fichier. La feuille de style sera enregistrée dans le même répertoire que le fichier XUL:

chrome://mapage/content/mapage.xul
chrome://mapage/content/mapage.css

Le fichier CSS contient les descripteurs s'appliquant à des composants ou des classes de composants.

Donner un style à un composant

On définit un style propre à un composant avec l'attribut style. L'intérêt d'utiliser un attribut est qu'on peut changer l'apparence du composant dynamiquement par un script assignant une valeur différente à l'attribut.

Exemple

Dans cet exemple, on va définir un style de page et des styles propres aux composants.
On ajoute un style à la page en spécifiant le nom du fichier de feuille de style, en l'occurence "style.css", avec cette ligne:

<?xml-stylesheet href="style.css" type="text/css"?>

Le style de page défini dans style.css:

 .red { 
    color:red; 
    font-weight:bold; 
    font-style:italic; 
} 

.blue { 
    color:blue;
    font-weight:bold;
    font-size:150%; 
}

La classe red définit une couleur de police rouge et en italique, la classe blue définit une couleur bleur et une police agrandie.
On utilise ces classes pour un bouton et un champ de texte:

<button class="red" label="Not clicked" /> 
<description class="blue">The text in bold and 150% size </description>

A coté de ces élément, on crée aussi deux listes avec les balises listbox. Celle de gauche est en couleur bleue

<listbox style="color:blue">

et celle de droite en couleur verte:

<listbox style="color:green">

En outre est ajoutée une commande pour changer le libellé du bouton, comme on peut le voir dans le code source:

Démo: code.zip