Ajouter des feuilles de style

« Précédent Suivant »

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.

Imaginons que nous construisions la boîte de dialogue de recherche de fichiers pour permettre le choix d'un thème. Comme la fenêtre peut être appelée par l'URL 'chrome://findfile/content/findfile.xul', la feuille de styles 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/. 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.

Notre exemple de recherche de fichiers

Modifions la boîte de dialogue de recherche de fichiers pour que son style provienne d'un fichier style séparé. Tout d'abord, voici les lignes modifiées de findfile.xul :

<?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="https://www.xulplanet.com/rdf/recent/all"/>
  ...
<spacer class="titlespace"/> <hbox>    <progressmeter id="progmeter" value="50%" style="display:none;"/>

La nouvelle ligne xml-stylesheet est utilisée afin d'importer la feuille de styles. Elle contiendra les styles au lieu de les avoir directement dans le fichier XUL. Vous pouvez inclure un nombre indéterminé de feuilles de styles de la même façon. Ici la feuille de styles est placée dans le même répertoire que findfile.xul.

Certains des styles dans le code ci-dessus ont été enlevés. La propriété display du progressmeter ne l'a pas été. Elle sera modifiée par un script donc, le style a été maintenu, car la barre de progression n'a pas à être visible au lancement. Vous pouvez toujours mettre le style dans une feuille de styles séparée si vous le souhaitez vraiment. Une classe a été ajoutée aux éléments spacer pour qu'ils puissent être appelés.

Une feuille de styles a également besoin d'être créée. Créez un fichier findfile.css dans le même répertoire que le fichier XUL (Il devrait normalement être mis dans un thème séparé). Dans ce fichier, nous allons ajouter la déclaration de styles, comme indiqué ci-dessous :

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

#progmeter {
  margin: 4px;
}

.springspace {
  width: 10px;
}

.titlespace {
  height: 10px;
}

Remarquez que ces styles sont équivalents aux styles que nous avions précédemment. Cependant, il est beaucoup plus facile pour quelqu'un de changer l'apparence de la boîte de dialogue de recherche de fichiers maintenant car il est possible d'ajouter ou modifier la déclaration de styles en modifiant le fichier ou en changeant le thème. Si l'utilisateur change le thème, les fichiers dans un répertoire autre que celui par défaut seront utilisés.

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.

Retirez l'importation de la feuille de styles globale dans findfile.xul et ajoutez l'importation dans findfile.css.

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 réglé 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.

var el = env.locale; La boîte de dialogue de recherche de fichiers à ce stade : Source Voir

<hr>

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