diff options
Diffstat (limited to 'files/fr/web/css/width/index.md')
| -rw-r--r-- | files/fr/web/css/width/index.md | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md new file mode 100644 index 0000000000..b61bd7e63d --- /dev/null +++ b/files/fr/web/css/width/index.md @@ -0,0 +1,211 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>width</code></strong> permet de définir la largeur de la <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">boîte du contenu</a> d'un élément. Par défaut, sa valeur est <strong><code>auto</code></strong>, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut <code>border-box</code>, la valeur appliquée incluera les dimensions de la boîte d'encadrement (<em>border</em>) et de la boîte de remplissage (<em>padding</em>).</p> + +<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> + +<div class="note"> +<p><strong>Note :</strong> Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeurs de longueur */ +/* Type <length> */ +width: 300px; +width: 25em; + +/* Valeurs en pourcentages */ +/* Type <percentage> */ +width: 75%; + +/* Avec un mot-clé */ +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Valeurs globales */ +width: inherit; +width: initial; +width: unset; +</pre> + +<p>La propriété <code>width</code> se définit avec</p> + +<ul> + <li>un des mots-clés suivants : <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li> + <li>ou une valeur de longeur (<code><a href="#length"><length></a></code>) ou de pourcentage (<code><a href="#percentage"><percentage></a></code>) éventuellement suivie par le mots-clé <code><a href="#border-box">border-box</a></code> ou <code><a href="#content-box">content-box</a></code>.</li> +</ul> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Voir {{cssxref("<length>")}} pour les unités qui peuvent être utilisées.</dd> + <dt><code><percentage></code></dt> + <dd>Permet de définir la largeur en pourcentages ({{cssxref("<percentage>")}}) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.</dd> + <dt><code>border-box</code>{{experimental_inline}}</dt> + <dd>Si cette valeur est présente, la longueur ({{cssxref("<length>")}}) ou le pourcentage ({{cssxref("<percentage>")}}) est appliqué à la boîte de bordure (<em>border</em>) de l'élément.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Si cette valeur est présente, la longueur ({{cssxref("<length>")}}) ou le pourcentage ({{cssxref("<percentage>")}}) est appliqué à la boîte de contenu de l'élément.</dd> + <dt><code>auto</code></dt> + <dd>Le navigateur calculera et sélectionnera une largeur pour l'élément.</dd> + <dt><code>fill</code> {{experimental_inline}}</dt> + <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>La largeur intrinsèque préférée.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>La largeur intrinsèque minimum.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (<em>padding</em>).</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>La quantité la plus grande entre : + <ul> + <li>La largeur intrinsèque minimum</li> + <li>Le minimum entre la largeur intrinsèque préférée et la largeur disponible</li> + </ul> + </dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Valeur_par_défaut">Valeur par défaut</h3> + +<pre class="brush:css">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html"><p class="goldie">La communauté Mozilla ressemble à un panda roux.</p></pre> + +<p>{{EmbedLiveSample('Valeur_par_défaut', '500px', '64px')}}</p> + +<h3 id="En_utilisant_les_pixels_et_les_em">En utilisant les pixels et les <code>em</code></h3> + +<pre class="brush: css">.longueur_px { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.longueur_em { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="longueur_px">Largeur mesurée en pixels</div> +<div class="longueur_em">Largeur mesurée en ems</div></pre> + +<p>{{EmbedLiveSample('En_utilisant_les_pixels_et_les_em', '500px', '64px')}}</p> + +<h3 id="En_utilisant_les_pourcentages">En utilisant les pourcentages</h3> + +<pre class="brush: css">.pourcent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="pourcent">Largeur exprimée en pourcentages</div></pre> + +<p>{{EmbedLiveSample('En_utilisant_les_pourcentages', '500px', '64px')}}</p> + +<h3 id="En_utilisant_max-content">En utilisant <code>max-content</code></h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit utilisent un nom non-standard */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">La communauté Mozilla ressemble à un panda roux.</p></pre> + +<p>{{EmbedLiveSample('En_utilisant_max-content', '500px', '64px')}}</p> + +<h3 id="En_utilisant_min-content">En utilisant <code>min-content</code></h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">La communauté Mozilla ressemble à un panda roux.</p></pre> + +<p>{{EmbedLiveSample('En_utilisant_min-content', '500px', '155px')}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Il faut s'assurer que les éléments sur lesquels on utilise <code>width</code> ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte.</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">Comprendre les règles WCAG 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</em> (en anglais)</a></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('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> et <code>content-box</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td><code>width</code> peut désormais être animée.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Précision sur les éléments auxquels peuvent être appliquée la propriété.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.properties.width")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte">Le modèle de boîtes</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li> +</ul> |