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 --- .../web/css/using_css_custom_properties/index.html | 26 +++++++++++++--------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'files/fr/web/css/using_css_custom_properties/index.html') diff --git a/files/fr/web/css/using_css_custom_properties/index.html b/files/fr/web/css/using_css_custom_properties/index.html index 718ed14de4..c9d8e4bce7 100644 --- a/files/fr/web/css/using_css_custom_properties/index.html +++ b/files/fr/web/css/using_css_custom_properties/index.html @@ -18,14 +18,14 @@ translation_of: Web/CSS/Using_CSS_custom_properties

Voici comment on déclare une variable :

-
element {
+
element {
   --main-bg-color: brown;
 }
 

 
 
Et voici comment on l'utilise

 
-
element {
+
element {
   background-color: var(--main-bg-color);
 }
 

@@ -47,7 +47,9 @@ translation_of: Web/CSS/Using_CSS_custom_properties
  
  • les propriétés personnalisées, qui sont des propriétés spéciales notées --* où * représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : --example-variable: 20px; est une déclaration en CSS, utilisant la propriété personnalisée --* pour initialiser la valeur de la variable CSS --example-variable à 20px.
    • 
 
 
-
    Note : Le préfixe de propriété personnalisée était noté var- dans les précédentes spécifications, mais a ensuite été changé pour --. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})
    
+
    
+  
    Note : Le préfixe de propriété personnalisée était noté var- dans les précédentes spécifications, mais a ensuite été changé pour --. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})
    
+
    
 
 
    Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.
    
 
@@ -55,8 +57,9 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 
 
    Commençons avec cette feuille CSS simple colorant les éléments de différentes classes avec la même couleur :
    
 
-
    
-
    .un {
+
    Exemple 1
    
+
+
    .un {
   color: white;
   background-color: brown;
   margin: 10px;
@@ -104,13 +107,14 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 
 
    ce qui donne ceci :
    
 
-
    {{EmbedLiveSample("sample1",600,180)}}
    
+
    {{EmbedLiveSample("exemple_1",600,180)}}
    
 
 
    Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à brown à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable.
    
 
    
 
-
    
-
    :root {
+
    Exemple 2
    
+
+
    :root {
   --main-bg-color: brown;
 }
 
@@ -200,7 +204,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 
 
    Le premier argument passé à la fonction est le nom de la propriété personnalisée qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la propriété personnalisée en question est invalide.
    
 
-
    
+
    
 
    Note : Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.
    
 
    
 
@@ -221,13 +225,13 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 
    
 
 
    
-
    Note : La syntaxe pour la valeur de recours, comme celle des propriétés personnalisées, permet d'utiliser une virgule. Ainsi, var(--toto, red, blue) définit une valeur de recours égale à red, blue, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.
    
+
    Note : La syntaxe pour la valeur de recours, comme celle des propriétés personnalisées, permet d'utiliser une virgule. Ainsi, var(--toto, red, blue) définit une valeur de recours égale à red, blue, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.
    
 
 
    La syntaxe de la deuxième règle (sur .trois) permet d'utiliser une autre variable comme variable de secours et une autre valeur (pink) dans le cas où cette deuxième variable ne fonctionne pas.
    
 
    
 
 
    
-
    Note : Des problèmes de performances ont pu être observés[source ?]  causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.
    
+
    Note : Des problèmes de performances ont pu être observés causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.
    
 
    
 
 
    Validité et valeurs
    
-- 
cgit v1.2.3-54-g00ecf