initial commit

1 files changed, 153 insertions, 0 deletions

diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html
new file mode 100644
index 0000000000..3b215af7ef
--- /dev/null
+++ b/files/fr/web/css/resize/index.html
@@ -0,0 +1,153 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/resize
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>resize</code></strong> permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Valeurs globales */
+resize: inherit;
+resize: initial;
+resize: unset;
+</pre>
+
+<p>La propriété <code>resize</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.</dd>
+ <dt><code>both</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).</dd>
+ <dt><code>vertical</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).</dd>
+ <dt><code>block</code> {{experimental_inline}}</dt>
+ <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.</dd>
+ <dt><code>inline</code> {{experimental_inline}}</dt>
+ <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Désactiver_le_redimensionnement_des_éléments_textarea">Désactiver le redimensionnement des éléments <code>textarea</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :</p>
+
+<pre class="brush: css">textarea.exemple {
+  resize: none;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;textarea class="exemple"&gt;Saisir du texte ici.&lt;/textarea&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}</p>
+
+<h3 id="Utiliser_resize_sur_des_éléments_quelconques">Utiliser <code>resize</code> sur des éléments quelconques</h3>
+
+<p>La propriété <code>resize</code> peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte {{HTMLElement("div")}} redimensionnable qui contient un paragraphe (({{HTMLElement("p")}}) lui-même redimensionnable) :</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.redimensionnable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="redimensionnable"&gt;
+  &lt;p class="redimensionnable"&gt;
+    Ce paragraphe peut être redimensionné car la propriété
+    CSS resize vaut 'both' sur cet élément.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>block</code> et <code>inline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</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.properties.resize")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>