calc

  • Raccourci de la révision : CSS/calc
  • Titre de la révision : calc
  • ID de la révision : 355661
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La fonction CSS calc() peut être utilisée à n'importe quel endroit ou une {{ Xref_csslength() }} est nécessaire. Grâce à calc(), il est possible de réaliser des calculs pour déterminer la taille et la forme d'objets.

Il est possible d'utiliser calc() dans une autre fonction calc().

Syntaxe

 calc(expression)

Valeurs

expression
Une expression mathématique, donc le résultat est utilisé comme {{ Xref_csslength() }}.

Expressions

L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants :

+
Addition
-
Soustraction
*
Multiplication
/
Division. Il n'est pas possible de divisier par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante.

L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.

Note : une division par zéro aboutit à une erreur qui est générée par le parseur HTML.

Note : les opérateurs + et - doivent toujours être entouré d'espaces. Par exemple l'opérande de calc(50% -8px) sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de calc(50% - 8px) est une valeur en pourcentage suivie d'un signe moins et d'une longueur.

Les opérateurs * et / ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommendé.

Exemples

Positionner un objet sur l'écran avec une marge

calc() rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS créé une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bordes de la fenêtre :

.banniere {
  position:absolute;
  left: 40px;
  width: -moz-calc(100% - 80px);
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

{{ CSSLiveSample("-moz-calc1.html") }}

Dimensionner automatiquement les champs d'un formulaire pour s'ajuster au conteneur

Un autre cas d'utilisaion de calc() est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.

Regardons un peu le CSS :

input {
  padding: 2px;
  display: block;
  width: -moz-calc(100% - 1em);
  width: -webkit-calc(100% - 1em);
  width: calc(100% - 1em);
}

#boiteformulaire {
  width: -moz-calc(100%/6);
  width: -webkit-calc(100%/6);
  width: calc(100%/6);
  border: 1px solid black;
  padding: 4px;
}

Dans ce cas, le formulaire est lui même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons calc() pour définir qu'ils doivent être de la largeur de leur conteneur moins 1 em. Enfin, le HTML suivant utilise le CSS défini :

<form>
  <div id="boiteformulaire">
  <label>Tapez quelque chose :</label>
  <input type="text">
  </div>
</form>

{{ CSSLiveSample("-moz-calc2.html") }}

Spécifications

Spécification État Commentaire
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} {{ Spec2('CSS3 Values') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 19 (WebKit 536.3) {{property_prefix("-webkit")}} {{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}
{{CompatGeckoMobile("16")}}
9 - 6 {{property_prefix("-webkit")}} (buggy)
Sur les points d'arrêt des dégradés 19 (WebKit 536.3) {{property_prefix("-webkit")}} {{CompatGeckoDesktop("19")}} 9 - 6 {{property_prefix("-webkit")}} (buggy)
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}
{{CompatGeckoMobile("16")}}
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Sur les points d'arrêt des dégradés {{ CompatUnknown() }} {{CompatGeckoMobile("19")}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La fonction <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>calc()</code> peut être utilisée à n'importe quel endroit ou une {{ Xref_csslength() }} est nécessaire. Grâce à <code>calc()</code>, il est possible de réaliser des calculs pour déterminer la taille et la forme d'objets.</p>
<p>Il est possible d'utiliser <code>calc()</code> dans une autre fonction <code>calc()</code>.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
 calc(expression)
</pre>
<h2 id="Valeurs">Valeurs</h2>
<dl>
  <dt>
    expression</dt>
  <dd>
    Une expression mathématique, donc le résultat est utilisé comme {{ Xref_csslength() }}.</dd>
</dl>
<h3 id="Expressions">Expressions</h3>
<p>L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants :</p>
<dl>
  <dt>
    +</dt>
  <dd>
    Addition</dd>
  <dt>
    -</dt>
  <dd>
    Soustraction</dd>
  <dt>
    *</dt>
  <dd>
    Multiplication</dd>
  <dt>
    /</dt>
  <dd>
    Division. Il n'est pas possible de divisier par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante.</dd>
</dl>
<p>L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.</p>
<div class="note">
  <p><strong>Note</strong> : une division par zéro aboutit à une erreur qui est générée par le parseur HTML.</p>
</div>
<div class="note">
  <p><strong>Note</strong> : les opérateurs <code>+</code> et <code>-</code> doivent toujours être entouré d'espaces. Par exemple l'opérande de <code>calc(50% -8px)</code> sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de <code>calc(50% - 8px)</code> est une valeur en pourcentage suivie d'un signe moins et d'une longueur.</p>
  <p>Les opérateurs <code>*</code> et <code>/</code> ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommendé.</p>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="Positionner_un_objet_sur_l'.C3.A9cran_avec_une_marge">Positionner un objet sur l'écran avec une marge</h3>
<p><code>calc()</code> rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS créé une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bordes de la fenêtre :</p>
<pre class="brush: css">
.banniere {
  position:absolute;
  left: 40px;
  width: -moz-calc(100% - 80px);
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
</pre>
<p>{{ CSSLiveSample("-moz-calc1.html") }}</p>
<h3 id="Dimensionner_automatiquement_les_champs_d'un_formulaire_pour_s'ajuster_au_conteneur">Dimensionner automatiquement les champs d'un formulaire pour s'ajuster au conteneur</h3>
<p>Un autre cas d'utilisaion de <code>calc()</code> est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.</p>
<p>Regardons un peu le CSS :</p>
<pre class="brush: css">
input {
  padding: 2px;
  display: block;
  width: -moz-calc(100% - 1em);
  width: -webkit-calc(100% - 1em);
  width: calc(100% - 1em);
}

#boiteformulaire {
  width: -moz-calc(100%/6);
  width: -webkit-calc(100%/6);
  width: calc(100%/6);
  border: 1px solid black;
  padding: 4px;
}
</pre>
<p>Dans ce cas, le formulaire est lui même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons <code>calc()</code> pour définir qu'ils doivent être de la largeur de leur conteneur moins 1 em. Enfin, le HTML suivant utilise le CSS défini :</p>
<pre class="brush: html">
&lt;form&gt;
  &lt;div id="boiteformulaire"&gt;
  &lt;label&gt;Tapez quelque chose :&lt;/label&gt;
  &lt;input type="text"&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>
<p>{{ CSSLiveSample("-moz-calc2.html") }}</p>
<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">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
      <td>{{ Spec2('CSS3 Values') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}</td>
        <td>{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}<br />
          {{CompatGeckoMobile("16")}}</td>
        <td>9</td>
        <td>-</td>
        <td>6 {{property_prefix("-webkit")}} (buggy)</td>
      </tr>
      <tr>
        <td>Sur les points d'arrêt des dégradés</td>
        <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}</td>
        <td>{{CompatGeckoDesktop("19")}}</td>
        <td><code>9</code></td>
        <td>-</td>
        <td>6 {{property_prefix("-webkit")}} (buggy)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}<br />
          {{CompatGeckoMobile("16")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Sur les points d'arrêt des dégradés</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{CompatGeckoMobile("19")}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
</ul>
Revenir à cette révision