10.1 Ajouter des feuilles de styles

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Jusqu'à présent, nous avons à peine modifier l'aspect visuel des éléments que nous avons créés. XUL utilise CSS (Cascading Style Sheets) pour personnaliser les éléments.

Feuilles de styles

Une feuille de styles est un fichier qui contient des informations de style pour les éléments. Les styles ont été conçus au départ pour des éléments HTML mais ils peuvent également être appliqués à des éléments XUL ou à n'importe quels éléments XML. La feuille de styles contient des informations telles que les polices, couleurs, bordures et taille des éléments.

Mozilla applique une feuille de styles par défaut pour chaque fenêtre XUL. Dans la plupart des cas, il sera suffisant de laisser les valeurs par défaut telles quelles. Toutefois, vous pouvez fournir une feuille de styles personnalisée. En général vous associerez une seule feuille de styles à chaque fichier XUL.

Vous pouvez placer une feuille de styles où vous le désirez. Si votre fichier XUL se trouve sur un serveur distant et doit être accédé via une URL HTTP, vous pouvez également stocker la feuille de styles à distance. Si vous créez un paquetage XUL destiné à faire partie du système chrome, vous avez deux choix. Premièrement, vous pouvez placer la feuille de styles dans le même répertoire que le fichier XUL. Cette méthode a l'inconvénient d'interdire le changement du thème graphique de votre application. La seconde méthode consiste à placer vos fichiers à l'intérieur d'un thème.

Tous les exemples XUL ont utilisé une feuille de styles jusqu'à présent. La seconde ligne a toujours été :

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

Cette ligne indique que nous voulons utiliser le style fourni par chrome://global/skin/. Sous Mozilla, elle sera traduit par le fichier global.css qui contient les informations du style par défaut pour les éléments XUL. Si vous enlevez cette ligne, les éléments fonctionneront, toutefois ils apparaîtront dans un style plus simple. La feuille de styles utilise diverses polices, couleurs et bordures pour rendre l'apparence des éléments plus appropriée.

Modifier les styles

Il arrivera toutefois que l'apparence par défaut des éléments ne soit pas celle désirée. Dans ces cas, nous devons ajouter notre propre feuille de styles. Jusqu'à présent, nous avons appliqué différents styles en utilisant l'attribut style sur des éléments. Bien que ce soit une technique fonctionnelle, elle n'est pas la meilleure. Il est de loin préférable de créer une feuille de styles séparée. La raison est que des styles ou des thèmes différents peuvent êtres appliqués très facilement.

Il peut y avoir des cas où l'utilisation de l'attribut style est acceptable. Un bon exemple serait lorsqu'un script modifie le style d'un élément, ou quand une différence d'agencement pourrait modifier la signification de l'élément. Cependant vous devriez l'éviter autant que possible.

Pour des fichiers installés, vous aurez à créer ou à modifier un fichier manifeste et installer le thème.

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="findfile.css" type="text/css"?>
  ...
<spacer class="titlespace"/>
  <groupbox orient="horizontal">
    <caption label="Critères de recherche"/>

      <menulist id="searchtype">
        <menupopup>
          <menuitem label="Nom"/>
          <menuitem label="Taille"/>
          <menuitem label="Date de modification"/>
        </menupopup>
      </menulist>
      <spacer class="springspace"/>
      <menulist id="searchmode">
        <menupopup>
          <menuitem label="Est"/>
          <menuitem label="N'est pas"/>
        </menupopup>
      </menulist>

      <spacer class="springspace"/>
      <menulist id="find-text" flex="1"
          editable="true"
          datasources="file:///mozilla/recents.rdf"
          ref="http://www.xulplanet.com/rdf/recent/all"/>
  ...
<spacer class="titlespace"/>
<hbox>

  <progressmeter id="progmeter" value="50%" style="display:none;"/>

#find-text {
  min-width: 15em;
}

#progmeter {
  margin: 4px;
}

.springspace {
  width: 10px;
}

.titlespace {
  height: 10px;
}

Importer des feuilles de styles

Nous avons déjà vu comment importer des feuilles de styles. Un exemple est montré ci-dessous :

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

Cette ligne peut être la première d'une fenêtre bookmarks. Elle importe la feuille de style bookmarks, qui est bookmarks.css. Le système de thème de Mozilla est assez intelligent pour savoir quelle feuille de styles utiliser, car le nom spécifique du fichier n'a pas été indiqué ici. Nous avons fait une chose similaire avec la feuille de styles globale (chrome://global/skin).

Une feuille de styles peut importer des styles d'une autre feuille en utilisant la directive import. Normalement, vous n'importerez qu'une seule feuille de styles de chaque fichier XUL. La feuille de styles globale peut être importée à partir de celle associée avec le fichier XUL. Ceci peut être fait grâce au code ci-dessous, vous permettant de retirer l'import du fichier XUL :

Importation de styles à partir de XUL :

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

Importation de styles à  partir de CSS :

@import url(chrome://global/skin/);

La seconde syntaxe est préférable car elle réduit le nombre de dépendances à l'intérieur du fichier XUL lui-même.

Tous les éléments peuvent être décorés à l'aide de CSS. Vous pouvez utiliser des sélecteurs pour sélectionner l'élément que vous souhaitez styler (Le sélecteur est la partie avant l'accolade dans une règle de style). La liste suivante résume quelques-uns des sélecteurs disponibles :

button

Désigne toutes les balises button.

#special-button

Désigne les éléments avec un id de special-button

.bigbuttons

Désigne tous les éléments avec une classe bigbuttons

button.bigbuttons

Désigne tous les éléments button avec une classe à bigbuttons

toolbar > button

Désigne tous les boutons directement insérés dans un élément toolbar.

toolbar > button.bigbuttons

Désigne tous les éléments button avec une classe bigbuttons, directement insérés dans un élément toolbar.

button.bugbuttons:hover

Désigne tous les éléments button avec une classe bigbuttons mais seulement lorsque la souris se trouve au dessus d'eux.

button#special-button:active

Désigne tous les éléments button avec un id special-button mais seulement lorsqu'ils sont actifs (en train d'être cliqués).

box[orient="horizontal"]

Désigne tous les éléments box avec un attribut orient reglé sur horizontal.

Vous pouvez combiner ces règles comme vous le désirez. C'est toujours une bonne idée d'être aussi précis que possible lorsque vous spécifiez ce qui doit être décoré et comment. C'est bien plus efficace et réduit également les risques de décorer un mauvais élément.

La boîte de dialogue de recherche de fichiers à ce stade : Source Voir

Dans la prochaine section, nous verrons comment appliquer des styles aux arbres.