Démarrage rapide : définition de dispositions d’application (HTML)

[ Cet article est destiné aux développeurs de 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 ]

Vous pouvez définir des dispositions d’application pour n’importe quelle taille ou orientation de fenêtre.

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

Objectif: Cet article vous permettra d’acquérir de solides bases quant à l’utilisation du langage HTML, des feuilles de style en cascade (CSS, Cascading Style Sheets) et du langage JavaScript pour créer une interface utilisateur fluide attrayante et performante dans tous les états d’affichage.

Prérequis

• Réfléchissez à une conception pour votre application.

  Pour en savoir plus sur la planification et la conception d’applications Windows Runtime, voir Définition de la vision.

• Familiarisez-vous avec les fenêtres redimensionnables dans Windows 8.1.

  Pour en savoir plus sur les états d’affichage, voir Recommandations en matière d’expérience utilisateur pour la disposition et la mise à l’échelle.

• Familiarisez-vous avec les demandes de support CSS.

  Les demandes de support sont définies dans la spécification Media Queries du World Wide Web Consortium (W3C). Vous pouvez voir les demandes de support en action dans notre exemple de demandes de support CSS.

• Apprenez à utiliser les fonctionnalités de disposition avancées Cascading Style Sheets Level 3 (CSS3), en particulier l’alignement de grille CSS3.

  Pour en savoir plus sur les fonctionnalités de disposition avancées CSS3 et sur l’alignement de grille, voir CSS.

Exemple de disposition adaptative avec CSS

Cet article illustre les concepts de base de la définition des dispositions d’applications en décrivant la façon dont les dispositions sont implémentées dans l’Exemple de disposition adaptative avec CSS. Il s’agit d’un exemple d’application de simulation météorologique qui affiche la météo du jour et les prévisions des dix prochains jours. Il illustre comment utiliser CSS et HTML, la grille CSS, le contrôle ListView et les demandes de support CSS pour créer une disposition d’application fluide.

Avant d’entrer dans les détails, examinons la structure de l’Exemple de disposition adaptative avec CSS. L’application est composée de trois pages HTML. La première est une page de niveau supérieur nommée App.html qui définit la surface principale pour les éléments d’interface utilisateur de l’application. Elle comprend un bouton Précédent, un titre et un sous-titre, un menu d’application, les boutons de barre de l’application et une zone pour l’affichage du contenu (zone blanche dans l’image ci-dessous).

Les deux autres pages HTML, Current.html et TenDay.html, définissent la structure du contenu affiché dans la zone de contenu de la page principale. La page Current.html affiche des détails sur la météo du jour :

La page TenDay.html affiche des détails sur la prévision à dix jours :

Nous allons nous concentrer sur les parties de l’exemple de disposition adaptative avec CSS qui définissent la disposition de la page principale de l’application et sur la disposition de la prévision à dix jours.

Voici à quoi ressemble la page principale de l’application durant l’affichage des prévisions à dix jours sur un écran de 10,6 pouces à une résolution de 1366 x 768 pixels en mode plein écran, dans les orientations suivantes : portrait, paysage, côte à côte avec une autre application, étroite et large.

S’assurer que l’application remplit la zone d’écran disponible

Une application correctement conçue possède une surface d’interface utilisateur qui occupe toute la zone d’écran disponible. De prime abord, cela peut sembler être un défi difficile à surmonter étant donné le large éventail de facteurs de forme d’appareils, de résolutions et d’orientations que doit satisfaire une application. Fort heureusement, cette tâche est grandement simplifiée grâce à CSS.

Pour vous assurer que l’application remplit toute la zone d’écran disponible

1. Utilisez un élément div comme conteneur de niveau supérieur pour tous les autres éléments d’interface utilisateur dans la page.

   <body>
       <div class="win-ui-dark appGrid">
           <!-- TODO: Define page structure here. -->
       </div>
   </body>
   

2. Utilisez les propriétés CSS, vw et vh, pour définir les propriétés width et height de l’objet div par rapport à la fenêtre d’affichage. Par exemple, utilisez 100vw (largeur de la fenêtre d’affichage) et 100vh (hauteur de la fenêtre d’affichage) pour remplir la fenêtre d’affichage, comme illustré ici.

   .appGrid {
       width: 100vw;
       height: 100vh;
       /* TODO: Add other styles here. */
   }
   

   vw et vh peuvent être spécifiées pour n’importe quel élément, quelle que soit la profondeur dans la hiérarchie. Comme le contexte de dimensionnement pour la fenêtre d’affichage n’est pas modifié, il est inutile de prendre en compte le dimensionnement hérité.

   Remarque  L’exemple affecte aux propriétés width et height la valeur 100 %.

    

Définir la disposition de base de la page principale

Quand vous établissez la disposition de l’interface utilisateur de votre application, il est préférable de commencer par l’orientation paysage. Une fois la disposition paysage définie, il est très facile de l’adapter pour les autres dispositions : portrait, étroite et large.

Utiliser HTML pour définir les éléments d’interface utilisateur de la page

L’interface utilisateur d’une application contient généralement des éléments tels que des boutons de navigation, des en-têtes, des menus, des contrôles, et ainsi de suite. Ajoutez ces éléments d’interface utilisateur comme éléments HTML enfants de l’élément div de niveau supérieur pour la page.

Le code HTML suivant définit les éléments d’interface utilisateur pour la page de niveau supérieur de l’Exemple de disposition adaptative avec CSS. Il s’agit d’éléments tels que le bouton Précédent, le titre et le sous-titre, le menu de l’application, la zone de contenu principale et les boutons de barre de l’application.

<body>
    <div class="win-ui-dark appGrid">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="win-type-xx-large titlecontainer" tabindex="0"><span class="pagetitle">Mountains</span><span class="win-type-x-large chevron">&#xE099</span></span>
                <span class="win-type-x-large pagesubtitle">Rainer</span>
            </h1>
        </header>
        <div id="headerFlyout" data-win-control="WinJS.UI.Menu">
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'rainierMenuItem', label:'Rainier'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'stHelensMenuItem', label:'St. Helens'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'olympusMenuItem', label:'Olympus'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'bakerMenuItem', label:'Baker'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'adamsMenuItem', label:'Adams'}"></button>
        </div>
        <div class="appViewContentMask">
            <div class="appViewContent">
                <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
                <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
            </div>
        </div>
    </div>
    <div id="appbar" class="win-ui-dark appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'current', label: 'Current', icon: 'calendarday', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the current report'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'tenDay', label: 'Ten day', icon: 'calendarweek', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the ten day report'}"></button>
    </div>
</body>

Utiliser des grilles CSS pour positionner les éléments d’interface utilisateur sur la page HTML

L’un des meilleurs moyens d’obtenir une disposition d’interface utilisateur adaptable consiste à utiliser des grilles CSS, car la grille peut s’étendre automatiquement de façon à remplir l’espace qui lui est accordée. De plus, elle expose un vaste ensemble de propriétés qui simplifie la personnalisation de la disposition d’interface utilisateur pour différentes tailles de fenêtre. La position des éléments dans une grille étant indépendante de l’ordre dans lequel ils sont spécifiés (leur position étant strictement dictée par CSS et non par leur ordre dans le balisage HTML), il est facile de disposer différemment les éléments sur diverses tailles d’écran ou dans différentes orientations, voire d’éviter d’afficher certains éléments dans certaines dispositions.

Disposition de la page principale

1. L’Exemple de disposition adaptative avec CSS applique une grille CSS à l’objet div de niveau supérieur sur la page App.html en définissant la propriété display de l’objet div -ms-grid. Cette grille de niveau supérieur définit la structure globale pour le positionnement des éléments d’interface utilisateur dans la page principale de l’application.

2. Ensuite, l’exemple d’application définit les colonnes et les lignes de la grille en définissant la valeur des propriétés -ms-grid-columns et -ms-grid-rows.

   Le code CSS suivant applique une grille à l’objet div de niveau supérieur dans la page principale de l’exemple. Cette grille sert à positionner les éléments qui composent l’en-tête de l’application (le bouton Précédent, le titre, le sous-titre et le menu de l’application) et à définir la position de la zone de contenu principale.

   .appGrid {
       display: -ms-grid;
       -ms-grid-columns: 120px 1fr;
       -ms-grid-rows: 120px 1fr; 
   
       /* Other properties omitted for clarity. */
   
   }
   

   Le code CSS ci-dessus crée une grille avec deux colonnes et deux lignes. La première colonne fait 120 pixels de large et la seconde fait une « unité fractionnelle » de large. Cela signifie que la largeur de colonne s’étend automatiquement de façon à remplir l’espace non occupé par la première colonne. Les lignes sont définies d’une manière similaire.

   L’illustration suivante montre la façon dont la grille divise la page principale de l’application :

   

3. Ensuite, l’Exemple de disposition adaptative avec CSS définit la position des éléments d’interface utilisateur en assignant chaque élément à une cellule particulière dans la grille. Pour cela, il applique les propriétés -ms-grid-column et -ms-grid-row à des éléments dans la page. La grille CSS prend en charge plusieurs autres propriétés pour le positionnement des éléments par rapport aux limites de cellules et pour autoriser le chevauchement des éléments sur plusieurs colonnes ou lignes. Pour en savoir plus, voir Disposition en grille.

   Le code CSS suivant positionne l’élément header de la page principale de l’exemple d’application dans la colonne 1, ligne 1 de la grille de niveau supérieur et autorise cet élément à chevaucher les deux colonnes de la grille. Le code crée également une grille « enfant » dans la colonne 1, ligne 1 de la grille de niveau supérieur. La grille enfant sert à positionner les différents éléments qui composent l’en-tête (bouton Précédent, titre, sous-titre et menu de l’application).

   header[role=banner] {
       -ms-grid-column: 1;
       -ms-grid-row: 1;
       -ms-grid-column-span: 2;
   
       /* Child grid for positioning header items.*/
       display: -ms-grid;
       -ms-grid-columns: 120px 1fr;
       -ms-grid-rows: 1fr;
   }
   

   Le code ci-dessus crée une grille dans la zone marquée en bleu dans l’image suivante.

   

   L’Exemple de disposition adaptative avec CSS utilise des éléments div imbriqués pour définir la zone de contenu principale où la météo actuelle et la prévision à dix jours sont affichées :

   <div class="appViewContentMask">
       <div class="appViewContent">
           <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
           <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
       </div>
   </div>
   

   Notez dans l’exemple précédent que le contrôle HtmlControl de la bibliothèque Windows pour JavaScript est utilisé pour inclure de manière dynamique les pages HTML de la météo actuelle et de la prévision à dix jours. Pour en savoir plus sur les contrôles WinJS, voir Démarrage rapide : ajout de contrôles et styles WinJS.

   Le code CSS suivant positionne l’objet div appViewContentMask dans la colonne 2, ligne 2 de la grille de niveau supérieur. Il définit également des propriétés afin de s’assurer que le contenu remplit la grille de cellule entière et que tout contenu non adapté à la cellule est masqué.

   .appViewContentMask {
       -ms-grid-column: 2;
       -ms-grid-row: 2;
       width: 100%;
       height: 100%;
       overflow: hidden;
   
       /* Other properties omitted for clarity. */
   
   }
   

   Le code CSS suivant convertit l’objet div appViewContent en une grille enfant contenant une seule cellule qui remplit la zone définie par l’objet div appViewContentMask. L’utilisation d’une grille enfant simplifie le réaffichage du contenu lorsque l’état d’affichage change la taille ou l’orientation de l’application.

   
   .appViewContent {
       width: 100%;
       height: 100%;
       display: -ms-grid;
       -ms-grid-columns: 1fr;
       -ms-grid-rows: 1fr;
   }
   

   Le code CSS assigne la grille pour la zone de contenu à la zone marquée en bleu :

   

Définir la disposition de base de la prévision à dix jours

La prévision de dix jours est une collection d’éléments qui sont gérés et affichés à l’aide d’un contrôle ListView WinJS. Chaque élément est constitué d’une image et d’un ensemble de données telles que la date, les températures minimale et maximale, la température « ressentie » et le risque de neige :

La page HTML suivante définit l’interface utilisateur pour les éléments de la prévision à dix jours. L’exemple de disposition adaptative avec CSS utilise la liaison de données et les modèles WinJS pour fournir des données au contrôle ListView. Cette rubrique étant axée sur la disposition de l’interface utilisateur, nous n’examinerons pas les modèles et la liaison de données. Pour en savoir plus sur les modèles et la liaison de données, voir Comment lier des données à l’aide de modèles.

<body>
    <div class="tenDayPage">
        <div id="tenDayTemplate" class="tenDayTemplate" data-win-control="WinJS.Binding.Template">
            <div class="tenDayGrid">
                <div class="win-type-x-large tenDayDate" data-win-bind="innerHTML: date">
                </div>
                <div class="tenDayImg">
                    <img data-win-bind="src: imgSrc" />
                </div>
                <div class="win-type-x-large tenDayHighLow">
                    <span class="tenDayHigh" data-win-bind="innerHTML: hi"></span>
                    <span>/</span>  
                    <span class="tenDayLow" data-win-bind="innerHTML: low"></span>
                </div>
                <div class="tenDayFeelsLike">
                    <span>Feels like </span>
                    <span data-win-bind="innerHTML: feelsLike"></span>
                </div>
                <div class="tenDayChanceOfSnow">
                    <span>Chance of snow is </span>
                    <span data-win-bind="innerHTML: chanceOfSnow"></span>
                </div>
            </div>
        </div>
        <div id="tenDayListView" class="tenDayListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
    </div>
</body>

Notez que l’exemple précédent utilise des WinJS CSS classes for typography spéciaux pour définir une très grande taille de police pour les chaînes de date et de températures maximale/minimale. C’est ce que signifie class="win-type-x-large" dans les éléments tenDayDate et tenDayHighLow div.

L’exemple d’application utilise le code CSS suivant pour s’assurer que la page TenDay.html et son contrôle ListView remplissent le conteneur parent (la zone de contenu de la page principale de l’application).

/* Size Page to full size of parent container */
.tenDayPage
{
    height: 100%;
}

/* List View Control */
.tenDayListView
{
    width: 100%;
    height: 100%;
}

Utiliser des demandes de support CSS pour appliquer des styles et des dispositions spécifiques à l’affichage

Grâce aux demandes de support CSS, vous pouvez facilement définir différents styles à appliquer aux éléments HTML dans votre application en fonction de la taille de la fenêtre. Vous pouvez utiliser une demande de support CSS distincte pour chaque disposition, ou combiner des demandes de support afin d’appliquer le même jeu de styles à plusieurs dispositions. Nous décrivons ici les demandes de support utilisées par l’exemple de disposition adaptative avec CSS pour établir la disposition de sa page principale et des éléments de la prévision à dix jours.

Disposition de la page principale pour un affichage étroit

Si vous utilisez l’exemple d’application, vous remarquerez que la taille et la disposition des éléments d’interface utilisateur ne changent pas beaucoup entre les dispositions portrait, paysage et redimensionnées de type large. Toutefois, quand l’application est redimensionnée à une largeur inférieure à 500 pixels, les modifications suivantes sont visibles :

• La taille des éléments d’interface utilisateur dans l’en-tête d’application diminue.
• La disposition passe de deux colonnes et deux lignes à une colonne unique où l’en-tête occupe la première ligne et la zone de contenu occupe la seconde ligne.

Ces modifications sont appliquées via une demande de support CSS qui définit un autre jeu de styles spécifiquement pour les dispositions étroites :

@media (max-width:499px) {
    .appGrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 120px 1fr;
        width: 100%;
        height: 100%;
    }

    header[role=banner] {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-columns: 60px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        header[role=banner] .win-backbutton {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            margin-left: 20px;
            margin-top: 75px;
        }

        header[role=banner] .titlearea {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            margin-top: 69px;
            max-width: 260px;
        }

    .appViewContentMask {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

Dans le code CSS ci-dessus, une nouvelle valeur pour la propriété –ms-grid-columns change la grille principale de l’application (appGrid), qui passe de deux colonnes à une seule. Le code CSS définit aussi une nouvelle grille enfant pour les éléments dans l’en-tête d’application et positionne les éléments d’en-tête dans la nouvelle grille. Pour finir, le code déplace la zone de contenu (appViewContentMask) de la colonne 2, ligne 2 de l’ancienne grille à la colonne 1, ligne 2 de la nouvelle grille.

Disposition des prévisions à dix jours pour un affichage étroit

Vous pourrez constater des changements dans la disposition des différents éléments des prévisions à dix jours quand vous redimensionnerez l’application à une largeur inférieure à 500 pixels. Quand la largeur est supérieure à 500 pixels, les éléments sont disposés verticalement dans une grille à une seule colonne. Quand la largeur est inférieure à 500 pixels, les éléments adoptent une orientation horizontale dans une grille à deux colonnes.

L’image suivante montre l’apparence d’un élément dans les prévisions à dix jours selon les différentes dispositions.

Pour obtenir les différentes dispositions, l’exemple utilise des demandes de support CSS afin d’appliquer des styles en fonction de l’état d’affichage actuel. L’exemple définit un jeu de styles communs à tous les états d’affichage, et un autre jeu juste pour les dispositions quand la largeur est inférieure à 500 pixels :

/* Styles that are common across all view states */
    .tenDayGrid
    {
        width: 190px;
        height: 250px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: (auto)[5];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 1;
        -ms-grid-row: 4;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 5;
    }
}

/* Define the template for the width less than 500px */
@media (max-width:499px)
{
    .tenDayDate
    {
        font-weight: 600;
    }

    .tenDayDate > .day
    {
       font-weight: 200;
    }

    .tenDayHighLow
    {
        font-weight: 300;
    }

    .tenDayFeelsLike, .tenDayChanceOfSnow
    {
        font-weight: 300;
    }

    .tenDayGrid
    {
        width: 250px;
        height: 150px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: auto 1fr;
        -ms-grid-rows: (auto)[4];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 3;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 2;
        -ms-grid-row: 3;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 4;
    }
}

Utiliser JavaScript pour traiter les événements de redimensionnement de fenêtre, si nécessaire

Il est préférable de définir la plus grande partie possible de la disposition de votre application à l’aide de code CSS et de demandes de support. Toutefois, vous devrez parfois recourir à JavaScript pour gérer des problèmes de disposition que le code CSS est incapable de résoudre.

Par exemple, l’exemple d’application utilise un contrôle ListView WinJS pour afficher les éléments des prévisions à dix jours. En outre, il fait basculer ce contrôle ListView entre le mode liste et le mode grille selon la largeur de l’application. Quand l’exemple d’application a une largeur supérieure ou égale à 500 pixels, le contrôle ListView utilise le mode grille pour disposer les éléments verticalement et horizontalement afin de remplir le conteneur parent. Quand l’application a une largeur inférieure à 500 pixels, le contrôle ListView utilise le mode liste pour disposer les éléments selon une liste verticale.

Pour créer des dispositions spécifiques à l’affichage en JavaScript, inscrivez un écouteur d’événements pour l’événement de redimensionnement de fenêtre. Dans le code de l’écouteur d’événements, interrogez la propriété clientWidth et configurez la disposition en conséquence.

Dans l’exemple suivant, l’exemple de disposition adaptative avec CSS définit le contrôle ListView en mode grille. Si la largeur de la fenêtre est inférieure à 500 pixels, le contrôle ListView passe en mode liste. L’écouteur d’événements de l’application écoute l’événement de redimensionnement, puis interroge la propriété clientWidth et modifie le contrôle ListView en conséquence.

function ready(element, options) { 
        element.winControl = this; 
        var that = this; 
        WinJS.UI.process(element).done(function () { 
            that.listView = element.querySelector(".tenDayListView").winControl; 
            var itemTemplate = element.querySelector(".tenDayTemplate"); 
            var listViewLayout = new WinJS.UI.GridLayout(); 
 
            if (document.body.clientWidth <= 499) { 
                listViewLayout = new WinJS.UI.ListLayout(); 
            } 
            else { 
                element.style.opacity = "0"; 
            } 
 
            // ... 
 
            window.addEventListener("resize", tenDayResize, false); 
        }); 
    } 
 
    function tenDayResize(e) { 
 
        var listview = document.querySelector(".tenDayListView").winControl; 
 
        if (document.body.clientWidth <= 499) { 
            if (!(listview.layout instanceof WinJS.UI.ListLayout)) { 
                listview.layout = new WinJS.UI.ListLayout(); 
            } 
        } 
        else { 
            if (listview.layout instanceof WinJS.UI.ListLayout) { 
                listview.layout = new WinJS.UI.GridLayout(); 
            } 
        } 
    } 

Récapitulatif

Vous savez maintenant comment utiliser les langages HTML, CSS et JavaScript afin de créer une interface utilisateur fluide pour votre application, qui soit à la fois attrayante et performante dans toutes les tailles de fenêtre.

Rubriques associées

Exemple de disposition adaptative avec CSS

Exemple de demandes de support CSS

Ateliers pratiques pour Windows 8

Développement d’applications de lecteur

Spécification Media Queries

Contrôle ListView

Guide du développeur Internet Explorer 10