shape

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La caractéristique média shape peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.

Syntaxe

La caractéristique shape peut prendre une valeur parmi deux valeurs définies : rect qui représente un écran rectangulaire ou round qui représente un écran circulaire, ovale ou elliptique.

rect
La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.
round
La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.

Exemples

Note : Aucun navigateur n'implémente actuellement cette fonctionnalité.

Exemple simple

HTML

<h1>Coucou le monde !</h1>

CSS

h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}

Résultat

Feuille de style spécifique

Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.

<head>
    <link rel="stylesheet" href="default.css" />
    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>

Spécifications

Spécification État Commentaires
CSS Round Display Level 1 Brouillon Définition initiale.

Compatibilité des navigateurs

No compatibility data found. Please contribute data for "css.at-rules.media.shape" (depth: 1) to the MDN compatibility data repository.