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..78dba1580 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,92 @@ -# 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 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. -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). 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`. +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`. -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 +94,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,33 +111,33 @@ 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. +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 devons 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é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 @@ -237,7 +237,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 porterait 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 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.