From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- files/fr/web/css/calc()/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files/fr/web/css/calc()') diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html index 6f3cbb1c7e..b3eb962d7b 100644 --- a/files/fr/web/css/calc()/index.html +++ b/files/fr/web/css/calc()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/calc()

La fonction calc() peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à calc(), il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.

-
/* property: calc(expression) */
+
/* property: calc(expression) */
 width: calc(100% - 80px);
 
@@ -55,7 +55,7 @@ width: calc(100% - 80px);

calc() rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée 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 bords de la fenêtre :

-
.banniere {
+
.banniere {
   position: absolute;
   left: 40px;
   width: calc(100% - 80px);
@@ -68,7 +68,7 @@ width: calc(100% - 80px);
 }
 
-
<div class="banniere">C'est une bannière !</div>
+
<div class="banniere">C'est une bannière !</div>

{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}

@@ -78,7 +78,7 @@ width: calc(100% - 80px);

Regardons un peu le CSS :

-
input {
+
input {
   padding: 2px;
   display: block;
   width: calc(100% - 1em);
@@ -93,7 +93,7 @@ width: calc(100% - 80px);
 
 

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 1em. Enfin, le HTML suivant utilise le CSS défini :

-
<form>
+
<form>
   <div id="boiteformulaire">
   <label>Tapez quelque chose :</label>
   <input type="text">
@@ -107,7 +107,7 @@ width: calc(100% - 80px);
 
 

Prenons la feuille de style suivante :

-
.toto {
+
.toto {
   --largeurA: 100px;
   --largeurB: calc(var(--largeurA) / 2);
   --largeurC: calc(var(--largeurB) / 2);
@@ -120,7 +120,7 @@ width: calc(100% - 80px);
 
 

Lorsque vous utilisez calc() pour définir la taille d'un texte, assurez-vous d'inclure une unité de longueur relative. Par exemple :

-
h1 {
+
h1 {
   font-size: calc(1.5rem + 3vw);
 }
-- cgit v1.2.3-54-g00ecf