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

html

<h1>Coucou le monde !</h1>

CSS

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.