initial commit

4 files changed, 393 insertions, 0 deletions

diff --git a/files/fr/web/css/@page/bleed/index.html b/files/fr/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..3ff61db95c
--- /dev/null
+++ b/files/fr/web/css/@page/bleed/index.html
@@ -0,0 +1,79 @@
+---
+title: bleed
+slug: Web/CSS/@page/bleed
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>bleed</code></strong>, associé à la règle @ {{cssxref("@page")}}, définit l'espace duquel le contenu peut dépasser de la boîte de la page. Ce descripteur aura un effet uniquement si le descripteur {{cssxref("@page/marks","marks")}} est utilisé pour afficher les marques de coupure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+bleed: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur correspond à <code>6pt</code> si {{cssxref("marks")}} vaut <code>crop</code>. Dans les autres cas, cette valeur vaut zéro.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Cette valeur indique la distance, dans chaque direction, de laquelle le contenu peut dépasser de la boîte de la page. Les valeurs négatives sont autorisées mais les différentes implémentations fixent différentes limites.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  bleed: 1cm;
+  marks: crop;
+}
+</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 Paged Media", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</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.page.bleed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html
new file mode 100644
index 0000000000..c056ac3ae2
--- /dev/null
+++ b/files/fr/web/css/@page/index.html
@@ -0,0 +1,105 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p>La règle @ <strong><code>@page</code></strong> est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle <code>@page</code> ne permet par de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.</p>
+
+<pre class="brush: css no-line-numbers">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<p>La règle @ <code>@page</code> peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.</p>
+
+<div class="note"><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("&lt;length&gt;")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/@page/marks">marks</a></code></dt>
+ <dd>Ajoute des marques pour la découpe ou l'alignement des pages du document.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page :first {
+  margin: 2cm 3cm;
+} </pre>
+
+<p>Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à <code>@page</code> :</p>
+
+<ul>
+ <li>{{cssxref(":blank")}}</li>
+ <li>{{cssxref(":first")}}</li>
+ <li>{{cssxref(":left")}}</li>
+ <li>{{cssxref(":right")}}</li>
+ <li>{{cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<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 Logical Properties', '#logical-page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des sélecteurs de page <code>:recto</code> et <code>:verso</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucun changement depuis  {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle <code>@page</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</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.page")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">Le bug de suivi Mozilla pour l'ensemble des fonctionnalités associées aux médias paginés.</a></li>
+</ul>
diff --git a/files/fr/web/css/@page/marks/index.html b/files/fr/web/css/@page/marks/index.html
new file mode 100644
index 0000000000..8ac0d906f5
--- /dev/null
+++ b/files/fr/web/css/@page/marks/index.html
@@ -0,0 +1,82 @@
+---
+title: marks
+slug: Web/CSS/@page/marks
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/marks
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>marks</code></strong>, associé à la règle @ {{cssxref("@page")}}, est utilisé pour afficher des marques de coupure (<em>crop marks</em>) ou des croix d'alignement (<em>cross marks</em>). Les marques de coupure sont utilisées pour massicoter les pages et les croix d'alignement sont utilisées afin d'aligner plusieurs feuilles entre elles.</p>
+
+<p>Les marques de coupure et d'alignement sont imprimées en dehors de la boîte de la page. Pour qu'il y ait l'espace nécessaire au dessin de ces symboles, les pages finales doivent être légèrement plus grandes que la boîtes de la page.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>crop</code></dt>
+ <dd>Les marques de découpe seront affichées sur la page finale.</dd>
+ <dt><code>cross</code></dt>
+ <dd>Les marques d'alignement seront affichées sur la page finale.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune marque ne sera affichée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  marks: crop cross;
+}
+</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 Paged Media', '#marks', 'marks')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cette propriété CSS avait initialement été proposée pour la spécification CSS de niveau 2 mais a été abandonnée lors de la première révision.</p>
+
+<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.page.marks")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html
new file mode 100644
index 0000000000..5d21dafcd1
--- /dev/null
+++ b/files/fr/web/css/@page/size/index.html
@@ -0,0 +1,127 @@
+---
+title: size
+slug: Web/CSS/@page/size
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>size</code></strong>, associé à la règle @ {{cssxref("@page")}}, permet de définir les dimensions et l'orientation de la boîte utilisée pour représenter une page. La plupart du temps, cette taille correspondra à la totalité de la taille de la page imprimée.</p>
+
+<p>Les dimensions de cette boîte peuvent être définies de façon absolues ou relatives (dans ce cas, la page occupera l'espace disponible).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Des mots-clés qui peuvent être utilisées
+   pour remplir l'espace disponible         */
+size: auto;
+size: portrait;
+size: landscape;
+
+/* Des valeurs de longueur */
+/* Type &lt;length&gt;           */
+/* 1 valeur : hauteur = largeur */
+size: 6in;
+
+/* 2 valeurs : la largeur puis la hauteur */
+size: 4in 6in;
+
+/* Des mots-clés qui représentent des */
+/* dimensions absolues                */
+size: A4;
+size: B5;
+size: JIS-B4;
+size: letter;
+
+/* Une déclaration incluant la taille et l'orientation */
+size: A4 portrait;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).</dd>
+ <dt><code>portrait</code></dt>
+ <dd>Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (cf. {{cssxref("&lt;length&gt;")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.</dd>
+ <dt><code>&lt;page-size&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt><code>A5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.</dd>
+  <dt><code>A4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).</dd>
+  <dt><code>A3</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.</dd>
+  <dt><code>B5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.</dd>
+  <dt><code>B4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.</dd>
+  <dt><code>JIS-B5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.</dd>
+  <dt><code>JIS-B4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.</dd>
+  <dt><code>letter</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.</dd>
+  <dt><code>legal</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.</dd>
+  <dt><code>ledger</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  size: 4cm 6cm landscape;
+}
+</pre>
+
+<pre class="brush: css">@media print {
+  @page {
+    size: 50mm 150mm;
+  }
+}</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 Paged Media', '#size', 'size')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</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.page.size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+</ul>