| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue144:inkscape [2019/05/10 09:39] – auntiee | issue144:inkscape [2019/05/13 15:44] (Version actuelle) – andre_domenech |
|---|
| First of all, what is a CSS class? In short, it’s simply a way to group similar objects for styling purposes, by giving them all the same class name. Consider this super simple SVG file, consisting of one red rectangle (top right).** | First of all, what is a CSS class? In short, it’s simply a way to group similar objects for styling purposes, by giving them all the same class name. Consider this super simple SVG file, consisting of one red rectangle (top right).** |
| |
| Ce mois-ci, nous regarderons l'utilisation des classes du CSS avec votre SVG de façon à simplifier le JavaScript que vous devez écrire quand vous voulez changer interactivement le style de vos objets. Notez que nous ne parlons toujours que des modifications qui peuvent être réalisées en utilisant les styles du CSS - couleurs de remplissage et de contour, épaisseur des lignes et similaires. La modification d'autres aspects de vos objets - tels que la forme d'un chemin - ne peuvent pas être faits juste en utilisant des classes du CSS. | Ce mois-ci, nous regarderons l'utilisation des classes du CSS avec votre SVG de façon à simplifier le JavaScript que vous devez écrire quand vous voulez changer interactivement le style de vos objets. Notez que nous ne parlons toujours que des modifications qui peuvent être réalisées en utilisant les styles du CSS - couleurs de remplissage et de contour, épaisseur des lignes et similaires. La modification d'autres aspects de vos objets, tels que la forme d'un chemin, ne peuvent pas être faits juste en utilisant des classes du CSS. |
| |
| Avant tout, qu'est-ce qu'une classe du CSS ? En bref, c'est simplement une façon de grouper des objets similaires pour des besoins esthétiques, en leur donnant à tous le même nom de classe. Prenons ce fichier SVG super simple, consistant en un rectangle rouge (en haut à droite). | Avant tout, qu'est-ce qu'une classe du CSS ? En bref, c'est simplement une façon de grouper des objets similaires pour des besoins esthétiques, en leur donnant à tous le même nom de classe. Prenons ce fichier SVG super simple, consistant en un rectangle rouge (en haut à droite). |
| Dans ce cas, j'ai utilisé le nom de classe « important-thing », car le style d'un filet rouge autour d'un fond rouge sombre suggère qu'il pourrait être utilisé pour indiquer des éléments importants. Mais la classe peut être tout ce que vous voulez, en se limitant à la seule utilisation de caractères alphanumériques, de traits de soulignement et de tirets. Notez que vous ne pouvez pas utiliser des espaces dans les noms de classe, pour des raisons qui s'éclairciront plus loin. | Dans ce cas, j'ai utilisé le nom de classe « important-thing », car le style d'un filet rouge autour d'un fond rouge sombre suggère qu'il pourrait être utilisé pour indiquer des éléments importants. Mais la classe peut être tout ce que vous voulez, en se limitant à la seule utilisation de caractères alphanumériques, de traits de soulignement et de tirets. Notez que vous ne pouvez pas utiliser des espaces dans les noms de classe, pour des raisons qui s'éclairciront plus loin. |
| |
| Dans ce fichier exemple, nous n'avons pas gagné grand-chose en utilisant les classes. Le résultat final est le même, que nous utilisions un attribut de style ou l'un des trois sélecteurs du CSS que nous avons vu, parce qu'il n'y a dans le fichier qu'un seul élément qui peut être affecté. Mais, que se passe-t-il si nous ajoutons un second élément à notre fichier : | Dans ce fichier exemple, nous n'avons pas gagné grand-chose en utilisant les classes. Le résultat final est le même, que nous utilisions un attribut de style ou l'un des trois sélecteurs du CSS que nous avons vus, parce qu'il n'y a dans le fichier qu'un seul élément qui peut être affecté. Mais que se passe-t-il si nous ajoutons un second élément à notre fichier ? : |
| |
| <circle | <circle |
| Ceci est un type d'objet différent ; aussi, traiter son esthétique via un <style> utilisant le sélecteur d'élément « rect » ne fonctionnera pas. Il a un id différent (il le doit, car les id doivent être uniques dans un document XML). Aussi un sélecteur d'id ne marchera pas non plus. Mais les classes n'ont pas à être uniques ; aussi, nous avons donné à ce cercle la même classe que notre rectangle précédent. Voici le résultat, les deux objets se partageant le même style : | Ceci est un type d'objet différent ; aussi, traiter son esthétique via un <style> utilisant le sélecteur d'élément « rect » ne fonctionnera pas. Il a un id différent (il le doit, car les id doivent être uniques dans un document XML). Aussi un sélecteur d'id ne marchera pas non plus. Mais les classes n'ont pas à être uniques ; aussi, nous avons donné à ce cercle la même classe que notre rectangle précédent. Voici le résultat, les deux objets se partageant le même style : |
| |
| Il est important de noter que tous les styles que vous souhaitez paramétrer en utilisant un bloc <style> ne doivent pas être présents dans le XML de l'objet lui-même. Les règles d'héritage du CSS dicte que les styles paramétrés directement sur les éléments ont, en général, la priorité sur ceux établis ailleurs. Mais, ceci vous donne la possibilité d'outrepasser les styles sur des éléments particuliers. Si vous voulez un couleur de remplissage différente pour le cercle, vous pouvez simplement la paramétrer dans un attribut de style, mais hériter encore de la largeur et de la couleur du trait via la classe : | Il est important de noter que tous les styles que vous souhaitez paramétrer en utilisant un bloc <style> ne doivent pas être présents dans le XML de l'objet lui-même. Les règles d'héritage du CSS dicte que les styles paramétrés directement sur les éléments ont, en général, la priorité sur ceux établis ailleurs. Mais ceci vous donne la possibilité d'outrepasser les styles sur des éléments particuliers. Si vous voulez une couleur de remplissage différente pour le cercle, vous pouvez simplement la paramétrer dans un attribut de style, mais hériter encore de la largeur et de la couleur du trait via la classe : |
| |
| <circle | <circle |
| **Unfortunately, Inkscape doesn’t have any native support for creating and modifying CSS classes. Any edits you make to an element will be applied directly to its own ‘style’ attribute, or to other attributes directly on the element. Such changes won’t delete or change your <style> block, and won’t alter the ‘class’ attribute on the element, so at least Inkscape doesn’t completely destroy any manual edits you’ve applied. But, as we’ve seen, values set directly on an element will take priority over those applied via a class, so you can easily end up in a situation where your classes no longer appear to have any effect. For this reason, I recommend doing any work with classes in a text editor, rather than Inkscape, and making those changes as late in the design process as possible. Ideally you won’t have to re-open your document in Inkscape at all, but, if you do, take care not to change the styles of any elements that you expect to control using classes – or at least be prepared to re-edit the files in your text editor afterwards.** | **Unfortunately, Inkscape doesn’t have any native support for creating and modifying CSS classes. Any edits you make to an element will be applied directly to its own ‘style’ attribute, or to other attributes directly on the element. Such changes won’t delete or change your <style> block, and won’t alter the ‘class’ attribute on the element, so at least Inkscape doesn’t completely destroy any manual edits you’ve applied. But, as we’ve seen, values set directly on an element will take priority over those applied via a class, so you can easily end up in a situation where your classes no longer appear to have any effect. For this reason, I recommend doing any work with classes in a text editor, rather than Inkscape, and making those changes as late in the design process as possible. Ideally you won’t have to re-open your document in Inkscape at all, but, if you do, take care not to change the styles of any elements that you expect to control using classes – or at least be prepared to re-edit the files in your text editor afterwards.** |
| |
| Malheureusement, Inkscape n'a pas de support natif pour créer et modifier les classes du CSS. Toutes les modifications que vous faites sur un élément seront directement appliquées sur son propre attribut « style », ou aux autres attributs, directement dans l'élément. De telles modifications n'effaceront ni ne modifieront votre bloc <style>, et n'altèreront pas l'attribut « class » de l'élément ; aussi, au final, Inkscape ne détruit pas complètement toutes les modifications manuelles que vous avez faites. Mais, comme nous l'avons vu, les valeurs mises directement sur un élément auront la priorité sur celles faites via une classe ; ainsi, vous pouvez facilement vous retrouver dans une situation où vos classes paraissent ne plus avoir aucun effet. Pour cette raison, je recommande de faire tous les travaux sur les classes dans un éditeur de texte, plutôt que dans Inkscape, et de faire ces modifications le plus tard possible dans la conception. Idéalement, vous ne devriez plus avoir à ré-ouvrir votre document dans Inkscape ; mais, si vous le faites, prenez garde de ne modifier les styles d'aucun des éléments que vous espérez contrôler en utilisant des classes. Ou, du moins, soyez prêt à ré-éditer ensuite les fichiers dans votre éditeur de texte. | Malheureusement, Inkscape n'a pas de support natif pour créer et modifier les classes du CSS. Toutes les modifications que vous faites sur un élément seront directement appliquées sur son propre attribut « style », ou aux autres attributs, directement dans l'élément. De telles modifications n'effaceront ni ne modifieront votre bloc <style>, et n'altéreront pas l'attribut « class » de l'élément ; aussi, au final, Inkscape ne détruit pas complètement toutes les modifications manuelles que vous avez faites. Mais, comme nous l'avons vu, les valeurs mises directement sur un élément auront la priorité sur celles faites via une classe ; ainsi, vous pouvez facilement vous retrouver dans une situation où vos classes paraissent ne plus avoir aucun effet. Pour cette raison, je recommande de faire tous les travaux sur les classes dans un éditeur de texte, plutôt que dans Inkscape, et de faire ces modifications le plus tard possible dans la conception. Idéalement, vous ne devriez plus avoir à ré-ouvrir votre document dans Inkscape ; mais si vous le faites, prenez garde de ne modifier les styles d'aucun des éléments que vous espérez contrôler en utilisant des classes. Ou, du moins, soyez prêt à ré-éditer ensuite les fichiers dans votre éditeur de texte. |
| |
| **JavaScript offers a few ways to work with CSS classes, but by far the easiest is the ‘classList’ property. This has add(), remove(), toggle(), replace() and contains() methods that handle all the corner cases and error handling for you. You can add() a class without having to check if it’s already there. You can remove() a class and the code won’t throw an error if the class doesn’t exist. The toggle() method will add the class if it’s missing, or remove it if it’s present, which can simplify the code for basic on/off styling. You can use replace(), as the name suggests, to swap one class for another, and contains() does a search of the class attribute to tell you whether or not the name you supply is already present. | **JavaScript offers a few ways to work with CSS classes, but by far the easiest is the ‘classList’ property. This has add(), remove(), toggle(), replace() and contains() methods that handle all the corner cases and error handling for you. You can add() a class without having to check if it’s already there. You can remove() a class and the code won’t throw an error if the class doesn’t exist. The toggle() method will add the class if it’s missing, or remove it if it’s present, which can simplify the code for basic on/off styling. You can use replace(), as the name suggests, to swap one class for another, and contains() does a search of the class attribute to tell you whether or not the name you supply is already present. |
| Let’s finish up by using some of these methods in a new Inkscape drawing. First create a few objects whose classes you wish to alter: for this demo I’ll have three buttons to demonstrate some different approaches to the problem of toggling between two states.** | Let’s finish up by using some of these methods in a new Inkscape drawing. First create a few objects whose classes you wish to alter: for this demo I’ll have three buttons to demonstrate some different approaches to the problem of toggling between two states.** |
| |
| Javascript offre quelques façons de travailler avec les classes du CSS, mais la propriété « ClassList » est, de loin, la plus facile. Celle-ci ajoute les méthodes add(), remove(), toggle(), replace() et contains() qui manipulent tous les petits cas et la gestion des erreurs à votre place. Vous pouvez ajouter, « add() », une classe sans avoir à vérifier si elle est déjà présente. Vous pouvez retirer, « remove(), une classe et le code ne sortira pas une erreur si la classe n'existe pas. La méthode toggle() ajoutera la classe si elle est manquante, ou la supprimera si elle est présente, ce qui peut simplifer le code pour une esthétique simple visible/masquée. Vous pouvez utiliser replace(), pour passer d'une classe à l'autre, comme son nom le suggère, et contains() fait une recherche de l'attribut de classe pour vous dire si le nom que vous avez fourni est déjà présent. | JavaScript offre quelques façons de travailler avec les classes du CSS, mais la propriété « ClassList » est, de loin, la plus facile. Celle-ci ajoute les méthodes add(), remove(), toggle(), replace() et contains() qui manipulent tous les petits cas et la gestion des erreurs à votre place. Vous pouvez ajouter, « add() », une classe sans avoir à vérifier si elle est déjà présente. Vous pouvez retirer, « remove(), une classe et le code ne sortira pas une erreur si la classe n'existe pas. La méthode toggle() ajoutera la classe si elle est manquante, ou la supprimera si elle est présente, ce qui peut simplifer le code pour une esthétique simple visible/masquée. Vous pouvez utiliser replace(), pour passer d'une classe à l'autre, comme son nom le suggère, et contains() fait une recherche de l'attribut de classe pour vous dire si le nom que vous avez fourni est déjà présent. |
| |
| Terminons en utilisant quelques-unes de ces méthodes dans un nouveau dessin d'Inkscape. D'abord, créez quelques objets dont vous souhaitez modifier les classes : pour cette démo, j'aurai trois boutons pour illustrer les différentes approches du problème de va-et-vient entre deux états. | Terminons en utilisant quelques-unes de ces méthodes dans un nouveau dessin d'Inkscape. D'abord, créez quelques objets dont vous souhaitez modifier les classes : pour cette démo, j'aurai trois boutons pour illustrer les différentes approches du problème de va-et-vient entre deux états. |
| this.classList.toggle('blue');** | this.classList.toggle('blue');** |
| |
| À ce niveau, Inkscape continue d'affirmer que les rectangles ont un remplissage et un contour indéfinis. Mais vous pouvez visualiser votre travail en ouvrant le fichier dans un navigateur Internet, qui fait honneur au travail que nous avons fait sur la classe et le style et affiche nos boutons avec un fond rouge et une épaisse bordure noire. Nous pourrions ajouter le script directement dans le fichier SVG avec un éditeur de texte, mais, comme c'est un article sur Inkscape, c'est là que nous allons pour ajouter notre code en Javascript. Prenez juste soin de ne changer aucun style quand vous ouvrez le fichier. | À ce stade, Inkscape continue d'affirmer que les rectangles ont un remplissage et un contour indéfinis. Mais vous pouvez visualiser votre travail en ouvrant le fichier dans un navigateur Internet, qui fait honneur au travail que nous avons fait sur la classe et le style et affiche nos boutons avec un fond rouge et une épaisse bordure noire. Nous pourrions ajouter le script directement dans le fichier SVG avec un éditeur de texte, mais, comme c'est un article sur Inkscape, c'est là que nous allons pour ajouter notre code en JavaScript. Prenez juste soin de ne changer aucun style quand vous ouvrez le fichier. |
| |
| Le fichier étant ouvert dans Inkscape, nous avons besoin d'ajouter un gestionnaire de « onclick » pour chaque élément. Notre premier exemple ne fera qu'une ligne, pour activer/désactiver la classe « blue ». Du fait du modèle d'héritage dans le CSS, ceci aura pour effet de remplacer la classe « red », de sorte que le va-et-vient se fera entre le bleu et le rouge. En faisant un clic droit sur le premier bouton, sélectionnez « Propriétés de l'objet » et agrandissez la section Interactivité du dialogue. Dans le champ « onclick », saisissez ceci : | Le fichier étant ouvert dans Inkscape, nous avons besoin d'ajouter un gestionnaire de « onclick » pour chaque élément. Notre premier exemple ne fera qu'une ligne, pour activer/désactiver la classe « blue ». Du fait du modèle d'héritage dans le CSS, ceci aura pour effet de remplacer la classe « red », de sorte que le va-et-vient se fera entre le bleu et le rouge. En faisant un clic droit sur le premier bouton, sélectionnez « Propriétés de l'objet » et agrandissez la section Interactivité du dialogue. Dans le champ « onclick », saisissez ceci : |
| That’s the code to call the functions when the buttons are clicked, but now we need the functions themselves. Open the Document Properties and select the Scripting > Embedded Scripts tab. Click the ‘+’ button to add a new script, select it from the list, and put the toggle1 function in the Content area (top right).** | That’s the code to call the functions when the buttons are clicked, but now we need the functions themselves. Open the Document Properties and select the Scripting > Embedded Scripts tab. Click the ‘+’ button to add a new script, select it from the list, and put the toggle1 function in the Content area (top right).** |
| |
| Vous pouvez sauvegarder le fichier, le charger dans un navigateur Internet et confirmer que ça marche, si vous le voulez. Pour nos deuxième et troisième options, nous voulons plus qu'une simple ligne de code ; aussi, nous créeons une paire de fonctions en tant que scripts incorporés. Nous les appelerons « toggle1 » et « toggle2 » et passerons « this » comme référence pour l'élément sur lequel nous avons cliqué. Pour le second bouton, ajoutez cette ligne dans le champ « onclick » dans les propriétés de l'objet et ajoutez l'équivalent pour « toggle2 » au troisième bouton. | Vous pouvez sauvegarder le fichier, le charger dans un navigateur Internet et confirmer que ça marche, si vous le voulez. Pour nos deuxième et troisième options, nous voulons plus qu'une simple ligne de code ; aussi, nous créons une paire de fonctions en tant que scripts incorporés. Nous les appellerons « toggle1 » et « toggle2 » et passerons « this » comme référence pour l'élément sur lequel nous avons cliqué. Pour le second bouton, ajoutez cette ligne dans le champ « onclick » dans les propriétés de l'objet et ajoutez l'équivalent pour « toggle2 » au troisième bouton. |
| |
| toggle1(this); | toggle1(this); |
| |
| C'est le code pour appeler les fonctions quand les boutons sont cliqués mais, maintenant, nous avons besoin des fonctions elles-mêmes. Ouvrez les Propriétés du document et dans Programmation, sélectionnez l'onglet Programmes incorporés. Cliquez sur le bouton « + » et ajoutez un nouveau script à la liste ; sélectionnez-le dans la liste et mettez la fonction toggle1 dans la zone Contenu (voir en haut à droite). | C'est le code pour appeler les fonctions quand les boutons sont cliqués mais, maintenant, nous avons besoin des fonctions elles-mêmes. Ouvrez les Propriétés du document et dans Programmation, sélectionnez l'onglet Programmes incorporés. Cliquez sur le bouton « + » pour ajouter un nouveau script à la liste ; sélectionnez-le dans la liste et mettez la fonction toggle1 dans la zone Contenu (voir en haut à droite). |
| |
| **Here (bottom right) is the code for toggle2. You can either add this function after toggle1, or put it into a separate script section by clicking the ‘+’ and selecting the new entry. | **Here (bottom right) is the code for toggle2. You can either add this function after toggle1, or put it into a separate script section by clicking the ‘+’ and selecting the new entry. |
| Look back over the code, and try to understand the differences between these three approaches. The first is the simplest, and will work in most cases where you just have to turn a class on or off from a single location in the code. The second is more useful if there are other bits of code that could interfere with the content of the class attribute, as the extra check to confirm if it currently contains the class or not makes it more robust. The third method is rarely used, but might be handy if you need to replace an entire class to avoid inheriting any properties from it. Usually I’d recommend reorganising your classes to avoid this problem, but the replace() method is worth knowing about in case that’s not an option.** | Look back over the code, and try to understand the differences between these three approaches. The first is the simplest, and will work in most cases where you just have to turn a class on or off from a single location in the code. The second is more useful if there are other bits of code that could interfere with the content of the class attribute, as the extra check to confirm if it currently contains the class or not makes it more robust. The third method is rarely used, but might be handy if you need to replace an entire class to avoid inheriting any properties from it. Usually I’d recommend reorganising your classes to avoid this problem, but the replace() method is worth knowing about in case that’s not an option.** |
| |
| Voici à droite en bas, le code pour toggle2. Vous pouvez, soit ajouter cette fonction après toggle1, soit la mettre dans une section de script séparée en cliquant sur « + » et en sélectionnant une nouvelle entrée. | Voici, à droite en bas, le code pour toggle2. Vous pouvez, soit ajouter cette fonction après toggle1, soit la mettre dans une section de script séparée en cliquant sur « + » et en sélectionnant une nouvelle entrée. |
| |
| Sauvegardez le fichier, ouvrez-le dans votre navigateur et vous devriez pouvoir cliquer sur chaque bouton pour le faire passer alternativement en rouge ou en bleu. | Sauvegardez le fichier, ouvrez-le dans votre navigateur et vous devriez pouvoir cliquer sur chaque bouton pour le faire passer alternativement en rouge ou en bleu. |
| |
| Retournez regarder le code et essayez de comprendre les différences entre ces trois approches. La première est la plus simple et elle fonctionnera dans la plupart des cas où vous avez juste à activer/désactiver une classe à une seul endroit dans le code. La seconde est plus utile s'il y a d'autres bouts de code qui pourraient interférer avec le contenu de l'attribut class, car la vérification supplémentaire pour confirmer s'il contient actuellement la classe ou non, la rend plus robuste. La troisième méthode est rarement utilisée, mais elle peut s'avérer pratique si vous avez besoin de remplacer toute une classe pour éviter tout héritage de propriété venant d'elle. Habituellement, je recommanderais de réorganiser vos classes pour éviter ce problème, mais la méthode replace() vaut d'être connue dans le cas où on n'a pas le choix. | Retournez regarder le code et essayez de comprendre les différences entre ces trois approches. La première est la plus simple et elle fonctionnera dans la plupart des cas où vous avez juste à activer/désactiver une classe à une seul endroit dans le code. La seconde est plus utile s'il y a d'autres bouts de code qui pourraient interférer avec le contenu de l'attribut class, car la vérification supplémentaire pour confirmer s'il contient actuellement la classe ou non, la rend plus robuste. La troisième méthode est rarement utilisée, mais elle peut s'avérer pratique si vous avez besoin de remplacer une classe entière pour éviter tout héritage de propriété venant d'elle. Habituellement, je recommanderais de réorganiser vos classes pour éviter ce problème, mais la méthode replace() vaut d'être connue dans le cas où on n'a pas le choix. |
| |
| **You may notice that clicking on the text, rather than the background, of the button does not cause the class toggle to occur. Furthermore the text is still selectable, which is not something you would usually want in a button. Next time we’ll take a look at these issues to see how we can make a click on one object affect a completely different one.** | **You may notice that clicking on the text, rather than the background, of the button does not cause the class toggle to occur. Furthermore the text is still selectable, which is not something you would usually want in a button. Next time we’ll take a look at these issues to see how we can make a click on one object affect a completely different one.** |
| |
| Vous pouvez noter qu'en cliquant sur le texte du bouton, plutôt que sur son fond, le basculement de la classe n'intervient pas. De plus, le texte est toujours sélectionnable, ce qui n'est pas ce que vous voulez habituellement sur un bouton. La prochaine fois, nous nous pencherons sur ces problèmes pour voir comment nous pouvons faire pour qu'un clic sur un objet affecte une tout autre objet. | Vous pouvez noter qu'en cliquant sur le texte du bouton, plutôt que sur son fond, le basculement de la classe n'intervient pas. De plus, le texte est toujours sélectionnable, ce qui n'est pas ce que vous voulez habituellement sur un bouton. La prochaine fois, nous nous pencherons sur ces problèmes pour voir comment nous pouvons faire pour qu'un clic sur un objet affecte un tout autre objet. |
