Démarrage rapide : application de styles aux contrôles (HTML)

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Pour personnaliser l’apparence des contrôles dans votre application Windows Runtime en JavaScript, vous utilisez des feuilles de style en cascade (CSS), comme vous le feriez pour un site Web. De plus, les applications Windows Runtime en JavaScript prennent en charge certaines fonctionnalités de stylisation de contrôle avancées, et la bibliothèque Windows pour JavaScript met à votre disposition un ensemble complet de styles qui vous permettent de donner facilement à votre application l’apparence Windows 8.

Dans ce guide, nous vous montrons comment inclure la feuille de style WinJS, styliser les contrôles HTML (également appelés contrôles intrinsèques), styliser les contrôles WinJS et utiliser les classes de typographie fournies par WinJS.

Voir cette fonctionnalité appliquée dans notre série Fonctionnalités d’application de A à Z: Interface utilisateur des applications du Windows Store de A à Z

Prérequis

• Nous partons du principe que vous savez gérer les événements d’une application Windows Runtime en JavaScript. Pour découvrir les meilleures pratiques en matière de gestion des événements, voir Démarrage rapide : ajout de contrôles HTML et gestion des événements.
• Nous partons du principe que vous savez créer et utiliser un objet des contrôles WinJS. Pour connaître la marche à suivre, voir Démarrage rapide : ajout de contrôles et de styles WinJS.
• Vous devez également être familiarisé avec les feuilles de style en cascade. (Pour plus d’informations sur les feuilles de style en cascade, voir Notions de base en HTML/CSS/JavaScript.)

Avantages de l’utilisation des feuilles de style de la bibliothèque Windows pour JavaScript

Les feuilles de style WinJS fournissent :

• Un ensemble de styles optimisant l’aspect de vos contrôles et bien adaptés aux écrans tactiles.
• La prise en charge automatique des modes de contraste élevé. Nos styles ont été conçus de manière à répondre aux contraintes de contraste élevé, ce qui permet à votre application de s’afficher correctement lorsqu’elle s’exécute sur un appareil en mode de contraste élevé.
• La prise en charge automatique d’autres langues. Les feuilles de style WinJS sélectionnent automatiquement la police adéquate pour chaque langue prise en charge par Windows 8. Vous pouvez même utiliser plusieurs langues dans la même application, qui s’afficheront correctement.
• La prise en charge automatique d’autres sens de lecture. Les contrôles, les dispositions et les styles HTML et WinJS s’ajustent automatiquement aux langues qui se lisent de la droite vers la gauche.

Utilisation des dernières feuilles de style de la Bibliothèque Windows pour JavaScript

Pour activer les dernières feuilles de style WinJS :

1. Téléchargez la dernière version depuis la page Obtenir WinJS (en anglais) et copiez-la dans le répertoire de votre application ou site web.
2. Ajoutez des références de script et CSS WinJS à chaque page de votre application ou site web qui utilise des fonctionnalités WinJS.

L’exemple ci-après montre à quoi ressemblent ces références pour une application dont les fichiers WinJS résident dans son répertoire racine.

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

WinJS fournit deux feuilles de style par défaut qui vous permettent de donner à votre application l’apparence Windows : ui-dark.css et ui-light.css.

• Pour les applications qui affichent essentiellement des images ou du contenu vidéo, nous vous recommandons d’utiliser la feuille de style à dominante sombre.
• Pour les applications qui contiennent une grande quantité de texte, il est préférable d’utiliser la feuille de style à dominante claire.

(Si vous recourez à un modèle de couleurs personnalisé, utilisez la feuille de style la mieux assortie à l’apparence de votre application.)

Ces feuilles de style définissent les styles suivants :

• Styles de base

  Styles pour les éléments html, body et iframe.

• Styles de contrôle HTML intrinsèque

  Styles pour les contrôles HTML intrinsèques, tels que button.

• Classes de contrôles HTML intrinsèques supplémentaires

  Classes CSS que vous pouvez affecter à des contrôles HTML intrinsèques pour leur donner une apparence différente. Pour la liste complète de ces classes, voir Classes CSS pour les contrôles HTML.

• Styles des contrôles WinJS

  Classes CSS qui représentent des parties de contrôles WinJS pouvant être stylisées.

• Styles de typographie

  Styles pour les éléments typographiques, tels que les éléments h1, dd et p.

• Classes de typographie supplémentaires

  Classes CSS qui vous permettent de styliser votre texte. Par exemple, vous pouvez utiliser la classe win-type-large pour agrandir le texte d’un élément.

Personnalisation de l’apparence de votre application

Pour personnaliser l’apparence de votre application, vous n’avez pas besoin de vous débarrasser des styles WinJS et de tout recommencer à partir de zéro. Vous pouvez facilement opérer des modifications progressives en substituant les styles à modifier.

De fait, il vaut mieux substituer les styles WinJS plutôt que de créer ses propres styles. Lorsque votre application s’exécute en mode de contraste élevé, toute modification apportée aux couleurs dans les styles par défaut est automatiquement substituée par un modèle de couleurs qui prend en charge le contraste élevé.

Vous pouvez substituer n’importe quel style dans la feuille de style par défaut en créant votre propre feuille de style et en l’incluant après la feuille de style WinJS :

<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

Comment spécifier des couleurs

Vous pouvez substituer les feuilles de style WinJS, ou vous pouvez spécifier vos propres styles. Lorsque vous spécifiez vos propres styles, il est préférable d’utiliser les couleurs système CSS, car elles s’affichent automatiquement lorsque votre application est en mode de contraste élevé. Pour obtenir la liste des couleurs système, voir Couleurs système définies par l’utilisateur.

Si vous n’utilisez pas les couleurs système définies par l’utilisateur, vous pouvez spécifier une valeur RVB à la place, à condition de substituer un style WinJS existant. Lorsque vous substituez un style WinJS et que le système passe en mode de contraste élevé, les informations de couleur personnalisées sont ignorées et une palette compatible avec le mode de contraste élevée est utilisée à la place.

Application de styles aux contrôles HTML

Vous pouvez styliser les contrôles HTML (contrôles faisant partie de la norme HTML5, tels que button, textarea et select) de la même manière que dans une page HTML ordinaire à l’aide de feuilles de style en cascade. (Pour plus d’informations sur les feuilles de style en cascade et sur leur fonctionnement, voir Notions de base en HTML/CSS/JavaScript. )

Par exemple, pour styliser une zone d’entrée de texte afin qu’elle présente une largeur de 400 pixels, vous écrivez le code CSS suivant :

input[type=text]
{
    width: 400px;
}

Un contrôle classique possède plusieurs composants ou sous-parties. Par exemple, le contrôle d’entrée de texte dans l’illustration précédente possède deux parties : la valeur de texte et le bouton d’annulation.

Les applications du Windows Store en JavaScript mettent à votre disposition des pseudo-éléments CSS qui vous permettent de styliser les différentes parties de nombreux contrôles. Le pseudo-élément de la valeur de saisie de texte est -ms-value, tandis que le pseudo-élément du bouton d’annulation est -ms-clear.

Pour styliser une partie d’un contrôle, utilisez la syntaxe suivante :

element selector::part name { /* placez les styles ici */ }

Par exemple, pour styliser le bouton d’annulation de la zone d’entrée, vous créez le style suivant :

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

Vous pouvez combiner des sélecteurs de pseudo-élément avec d’autres sélecteurs afin de cibler un contrôle avec un ID ou un nom de classe spécifique.

Par exemple, pour styliser le bouton d’annulation d’un contrôle d’entrée de texte qui utilise la classe "orangeButton", vous créez le style suivant :

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

Pour plus d’informations sur les différentes façons de combiner des pseudo-éléments et d’autres sélecteurs, voir Présentation des sélecteurs CSS.

Les parties disponibles pour chaque contrôle HTML sont indiquées ci-dessous.

Contrôle	Parties
input type=checkbox	-ms-check
input type=radio	-ms-check
input type=password	-ms-reveal
input type=range	-ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip
input type=email, input type=number, input type=password, input type=search, input type=tel, input type=url	-ms-value,-ms-clear
input type=file	-ms-value, -ms-browse
progress	-ms-fill
select	-ms-value, -ms-expand

 

Les éléments option du contrôle Select offrent aussi la prise en charge des styles CSS afin de disposer d’un contrôle affiné de l’apparence des éléments déroulants, comme la couleur et les styles de police. Cela permet d’avoir des scénarios d’édition tels que les contrôles de sélecteur de police, où les utilisateurs peuvent afficher un aperçu de différents styles de police dans une liste déroulante avant de choisir la police à utiliser.

<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

Utilisation des classes de contrôle HTML

La feuille de style comprend des classes CSS que vous pouvez affecter à des contrôles HTML intrinsèques pour leur donner une apparence différente. Par exemple, vous pouvez utiliser la classe win-backbutton pour donner à un bouton standard l’apparence d’un bouton permettant de revenir en arrière.

<button class="win-backbutton"></button>

L’utilisation de la classe permet de donner à un bouton l’apparence suivante :

Application de styles aux contrôles de la bibliothèque Windows pour JavaScript

Pour styliser un contrôle WinJS, vous substituez les classes CSS WinJS pour ce contrôle. Par exemple, pour styliser un objet AppBar, vous substituez la classe win-appbar.

L’exemple suivant crée un style qui masque l’indicateur de progression d’un objet ListView.

.win-listView .win-progress {
    display: none;
}

Pour la liste complète des classes disponibles, voir Classes CSS WinJS. Pour plus d’informations sur les classes utilisées par un contrôle spécifique, voir la page de référence liée à ce contrôle.

Certains contrôles, tels que ListView et FlipView, prennent également en charge les modèles d’élément. Les modèles d’élément vous permettent de contrôler l’apparence et le contenu des éléments de liste avec une large latitude. Pour plus d’informations, voir Démarrage rapide : ajout d’un contrôle ListView et Démarrage rapide : ajout d’un contrôle FlipView.

Utilisation des classes de typographie

La feuille de style contient également des classes CSS pour la typographie applicables à tout élément contenant du texte. Par exemple, vous pouvez utiliser la classe win-title pour donner à un titre le style de titre Windows 8. L’exemple suivant utilise les classes de typographie pour créer différents types de titre.

     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

Pour la liste complète de ces classes typographiques, voir Classes CSS typographiques.

Exemples

Pour plus d’informations sur la stylisation, consultez les exemples suivants :

• Exemple de stylisation et de personnalisation d’une application

• Exemple de feuille de style en cascade pour les affichages à contraste élevé

Récapitulatif

Vous avez appris à utiliser les feuilles de style WinJS, à styliser des contrôles intrinsèques et WinJS et à utiliser les autres classes CSS typographiques fournies par WinJS.

Rubriques associées

Notions de base en HTML/CSS/JavaScript

Présentation des sélecteurs CSS

Classes CSS WinJS

Classes CSS pour les contrôles HTML

Informations de référence des API Windows Runtime et bibliothèque Windows pour JavaScript