Cette page vous a-t-elle été utile ?
Votre avis sur ce contenu est important. N'hésitez pas à nous faire part de vos commentaires.
Vous avez d'autres commentaires ?
1500 caractères restants
Écouteurs de requête de média

Écouteurs de requête de média

Windows Internet Explorer 9 a introduit la prise en charge des requêtes de média CSS3 (Cascading Style Sheets de niveau 3) pour modifier le style des éléments, tel que la taille de la police ou les marges, en fonction de l’appareil ou du média. Nouveaux dans Internet Explorer 10 et les applications du Windows Store en JavaScript, les écouteurs de requête de média vous permettent d’utiliser un script pour réagir aux modifications apportées au média ou à l’environnement dans lequel s’exécute votre page.

Les écouteurs de requête de média sont spécifiés dans la section 4.1 du module CSSOM View, qui n’est pour l’instant qu’une ébauche proposée par le W3C (World Wide Web Consortium).

Pour obtenir une démonstration pratique des écouteurs de requête de média, voir CSS3 Media Queries & Media Query Listeners sur le site IE Test Drive.

Les écouteurs de requête de média activent deux nouvelles fonctionnalités décrites plus loin dans cette rubrique :

  • Évaluation d’une requête de média au moment de l’exécution avec JavaScript
  • Abonnement des écouteurs aux modifications dans l’évaluation de la requête de média

Cette rubrique contient les sections suivantes :

Création d’un écouteur de requête de média

Pour évaluer une requête de média au moment de l’exécution, un objet MediaQueryList est créé à l’aide de la nouvelle méthode matchMedia.

MéthodeDescription

matchMedia(sList)

Accepte une chaîne qui contient une ou plusieurs requêtes de média et retourne un objet MediaQueryList.

 

La méthode matchMedia accepte une chaîne de requête de média et retourne un objet MediaQueryList. L’exemple suivant crée une requête de média qui vérifie si la largeur ou la hauteur d’une fenêtre est inférieure à une certaine taille.


mql = window.msMatchMedia("(min-width:450px)");

L’objet MediaQueryList prend en charge les propriétés suivantes.

PropriétéDescription

matches

Retourne "true" si la liste des requêtes de média correspond à l’état de la fenêtre active ; retourne "false" si ce n’est pas le cas.

media

Retourne la version sérialisée de la liste des requêtes de média utilisée pour créer l’objet MediaQueryList.

 

L’objet MediaQueryList prend en charge les méthodes suivantes.

MéthodeDescription

addListener(callback)

Ajoute la fonction de rappel à la liste des écouteurs pour l’objet MediaQueryList. La fonction est appelée à chaque fois que l’évaluation de la requête de média change.

removeListener(callback)

Supprime la fonction de rappel donnée de la liste des écouteurs pour l’objet MediaQueryList.

 

La propriété matches est une valeur booléenne qui retourne une évaluation de la requête de média. À partir de l’exemple ci-dessus, matches retourne true si la largeur de la fenêtre est supérieure ou égale à la largeur minimale spécifiée.


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

Abonnement des écouteurs de requête de média

Pour détecter les modifications de requêtes de média, vous pouvez abonner un écouteur à un objet MediaQueryList. La méthode addListener nécessite une fonction de rappel et l’invoque quand la requête de média change d’évaluation. À partir de la requête de média précédente, l’exemple suivant abonne un écouteur aux modifications dans la requête de média.


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

L’écouteur invoque la fonction de rappel à chaque fois que l’état du média change. Si la fenêtre est redimensionnée pour être plus étroite que la valeur spécifiée de l’attribut minwidth, la fonction de rappel est invoquée. Elle est de nouveau invoquée quand la fenêtre devient plus large que la valeur spécifiée de l’attribut min-width. L’objet MediaQueryList est transmis en tant que paramètre à la fonction de rappel.

Rubriques associées

DOM (Document Object Model)
Guide du développeur Internet Explorer 10

 

 

Afficher:
© 2015 Microsoft