calc

  • Raccourci de la révision : CSS/calc
  • Titre de la révision : calc
  • ID de la révision : 354969
  • 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.

Syntaxe

 <une_propriété_css>: -vendor-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.
mod {{ unimplemented_inline() }}
Modulo. Ceci renvoie le reste de la division de deux valeurs.

L'opérande dans l'expression peut être une longueur de syntaxe quelconque. Il est possible d'utiliser différentes unités pour chacune des valeurs dans votre expression si vous le souhaitez. Il est aussi possible d'utiliser des parenthèses pour définir un ordre des calculs à réaliser.

Note : diviser par zéro résulte en une erreur générée dans le parseur HTML.
Note : les opérateurs doivent toujours être entourés par des espaces blancs. L'opérande de calc(50 -8px) sera interprété comme un pourcentage suivi d'une longueur négative, c'est-à-dire une expression invalide alors que l'opérande de calc(50% - 8px) est un pourcentage suivi d'un signe moins et d'une longueur.

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
CSS Values and Units Level 3 {{ Spec2('CSS3 Values') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base - (crbug.com/69487) {{ CompatGeckoDesktop("2") }} 9 - - ({{ Webkitbug("16662") }})
Méthode

-

-moz-calc() {{ property_prefix("-moz") }} calc() -

-

Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

{{ languages( { "en": "en/CSS/calc" } ) }}

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>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
 &lt;une_propriété_css&gt;: -<em>vendor</em>-calc(<em>expression</em>)
</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>
<h2 id="Expressions">Expressions</h2>
<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>
  <dt>
    mod {{ unimplemented_inline() }}</dt>
  <dd>
    Modulo. Ceci renvoie le reste de la division de deux valeurs.</dd>
</dl>
<p>L'opérande dans l'expression peut être une longueur de syntaxe quelconque. Il est possible d'utiliser différentes unités pour chacune des valeurs dans votre expression si vous le souhaitez. Il est aussi possible d'utiliser des parenthèses pour définir un ordre des calculs à réaliser.</p>
<div class="note">
  <strong>Note :</strong> diviser par zéro résulte en une erreur générée dans le parseur HTML.</div>
<div class="note">
  <strong>Note </strong><strong>:</strong> les opérateurs doivent toujours être entourés par des espaces blancs. L'opérande de calc(50 -8px) sera interprété comme un pourcentage suivi d'une longueur négative, c'est-à-dire une expression invalide alors que l'opérande de calc(50% - 8px) est un pourcentage suivi d'un signe moins et d'une longueur.</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="deki-transform">
.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="deki-transform">
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="deki-transform">
&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><a class="external" href="http://www.w3.org/TR/css3-values/#calc" title="http://www.w3.org/TR/css3-values/#calc">CSS Values and Units Level 3</a></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>- (<a class="external" href="http://crbug.com/69487" title="http://crbug.com/69487">crbug.com/69487</a>)</td>
        <td>{{ CompatGeckoDesktop("2") }}</td>
        <td>9</td>
        <td>-</td>
        <td>- ({{ Webkitbug("16662") }})</td>
      </tr>
      <tr>
        <td>Méthode</td>
        <td>
          <p><code>- </code></p>
        </td>
        <td><code>-moz-calc()</code> {{ property_prefix("-moz") }}</td>
        <td><code>calc()</code></td>
        <td>-</td>
        <td>
          <p><code>- </code></p>
        </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>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>{{ languages( { "en": "en/CSS/calc" } ) }}</p>
Revenir à cette révision