From 34744f331a21f7dc59b6ce988a9dbfcfb3b72229 Mon Sep 17 00:00:00 2001 From: tiffanymatthe <49164666+tiffanymatthe@users.noreply.github.com> Date: Thu, 26 Mar 2020 13:56:42 -0700 Subject: [PATCH 1/5] Translate half way --- .../08-styles-and-classes/article.md | 87 ++++++++++--------- 1 file changed, 44 insertions(+), 43 deletions(-) diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index 34d441ae5..ae02e5e01 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -1,92 +1,93 @@ -# Styles and classes +# Styles et classes -Before we get into JavaScript's ways of dealing with styles and classes -- here's an important rule. Hopefully it's obvious enough, but we still have to mention it. +Avant d'entrer dans les méthodes que JavaScript utilise pour traiter les styles et classes, voici une règle importante. Elle devrait être assez évidente, mais nous devons encore la mentionner. -There are generally two ways to style an element: +Il y a, en général, deux façons de styliser un élément: -1. Create a class in CSS and add it: `
` -2. Write properties directly into `style`: `
`. +1. Créer une classe dans CSS et l'ajouter: `
` +2. Écrire les propriétés directement dans `style`: `
`. -JavaScript can modify both classes and `style` properties. +JavaScript peut modifier les classes et les propriétés de `style`. -We should always prefer CSS classes to `style`. The latter should only be used if classes "can't handle it". +Nous devrions toujours choisir d'utiliser les classes CSS plutôt que `style`. Ce dernier devrait seulement être utilisé si les classes sont incapables d'effectuer la tâche requise. -For example, `style` is acceptable if we calculate coordinates of an element dynamically and want to set them from JavaScript, like this: +Par exemple, `style` est acceptable si nous calculons les coordonnées d'un élément dynamiquement et souhaitons les définir à partir de JavaScript, comme ceci: ```js -let top = /* complex calculations */; -let left = /* complex calculations */; +let top = /* calculs complexes */; +let left = /* calculs complexes */; -elem.style.left = left; // e.g '123px', calculated at run-time -elem.style.top = top; // e.g '456px' +elem.style.left = left; // par ex. '123px', calculé lors de l'exécution +elem.style.top = top; // par ex. '456px' ``` -For other cases, like making the text red, adding a background icon -- describe that in CSS and then add the class (JavaScript can do that). That's more flexible and easier to support. +Pour les autres cas, comme rendre le texte rouge, ajouter une icône d'arrière-plan -- décrivez cela dans CSS et ensuite ajoutez la classe (JavaScript peut effectuer ceci). +For other cases, like making the text red, adding a background icon -- describe that in CSS and then add the class (JavaScript can do that). C'est plus flexible et plus facile à gérer. -## className and classList +## className et classList -Changing a class is one of the most often used actions in scripts. +Changer une classe est l'une des actions les plus utilisées dans les scripts. -In the ancient time, there was a limitation in JavaScript: a reserved word like `"class"` could not be an object property. That limitation does not exist now, but at that time it was impossible to have a `"class"` property, like `elem.class`. +Dans les temps anciens, il existait une limitation dans JavaScript: un mot réservé comme `"class"` ne pouvait pas être une propriété d'un object. Cette limitation n'existe plus maintenant, mais à l'époque, il était impossible d'avoir une propriété de `"class"`, comme `elem.class`. -So for classes the similar-looking property `"className"` was introduced: the `elem.className` corresponds to the `"class"` attribute. +Alors pour les classes, une propriété similaire, `"className"`, a été introduite: `elem.className` correspond à l'attribut `"class"`. -For instance: +Prenons, par example: ```html run - + ``` -If we assign something to `elem.className`, it replaces the whole string of classes. Sometimes that's what we need, but often we want to add/remove a single class. +Si nous attribuons quelque chose à `elem.className`, elle remplace la chaîne entière de classes. Parfois c'est ce que nous avons besoin, mais souvent, nous voulons seulement ajouter ou enlever une classe. -There's another property for that: `elem.classList`. +Il y a une autre propriété pour ce besoin: `elem.classList`. -The `elem.classList` is a special object with methods to `add/remove/toggle` a single class. +`elem.classList` est un objet spécial avec des méthodes pour `add/remove/toggle` une seule classe. -For instance: +Prenons, par exemple: ```html run - + ``` -So we can operate both on the full class string using `className` or on individual classes using `classList`. What we choose depends on our needs. +Alors nous pouvons opérer avec la chaîne de toutes les classes en utilisant `className` ou avec les classes individuelles en utilisant `classList`. Ce que nous choisissons dépend de nos besoins. -Methods of `classList`: +Méthodes de `classList`: -- `elem.classList.add/remove("class")` -- adds/removes the class. -- `elem.classList.toggle("class")` -- adds the class if it doesn't exist, otherwise removes it. -- `elem.classList.contains("class")` -- checks for the given class, returns `true/false`. +- `elem.classList.add/remove("class")` -- ajoute ou enlève la classe. +- `elem.classList.toggle("class")` -- ajoute la classe si elle n'existe pas, sinon enlève-la. +- `elem.classList.contains("class")` -- vérifie pour la classe donnée, renvoie `true/false`. -Besides, `classList` is iterable, so we can list all classes with `for..of`, like this: +En outre, `classList` est itérable, alors nous pouvons lister toutes les classes avec `for..of`, comme ceci: ```html run - + ``` -## Element style +## Style de l'élément -The property `elem.style` is an object that corresponds to what's written in the `"style"` attribute. Setting `elem.style.width="100px"` works the same as if we had in the attribute `style` a string `width:100px`. +La propriété `elem.style` est un objet qui correspond à ce qui est écrit cans l'attribut `"style"`. Attribuant `elem.style.width="100px"` fonctionne de la même façon qu'un attribut `style` ayant une chaîne `width:100px`. -For multi-word property the camelCase is used: +Pour une propriété ayant plusieurs mots, camelCase est utilisé: ```js no-beautify background-color => elem.style.backgroundColor @@ -94,16 +95,16 @@ z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth ``` -For instance: +Prenons, par exemple: ```js run document.body.style.backgroundColor = prompt('background color?', 'green'); ``` -````smart header="Prefixed properties" -Browser-prefixed properties like `-moz-border-radius`, `-webkit-border-radius` also follow the same rule: a dash means upper case. +````smart header="Propriétés prédétérminées" +Les propriétés prédéterminées par le navigateur comme `-moz-border-radius`, `-webkit-border-radius` suivent la même règle: un tiret signifie une majuscule. -For instance: +Prenons, par exemple: ```js button.style.MozBorderRadius = '5px'; @@ -111,7 +112,7 @@ button.style.WebkitBorderRadius = '5px'; ``` ```` -## Resetting the style property +## Réinitialiser la propriété de style Sometimes we want to assign a style property, and later remove it. From 31c1b080c467cb0ce0e1b38c5b34a4783a488222 Mon Sep 17 00:00:00 2001 From: tiffanymatthe <49164666+tiffanymatthe@users.noreply.github.com> Date: Thu, 26 Mar 2020 16:12:20 -0700 Subject: [PATCH 2/5] Update translation --- .../08-styles-and-classes/article.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index ae02e5e01..21e5f81d2 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -114,31 +114,31 @@ button.style.WebkitBorderRadius = '5px'; ## Réinitialiser la propriété de style -Sometimes we want to assign a style property, and later remove it. +Parfois nous voulons attribuer une propriété de style, et ensuite la retirer. -For instance, to hide an element, we can set `elem.style.display = "none"`. +Par exemple, pour cacher un élément, nous pouvons définir `elem.style.display = "none"`. -Then later we may want to remove the `style.display` as if it were not set. Instead of `delete elem.style.display` we should assign an empty string to it: `elem.style.display = ""`. +Plus tard, nous voulons peut-être enlever `style.display` comme si cette propriété n'était définie. Au lieu de `delete elem.style.display`, nous devrions attribuer une chaîne vide à la propriété de style: `elem.style.display = ""`. ```js run -// if we run this code, the will blink -document.body.style.display = "none"; // hide +// si nous exécutons cette code, clignotera +document.body.style.display = "none"; // cacher -setTimeout(() => document.body.style.display = "", 1000); // back to normal +setTimeout(() => document.body.style.display = "", 1000); // retour à la normale ``` -If we set `style.display` to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such `style.display` property at all. +Si nous attribuons `style.display` à une chaîne vide, le navigateur applique les classes CSS et ses styles intégrés normalement, comme s'il n'y avait pas de propriété `style.display`. -````smart header="Full rewrite with `style.cssText`" -Normally, we use `style.*` to assign individual style properties. We can't set the full style like `div.style="color: red; width: 100px"`, because `div.style` is an object, and it's read-only. +````smart header="Réécriture complète avec `style.cssText`" +Normalement, nous utilisons `style.*` pour attribuer des propriétés de style individuelles. Nous ne pouvons pas attribuer le style complet comme `div.style="color: red; width: 100px"`, parce que `div.style` est un object, et il est en lecture seulement. -To set the full style as a string, there's a special property `style.cssText`: +Pour définir un style complet comme une chaîne, il y a une propriété spéciale `style.cssText`: ```html run -
Button
+
Bouton
``` -This property is rarely used, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But we can safely use it for new elements, when we know we won't delete an existing style. +Cette propriété est rarement utilisée parce qu'une telle affectation enlève tous les styles pré-existants: au lieu d'être ajouté, elle les remplace. Peut occasionnellement effacer quelque chose de nécessaire. But we can safely use it for new elements, when we know we won't delete an existing style. The same can be accomplished by setting an attribute: `div.setAttribute('style', 'color: red...')`. ```` From c52c75504366d6b1e8c3c87c9b103ba844c04389 Mon Sep 17 00:00:00 2001 From: tiffanymatthe <49164666+tiffanymatthe@users.noreply.github.com> Date: Thu, 26 Mar 2020 16:36:27 -0700 Subject: [PATCH 3/5] Almost done translation --- .../08-styles-and-classes/article.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index 21e5f81d2..f171c1bae 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -149,27 +149,27 @@ Pour définir un style complet comme une chaîne, il y a une propriété spécia ``` -Cette propriété est rarement utilisée parce qu'une telle affectation enlève tous les styles pré-existants: au lieu d'être ajouté, elle les remplace. Peut occasionnellement effacer quelque chose de nécessaire. But we can safely use it for new elements, when we know we won't delete an existing style. +Cette propriété est rarement utilisée parce qu'une telle affectation enlève tous les styles pré-existants: au lieu d'être ajoutée, elle les remplace. Peut occasionnellement effacer quelque chose de nécessaire. Par contre, nous pouvons l'utiliser sans risque pour des nouveaux éléments -- nous savons que nous n'éffacerons pas un style pré-existant. -The same can be accomplished by setting an attribute: `div.setAttribute('style', 'color: red...')`. +La même chose peut être accomplie en définissant un attribut: `div.setAttribute('style', 'color: red...')`. ```` -## Mind the units +## Faites attention aux unités -Don't forget to add CSS units to values. +N'oubliez pas d'ajouter des unités de CSS aux valeurs. -For instance, we should not set `elem.style.top` to `10`, but rather to `10px`. Otherwise it wouldn't work: +Par exemple, nous ne devrions pas attribuer `elem.style.top` à `10`, mais plutôt à `10px`. Sinon ça ne fonctionnera pas: ```html run height=100 ``` -...But what if we need, say, to increase the margin by `20px`? We would want the current value of it. +...Mais, si nous voulons, par exemple, augmenter la marge par `20px`? Nous en voudrions la valeur actuelle. -There's another method for that: `getComputedStyle`. +Il y a une autre méthode pour cela: `getComputedStyle`. -The syntax is: +La syntaxe est: ```js getComputedStyle(element, [pseudo]) ``` element -: Element to read the value for. +: Élément pour lire la valeur de. pseudo -: A pseudo-element if required, for instance `::before`. An empty string or no argument means the element itself. +: Un pseudo-élément si nécessaire, par exemple `::before`. Une chaîne vide ou aucun argument signifie l'élément lui-même. -The result is an object with styles, like `elem.style`, but now with respect to all CSS classes. +Le résultat est un objet avec des styles, comme `elem.style`, mais maintenant par rapport à toutes les classes CSS. -For instance: +Prenons, par exemple: ```html run height=100 @@ -238,7 +238,7 @@ For instance: ``` ```` -```smart header="Styles applied to `:visited` links are hidden!" -Visited links may be colored using `:visited` CSS pseudoclass. +```smart header="Styles appliqués aux liens `:visited` sont cachés!" +Les liens visités peuvent être coloriés en utilisant la pseudo-classe CSS `:visited`. -But `getComputedStyle` does not give access to that color, because otherwise an arbitrary page could find out whether the user visited a link by creating it on the page and checking the styles. +Cependant, `getComputedStyle` ne donne pas accès à cette couleur, parce qu'autrement une page arbitraire pourrait savoir si l'utilisateur aurait visité un lien en créant un lien sur la page et vérifier les styles. -JavaScript may not see the styles applied by `:visited`. And also, there's a limitation in CSS that forbids applying geometry-changing styles in `:visited`. That's to guarantee that there's no side way for an evil page to test if a link was visited and hence to break the privacy. +JavaScript ne pourrait pas voir les styles appliqués par `:visited`. De plus, il y a une limitation avec CSS qui interdit l'application de styles qui changent la géométrie dans `:visited`. C'est pour garantir qu'il n'y a aucun moyen pour une page malfaisante de tester si un lien a été visité, qui donc porte atteinte à la vie privée. ``` -## Summary +## Récapitulation -To manage classes, there are two DOM properties: +Pour gérer les classes, il y a deux propriétés DOM: -- `className` -- the string value, good to manage the whole set of classes. -- `classList` -- the object with methods `add/remove/toggle/contains`, good for individual classes. +- `className` -- la valeur de chaîne, utile pour gérer l'ensemble complet des classes. +- `classList` -- l'object avec les méthodes `add/remove/toggle/contains`, utile pour les classes individuelles. -To change the styles: +Pour changer les styles: -- The `style` property is an object with camelCased styles. Reading and writing to it has the same meaning as modifying individual properties in the `"style"` attribute. To see how to apply `important` and other rare stuff -- there's a list of methods at [MDN](mdn:api/CSSStyleDeclaration). +- La propriété `style` est un objet avec les styles en camelCase. Lire et y écrire a le même sens que de modifier les propriétés individuelles dans l'attribut `"style"`. Pour savoir comment appliquer `important` et d'autres trucs rares -- il y a une liste de méthodes à [MDN](mdn:api/CSSStyleDeclaration). -- The `style.cssText` property corresponds to the whole `"style"` attribute, the full string of styles. +- La propriété `style.cssText` correspond à l'attribut entier de `"style"`, la chaîne complète des styles. -To read the resolved styles (with respect to all classes, after all CSS is applied and final values are calculated): +Pour lire les styles résolus (par rapport à toutes les classes, après que tout le CSS est appliqué et que les valeurs finales sont calculées): -- The `getComputedStyle(elem, [pseudo])` returns the style-like object with them. Read-only. +- `getComputedStyle(elem, [pseudo])` renvoie un objet de style avec eux. Lecture seulement. From 39c4d96439ab2c6877de3bf0909d980d277aa304 Mon Sep 17 00:00:00 2001 From: tiffanymatthe <49164666+tiffanymatthe@users.noreply.github.com> Date: Sat, 28 Mar 2020 09:14:54 -0700 Subject: [PATCH 5/5] Update article.md --- .../08-styles-and-classes/article.md | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index b1221fc8f..78dba1580 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -9,7 +9,7 @@ Il y a, en général, deux façons de styliser un élément: JavaScript peut modifier les classes et les propriétés de `style`. -Nous devrions toujours choisir d'utiliser les classes CSS plutôt que `style`. Ce dernier devrait seulement être utilisé si les classes sont incapables d'effectuer la tâche requise. +Nous devons toujours favoriser l'utilisation des classes CSS plutôt que `style`. Ce dernier devrait seulement être utilisé si les classes sont incapables d'effectuer la tâche requise. Par exemple, `style` est acceptable si nous calculons les coordonnées d'un élément dynamiquement et souhaitons les définir à partir de JavaScript, comme ceci: @@ -21,14 +21,13 @@ elem.style.left = left; // par ex. '123px', calculé lors de l'exécution elem.style.top = top; // par ex. '456px' ``` -Pour les autres cas, comme rendre le texte rouge, ajouter une icône d'arrière-plan -- décrivez cela dans CSS et ensuite ajoutez la classe (JavaScript peut effectuer ceci). -For other cases, like making the text red, adding a background icon -- describe that in CSS and then add the class (JavaScript can do that). C'est plus flexible et plus facile à gérer. +Pour les autres cas, comme rendre le texte rouge, ajouter une icône d'arrière-plan -- décrivez cela dans CSS et ensuite ajoutez la classe (JavaScript peut effectuer ceci). C'est plus flexible et plus facile à gérer. ## className et classList Changer une classe est l'une des actions les plus utilisées dans les scripts. -Dans les temps anciens, il existait une limitation dans JavaScript: un mot réservé comme `"class"` ne pouvait pas être une propriété d'un object. Cette limitation n'existe plus maintenant, mais à l'époque, il était impossible d'avoir une propriété de `"class"`, comme `elem.class`. +Autrefois, il existait une limitation dans JavaScript: un mot réservé comme `"class"` ne pouvait pas être une propriété d'un object. Cette limitation n'existe plus maintenant, mais à l'époque, il était impossible d'avoir une propriété de `"class"`, comme `elem.class`. Alors pour les classes, une propriété similaire, `"className"`, a été introduite: `elem.className` correspond à l'attribut `"class"`. @@ -118,7 +117,7 @@ Parfois nous voulons attribuer une propriété de style, et ensuite la retirer. Par exemple, pour cacher un élément, nous pouvons définir `elem.style.display = "none"`. -Plus tard, nous voulons peut-être enlever `style.display` comme si cette propriété n'était définie. Au lieu de `delete elem.style.display`, nous devrions attribuer une chaîne vide à la propriété de style: `elem.style.display = ""`. +Plus tard, nous voulons peut-être enlever `style.display` comme si cette propriété n'était définie. Au lieu de `delete elem.style.display`, nous devons attribuer une chaîne vide à la propriété de style: `elem.style.display = ""`. ```js run // si nous exécutons cette code, clignotera @@ -183,11 +182,11 @@ Il est à noter: le navigateur "décortique" la propriété `style.margin` dans ## Styles calculés: getComputedStyle -Alors, modifier un style est facile. Mais comment pouvons le *lire*? +Alors, modifier un style est facile. Mais comment pouvons-nous le *lire*? Par exemple, nous voulons savoir la taille, les marges et la couleur d'un élément. Comment faire? -**La propriété `style` fonctionne seulement sur la valeur de l'attribut `"style"`, sans aucune cascade CSS.** +**La propriété `style` opère seulement sur la valeur de l'attribut `"style"`, sans aucune cascade CSS.** Alors nous ne pouvons rien lire des classes CSS en utilisant `elem.style`. @@ -251,7 +250,7 @@ Prenons, par exemple: Il y a deux concepts dans [CSS](https://drafts.csswg.org/cssom/#resolved-values): 1. Une valeur de style "calculée" est le résultat d'une cascade CSS, après que tous les règles et héritage CSS sont appliqués. Elle peut ressembler comme `height:1em` ou `font-size:125%`. -2. Une valeur de style "résolue" est celle qui est finalement appliquée à l'élément. Les valeurs comme `1em` ou `125%` sont relatives. Le navigateur prends la valeur calculée et fait que toutes les unités sont fixes et absolues; par exemple: `height:20px` ou `font-size:16px`. Pour les propriétés géométriques, les valeurs résolues peuvent avoir une virgule flottante, comme `width:50.5px`. +2. Une valeur de style "résolue" est celle qui est finalement appliquée à l'élément. Les valeurs comme `1em` ou `125%` sont relatives. Le navigateur prend la valeur calculée et fait que toutes les unités sont fixes et absolues; par exemple: `height:20px` ou `font-size:16px`. Pour les propriétés géométriques, les valeurs résolues peuvent avoir une virgule flottante, comme `width:50.5px`. Il y a longtemps, `getComputedStyle` a été créé pour extraire les valeurs calculées, mais il s'est avéré que les valeurs résolues étaient beaucoup plus pratiques, alors la norme a changé. @@ -263,7 +262,7 @@ Nous devons toujours demander pour la propriété exacte requise, comme `padding Par exemple, s'il y a les propriétés `paddingLeft/paddingTop`, qu'est-ce que nous recevrons de `getComputedStyle(elem).padding`? Rien, ou peut-être une valeur générée des écarts de remplissage connus? Il n'y a pas de règle standard ici. -Il y a des autres incohérences. À titre d'exemple, certains navigateurs (Chrome) indique `10px` dans le document ci-dessous, et certains (Firefox) -- n'indique pas: +Il y a des autres incohérences. À titre d'exemple, certains navigateurs (Chrome) indique `10px` dans le document ci-dessous, et certains (Firefox) -- n'en indique pas: ```html run