shape
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La caractéristique média CSS shape peut être utilisée pour tester la forme de l'appareil afin de distinguer les affichages rectangulaires et 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.
Exemples
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;
}
}
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.
html
<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
| Specification |
|---|
| CSS Round Display Level 1 # shape-media-feature |
Compatibilité des navigateurs
Actuellement, aucun navigateur ne prend en charge cette fonctionnalité.