9.1 Ajouter des feuilles de style

Nous avons à peine modifier le look des éléments que nous avions crées auparavant. XUL utilise CSS pour personnaliser les éléments.

Feuilles de style

Une feuille de style est un fichier qui contient des informations de style pour les éléments. Elles ont été conçue originellement pour des éléments HTML mais peuvent être également appliquées à des éléments XUL ou à n'importe quel élément XML. La feuille de style contient des informations telles que les polices, couleurs, bordures et taille des éléments.

Mozilla applique une feuille de style 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 style personnalisée. En général vous associerez une seule feuille de style à chaque fichier XUL.

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

Imaginons que nous construisions la boîte de dialogue de recherche de fichiers pour la rendre thémable. La boîte peut être appelée par l'URL chrome://findfile/content/findfile.xul, ainsi la feuille de style sera enregistrée dans chrome://findfile/skin/findfile.css.

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/. Dans Mozilla, ceci 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 style utilise diverses polices, couleurs et bordures pour rendre l'apparence des éléments plus appropriée.

Changer les styles

Toutefois, il arrivera que l'apparence par défaut des éléments ne soit pas celle désirée. Pour cela, nous devons ajouter notre propre feuille de style. Jusqu'à présent, nous avons appliqué différents styles en utilisant l'attribut style sur des éléments. Bien que cela marche, ce n'est pas la meilleure chose à faire. Il est beaucoup plus préférable de créer une feuille de style séparée. La raison est que des styles ou 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 change le style, ou quand une différence d'agencement pourrait changer 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"?>

Ceci doit être la première ligne 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 style utiliser, car le nom spécifique du fichier n'a pas été indiqué ici. Nous avons fait une chose similaire avec la feuille de style globale (chrome://global/skin).

Une feuille de style peut importer des styles d'une autre feuille en utilisant la directive import. Normalement, vous n'importerez qu'une seule feuille de style de chaque fichier XUL. La feuille de style globale peut être importée à partir de la feuille de style 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:

Import de style à partir de XUL :

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

Import de style à  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é).

box[orient="horizontal"]

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

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

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

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