From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/fr/web/css/@media/shape/index.html | 97 ++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 files/fr/web/css/@media/shape/index.html

(limited to 'files/fr/web/css/@media/shape')

diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html
new file mode 100644
index 0000000000..ffbbd65e74
--- /dev/null
+++ b/files/fr/web/css/@media/shape/index.html
@@ -0,0 +1,97 @@
+---
+title: shape
+slug: Web/CSS/@media/shape
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@media/shape
+---
+<div>{{CSSRef}} {{Non-standard_header}}</div>
+
+<p>La caractéristique média <strong><code>shape</code></strong> peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>shape</code> peut prendre une valeur parmi deux valeurs définies : <code>rect</code> qui représente un écran rectangulaire ou <code>round</code> qui représente un écran circulaire, ovale ou elliptique.</p>
+
+<dl>
+ <dt><code><dfn>rect</dfn></code></dt>
+ <dd>La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.</dd>
+ <dt><code><dfn>round</dfn></code></dt>
+ <dd>La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p>
+</div>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;Coucou le monde !&lt;/h1&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">h1 {
+  text-align: left;
+}
+
+@media (shape: rect) {
+  h1 {
+    text-align: left;
+  }
+}
+
+@media (shape: round) {
+  h1 {
+    text-align: center;
+  }
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Feuille_de_style_spécifique">Feuille de style spécifique</h3>
+
+<p>Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.</p>
+
+<pre class="brush: html"><code>&lt;head&gt;
+    &lt;link rel="stylesheet" href="default.css" /&gt;</code>
+<code>    &lt;link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /&gt;
+    &lt;link media="screen and (shape: round)" rel="stylesheet" href="round.css" /&gt;
+&lt;/head&gt;
+</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><em><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></em></td>
+   <td>Brouillon</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.shape")}}</p>
-- 
cgit v1.2.3-54-g00ecf