percentage

  • Raccourci de la révision : CSS/pourcentage
  • Titre de la révision : pourcentage
  • ID de la révision : 451861
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

Le type de données CSS <pourcentage> représente une valeur en pourcentage. De nombreuses propriétés CSS prennent des valeurs en pourcentages, souvent pour déterminer des tailles en fonction de leurs parents. Les pourcentages sont formés d'un {{ Xref_cssnumber() }} immédiatement suivi par le signe pourcentage %. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.

De nombreuses propriétés CSS utilisent des pourcentages, comme {{ Cssxref("width") }}, {{ Cssxref("margin") } et {{ Cssxref("padding") }}. Les pourcentages peuvent aussi être vus avec {{ Cssxref("font-size") }}, où la taille du texte est directement en relation avec celle de son parent.

Note : Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur {{ Xref_csslength() }}, sera accessible sur la propriété héritée, pas la valeur en pourcentage.

Interpolation

Les valeurs du type <pourcentage> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la {{ Cssxref("timing-function","fonction de temporisation") }} associée à l'animation.

Exemples

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
</div> 

L'HTML ci-dessus produira :

Width: 50%, Left margin: 20%
Width: 30%, Left margin: 60%

 

<div style="font-size:18px;">
  Texte taille normal (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div> 

L'HTML ci-dessus produira :

Texte taille normal (18px) 50% 200%

Spécifications

Spécification Statut Commentaires
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }} {{ Spec2('CSS3 Values') }} Aucun changement significatif depuis CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }} {{ Spec2('CSS2.1') }} Aucun changement par rapport à CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }} {{ Spec2('CSS1') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support basique 1.0 1.0 (1.0) <=5.0 {{ CompatVersionUnknown() }} 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support basique {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

Voir également

Types de données CSS : {{ CSSDataTypes() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>Le type de données <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>&lt;pourcentage&gt;</code> représente une valeur en pourcentage. De nombreuses <a href="/fr/docs/CSS/Reference">propriétés CSS</a> prennent des valeurs en pourcentages, souvent pour déterminer des tailles en fonction de leurs parents. Les pourcentages sont formés d'un {{ Xref_cssnumber() }} immédiatement suivi par le signe pourcentage <code>%</code>. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.</p>
<p>De nombreuses propriétés CSS utilisent des pourcentages, comme {{ Cssxref("width") }}, {{ Cssxref("margin") } et {{ Cssxref("padding") }}. Les pourcentages peuvent aussi être vus avec {{ Cssxref("font-size") }}, où la taille du texte est directement en relation avec celle de son parent.</p>
<div class="note">
  <p><strong>Note :</strong> Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur {{ Xref_csslength() }}, sera accessible sur la propriété héritée, pas la valeur en pourcentage.</p>
</div>
<h2>Interpolation</h2>
<p>Les valeurs du type <code>&lt;pourcentage&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la {{ Cssxref("timing-function","fonction de temporisation") }} associée à l'animation.</p>
<h2 id="Exemples" name="Exemples">Exemples</h2>
<pre class="brush: html">
&lt;div style="background-color:#0000FF;"&gt;
  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;Width: 50%, Left margin: 20%&lt;/div&gt;
  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;Width: 30%, Left margin: 60%&lt;/div&gt;
&lt;/div&gt; 
</pre>
<p>L'HTML ci-dessus produira :</p>
<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">
    Width: 50%, Left margin: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">
    Width: 30%, Left margin: 60%</div>
</div>
<p>&nbsp;</p>
<pre class="brush: html">
&lt;div style="font-size:18px;"&gt;
  Texte taille normal (18px)
  &lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;
  &lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;
&lt;/div&gt; 
</pre>
<p>L'HTML ci-dessus produira :</p>
<div style="font-size:18px;">
  Texte taille normal (18px) <span style="font-size:50%">50%</span> <span style="font-size:200%">200%</span></div>
<h2 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;') }}</td>
      <td>{{ Spec2('CSS3 Values') }}</td>
      <td>Aucun changement significatif depuis CSS Level 2 (Revision 1)</td>
    </tr>
    <tr style="vertical-align: top;">
      <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;') }}</td>
      <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
      <td style="vertical-align: top;">Aucun changement par rapport à CSS Level 1</td>
    </tr>
    <tr>
      <td style="vertical-align: top;">{{ SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;') }}</td>
      <td style="vertical-align: top;">{{ Spec2('CSS1') }}</td>
      <td style="vertical-align: top;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support basique</td>
        <td>1.0</td>
        <td>1.0 (1.0)</td>
        <td>&lt;=5.0</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>1.0 (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support basique</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h2>
<p>Types de données CSS : {{ CSSDataTypes() }}</p>
Revenir à cette révision