13 files changed, 988 insertions, 0 deletions
diff --git a/files/fr/web/css/@viewport/height/index.html b/files/fr/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..f836041357
--- /dev/null
+++ b/files/fr/web/css/@viewport/height/index.html
@@ -0,0 +1,76 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.</p>
+
+<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de longueur        */
+/* Type &lt;length&gt; ou &lt;percentage&gt; */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Deux valeurs de longueur */
+height: 320px 200px;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur relative ou absolue qui doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</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>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.height")}}</p>
diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html
new file mode 100644
index 0000000000..0269b84e53
--- /dev/null
+++ b/files/fr/web/css/@viewport/index.html
@@ -0,0 +1,120 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@viewport
+---
+<div>{{SeeCompatTable}}{{CSSRef}}</div>
+
+<p>La règle @<strong> <code>@viewport</code></strong> permet de configurer la zone d'affichage (le <em>viewport</em> en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran).</p>
+
+<p>Les longueurs exprimées en pourcentages sont calculées de façon relative à la <strong>zone d'affichage initiale</strong> c'est-à-dire le <em>viewport</em> avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.</p>
+
+<p>Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.</p>
+
+<pre class="brush: css no-line-numbers">@viewport {
+  width: device-width;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.</p>
+
+<p>Un facteur de zoom de <code>1.0</code> ou de <code>100%</code> signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à <code>1.0</code> ou à <code>100%</code>, cela signifie qu'on a dézoomé.</p>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<p>Les navigateurs sont supposés ignorer les descripteurs non reconnus.</p>
+
+<dl>
+ <dt>{{cssxref("@viewport/min-width","min-width")}}</dt>
+ <dd>Ce descripteur détermine la largeur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/max-width","max-width")}}</dt>
+ <dd>Ce descripteur détermine la largeur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/width","width")}}</dt>
+ <dd>Ce descripteur est un raccourci qui permet de définir <code>min-width</code> et <code>max-width</code>.</dd>
+ <dt>{{cssxref("@viewport/min-height","min-height")}}</dt>
+ <dd>Ce descripteur détermine la hauteur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/max-height","max-height")}}</dt>
+ <dd>Ce descripteur détermine la hauteur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/height","height")}}</dt>
+ <dd>Ce descripteur est un raccourci qui permet de définir <code>min-height</code> et <code>max-height</code>.</dd>
+ <dt>{{cssxref("@viewport/zoom","zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom initial.</dd>
+ <dt>{{cssxref("@viewport/min-zoom","min-zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom minimal.</dd>
+ <dt>{{cssxref("@viewport/max-zoom","max-zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom maximal.</dd>
+ <dt>{{cssxref("@viewport/user-zoom","user-zoom")}}</dt>
+ <dd>Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.</dd>
+ <dt>{{cssxref("@viewport/orientation","orientation")}}</dt>
+ <dd>Ce descripteur contrôle l'orientation du document.</dd>
+ <dt>{{cssxref("@viewport/ viewport-fit", "viewport-fit")}}</dt>
+ <dd>Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}</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>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}} et plus précisément <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">Utiliser la balise <code>meta</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
+</ul>
diff --git a/files/fr/web/css/@viewport/max-height/index.html b/files/fr/web/css/@viewport/max-height/index.html
new file mode 100644
index 0000000000..646a3e2e8d
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-height/index.html
@@ -0,0 +1,76 @@
+---
+title: max-height
+slug: Web/CSS/@viewport/max-height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>max-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+max-height: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+max-height: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  max-height: 600px;
+}</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>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.max-height")}}</p>
diff --git a/files/fr/web/css/@viewport/max-width/index.html b/files/fr/web/css/@viewport/max-width/index.html
new file mode 100644
index 0000000000..30e0ee9e78
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-width/index.html
@@ -0,0 +1,75 @@
+---
+title: max-width
+slug: Web/CSS/@viewport/max-width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>max-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (<em>viewport</em>) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du <em>viewport</em> initial.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+max-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-width: 400px;
+max-width: 50em;
+max-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+max-width: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  max-width: 600px;
+}</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>{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.max-width")}}</p>
diff --git a/files/fr/web/css/@viewport/max-zoom/index.html b/files/fr/web/css/@viewport/max-zoom/index.html
new file mode 100644
index 0000000000..605f8a25fb
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-zoom/index.html
@@ -0,0 +1,69 @@
+---
+title: max-zoom
+slug: Web/CSS/@viewport/max-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>max-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p>
+
+<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+max-zoom: auto;
+
+/* Nombres : type &lt;number&gt; */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* Valeurs proportionnelles : type &lt;percentage&gt; */
+max-zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("&lt;number&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.max-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/min-height/index.html b/files/fr/web/css/@viewport/min-height/index.html
new file mode 100644
index 0000000000..016800c563
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-height/index.html
@@ -0,0 +1,76 @@
+---
+title: min-height
+slug: Web/CSS/@viewport/min-height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>min-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+min-height: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-height: 400px;
+min-height: 50em;
+min-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+min-height: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-height: 600px;
+}</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>{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.min-height")}}</p>
diff --git a/files/fr/web/css/@viewport/min-width/index.html b/files/fr/web/css/@viewport/min-width/index.html
new file mode 100644
index 0000000000..d4e7177979
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-width/index.html
@@ -0,0 +1,75 @@
+---
+title: min-width
+slug: Web/CSS/@viewport/min-width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>min-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+min-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-width: 400px;
+min-width: 50em;
+min-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+min-width: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 600px;
+}</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>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.min-width")}}</p>
diff --git a/files/fr/web/css/@viewport/min-zoom/index.html b/files/fr/web/css/@viewport/min-zoom/index.html
new file mode 100644
index 0000000000..03c28cdb64
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-zoom/index.html
@@ -0,0 +1,69 @@
+---
+title: min-zoom
+slug: Web/CSS/@viewport/min-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>min-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p>
+
+<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+min-zoom: auto;
+
+/* Nombres : type &lt;number&gt; */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* Valeurs proportionnelles : type &lt;percentage&gt; */
+min-zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("&lt;number&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.min-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/orientation/index.html b/files/fr/web/css/@viewport/orientation/index.html
new file mode 100644
index 0000000000..24db5063c7
--- /dev/null
+++ b/files/fr/web/css/@viewport/orientation/index.html
@@ -0,0 +1,64 @@
+---
+title: orientation
+slug: Web/CSS/@viewport/orientation
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+orientation: auto;
+orientation: portrait;
+orientation: landscape;
+</pre>
+
+<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd>
+ <dt><code>portrait</code></dt>
+ <dd>Le document devrait être verrouillé en mode portrait.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Le document devrait être verrouillé en mode paysage.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.orientation")}}</p>
diff --git a/files/fr/web/css/@viewport/user-zoom/index.html b/files/fr/web/css/@viewport/user-zoom/index.html
new file mode 100644
index 0000000000..5a7d6eed73
--- /dev/null
+++ b/files/fr/web/css/@viewport/user-zoom/index.html
@@ -0,0 +1,68 @@
+---
+title: user-zoom
+slug: Web/CSS/@viewport/user-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>user-zoom</code></strong>, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (<em>viewport</em>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+user-zoom: zoom;
+user-zoom: fixed;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>zoom</code></dt>
+ <dd>L'utilisateur peut zoomer/dézoomer.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>L'utilisateur ne peut ni zoomer ni dézoomer.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Accessibilité</h2>
+
+<p>Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">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>{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.user-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/viewport-fit/index.html b/files/fr/web/css/@viewport/viewport-fit/index.html
new file mode 100644
index 0000000000..6c07bfb5cc
--- /dev/null
+++ b/files/fr/web/css/@viewport/viewport-fit/index.html
@@ -0,0 +1,74 @@
+---
+title: viewport-fit
+slug: Web/CSS/@viewport/viewport-fit
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>viewport-fit</code></strong>, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (<em>viewport</em>) d'un document recouvre l'écran.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css; no-line-numbers">/* Valeurs avec un mot-clé */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.</dd>
+ <dt><code>contain</code></dt>
+ <dd>La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.</dd>
+ <dt><code>cover</code></dt>
+ <dd>La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser <a href="/en-US/docs/Web/CSS/env">des variables pour le placement en zone sûre</a> afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">auto | contain | cover</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>When using the <code>viewport-fit</code> descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the <a href="/en-US/docs/Web/CSS/env">safe area inset variables</a>.</p>
+
+<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>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.viewport-fit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("env", "env()")}}</li>
+</ul>
diff --git a/files/fr/web/css/@viewport/width/index.html b/files/fr/web/css/@viewport/width/index.html
new file mode 100644
index 0000000000..425c686ccc
--- /dev/null
+++ b/files/fr/web/css/@viewport/width/index.html
@@ -0,0 +1,75 @@
+---
+title: width
+slug: Web/CSS/@viewport/width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.</p>
+
+<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de longueur        */
+/* Type &lt;length&gt; ou &lt;percentage&gt; */
+width: auto;
+width: 320px;
+width: 15em;
+
+/* Deux valeurs de longueur */
+width: 320px 200px;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur relative ou absolue qui doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  width: 500px;
+}</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>{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.width")}}</p>
diff --git a/files/fr/web/css/@viewport/zoom/index.html b/files/fr/web/css/@viewport/zoom/index.html
new file mode 100644
index 0000000000..c9b65e996e
--- /dev/null
+++ b/files/fr/web/css/@viewport/zoom/index.html
@@ -0,0 +1,71 @@
+---
+title: zoom
+slug: Web/CSS/@viewport/zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>zoom</code></strong>, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.</p>
+
+<p>Un niveau de zoom égal à <code>1.0</code> ou <code>100%</code> n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+zoom: auto;
+
+/* Valeurs numériques */
+/* Type &lt;number&gt;      */
+zoom: 0.8;
+zoom: 2.0;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("&lt;percentage&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<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.viewport.zoom")}}</p>