Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue173:inkscape [2021/09/28 18:44] – d52fr
+++ issue173:inkscape [2021/10/03 17:34] (Version actuelle) – andre_domenech
@@ Ligne 5: / Ligne 5: @@
 The style of each object is the same, and that information is stored in the element’s “style” property, as Inkscape does by default. Looking at the first row, therefore, the structure of the SVG content boils down to something like that shown top right.**
-La dernière fois, je me suis livré à un tour d'horizon du support CSS dans les fichiers SVG, en préparation du sujet de ce mois-ci : le dialogue Sélecteurs et CSS. Comme je l'ai indiqué précédemment, cette boîte de dialogue est d'abord apparue comme une option cachée dans la version 1.0 d'Inkscape, puis a été officiellement exposée dans la version 1.0.1. Elle peut être ouverte à l'aide du raccourci clavier Ctrl-Shift-Q (même sur la v1.0), les versions ultérieures l'exposant également via le menu Objet. D'après mon expérience, il est encore un peu bogué, même dans la version 1.1, et peut conduire à des plantages complets de l'application, donc assurez-vous de sauvegarder régulièrement si vous décidez de l'utiliser.
+La dernière fois, je me suis livré à un rapide tour du support CSS dans les fichiers SVG, en préparation du sujet de ce mois-ci : le dialogue Sélecteurs et CSS. Comme je l'ai indiqué précédemment, cette boîte de dialogue est d'abord apparue comme une option cachée dans la version 1.0 d'Inkscape, puis a été officiellement révélée dans la version 1.0.1. Elle peut être ouverte à l'aide du raccourci clavier Ctrl-Shift-Q (même sur la v1.0), les versions ultérieures l'affichant également via le menu Objet. D'après mon expérience, il est encore un peu bogué, même dans la version 1.1, et peut conduire à des plantages complets de l'application, donc assurez-vous de faire des sauvegardes régulières si vous décidez de l'utiliser.
 Pour décrire le fonctionnement de cette boîte de dialogue, il faut disposer d'un document type sur lequel travailler - de préférence un document comportant un mélange d'éléments à cibler via des sélecteurs CSS. Pour les besoins de cet article, j'ai donc créé une collection de seize éléments (quatre carrés, quatre cercles, quatre étoiles et quatre chemins de Bézier), disposés en quatre rangées, le contenu de chaque rangée étant groupé.
-Le style de chaque objet est le même, et cette information est stockée dans la propriété « style » de l'élément, comme le fait Inkscape par défaut. En regardant la première ligne, la structure du contenu SVG se résume donc à quelque chose comme ce qui est montré en haut à droite.
+Le style de chaque objet est le même et cette information est stockée dans la propriété « style » de l'élément, comme le fait Inkscape par défaut. En regardant la première ligne, la structure du contenu SVG se résume donc à quelque chose comme ce qui est montré en haut à droite.
@@ Ligne 18: / Ligne 18: @@
 The buttons in the bottom-right corner can be used to switch between horizontal and vertical orientation – though in both cases, in my opinion, the panels are presented in the wrong order. The only other interactive elements at this stage are the plus and minus buttons in the bottom-right corner. The latter does nothing right now (and should probably be disabled), leaving us with little to do but press the plus (+) button. This will open a small “CSS Selector” dialog, pre-filled with a class name (including the preceding dot, as required in CSS syntax).**
-Comme d'habitude, j'ai omis une grande partie du contenu du SVG pour des raisons de clarté, y compris les propriétés de style supplémentaires et les espaces de noms de la plupart des éléments et attributs. Notez le premier chemin, cependant, où j'ai spécifiquement inclus l'attribut sodipodi:type qui indique à Inkscape qu'il s'agit d'une primitive d'étoile. Le chemin de Bézier, d'un autre côté, n'a pas un tel attribut, car c'est juste un élément de chemin SVG standard et ne nécessite pas d'indications supplémentaires pour qu'Inkscape comprenne comment travailler avec lui. Les ID sont juste des valeurs arbitraires attribuées par Inkscape - dans un fichier réel, vous les modifieriez peut-être pour qu'ils soient plus descriptifs ou conviviaux.
+Comme d'habitude, j'ai omis une grande partie du contenu du SVG pour des raisons de clarté, y compris les propriétés de style supplémentaires et les espaces de noms de la plupart des éléments et attributs. Notez le premier chemin, cependant, où j'ai spécifiquement inclus l'attribut sodipodi:type qui indique à Inkscape qu'il s'agit d'une primitive d'étoile. Le chemin de Bézier, lui, n'a pas un tel attribut, car c'est juste un élément de chemin SVG standard et ne nécessite pas d'indications supplémentaires pour qu'Inkscape comprenne comment travailler avec. Les ID sont juste des valeurs arbitraires attribuées par Inkscape, dans un fichier réel, vous les modifieriez peut-être pour qu'ils soient plus descriptifs ou conviviaux.
-Il est maintenant temps d'ouvrir la boîte de dialogue Sélecteurs et CSS (ci-après dénommée boîte de dialogue Sélecteurs, par souci de concision), via l'entrée de menu Objet > Sélecteurs et CSS.... Si rien n'est sélectionné sur la page, préparez-vous à une certaine déception, car il n'y a pas vraiment de fonctionnalité à ce stade.
+Il est maintenant temps d'ouvrir la boîte de dialogue Sélecteurs et CSS (ci-après dénommée boîte de dialogue Sélecteurs, par souci de concision), via l'entrée de menu Objet > Sélecteurs et CSS... Si rien n'est sélectionné sur la page, préparez-vous à une certaine déception, car il n'y a pas vraiment de fonctionnalité à ce stade.
-Les boutons dans le coin inférieur droit peuvent être utilisés pour passer de l'orientation horizontale à l'orientation verticale - bien que dans les deux cas, à mon avis, les panneaux soient présentés dans le mauvais ordre. Les seuls autres éléments interactifs pour le moment sont les boutons plus et moins dans le coin inférieur droit. Ce dernier ne fait rien pour l'instant (et devrait probablement être désactivé), ce qui ne nous laisse guère d'autre choix que d'appuyer sur le bouton plus (+). Cela ouvrira une petite boîte de dialogue « Sélecteur CSS », préremplie avec un nom de classe (y compris le point précédent, comme l'exige la syntaxe CSS).
+Les boutons dans le coin inférieur droit peuvent être utilisés pour passer de l'orientation horizontale à l'orientation verticale, bien que dans les deux cas, à mon avis, les panneaux soient présentés dans le mauvais ordre. Les seuls autres éléments interactifs pour le moment sont les boutons plus et moins dans le coin inférieur droit. Ce dernier ne fait rien pour l'instant (et devrait probablement être désactivé), ce qui ne nous laisse guère d'autre choix que d'appuyer sur le bouton plus (+). Cela ouvrira une petite boîte de dialogue « Sélecteur CSS », préremplie avec un nom de classe (y compris le point du début, comme l'exige la syntaxe CSS).
@@ Ligne 31: / Ligne 31: @@
 Pour l'instant, nous allons nous contenter d'accepter la valeur par défaut du sélecteur en cliquant sur le bouton Ajouter. Préparez-vous à l'écrasante complexité des changements apportés à la boîte de dialogue principale.
-Lorsque vous serez complètement remis de cette excitation, vous voudrez peut-être prendre un moment pour vraiment apprécier ce qui s'est passé : il y a maintenant une entrée dans le panneau de droite étiquetée ".Class1", et avec un autre bouton plus à côté ! Vous pouvez sélectionner la nouvelle ligne, mais un double-clic ne vous permettra pas de modifier la valeur - il n'y a aucun moyen de modifier un sélecteur une fois qu'il a été ajouté, donc si vous faites une erreur, votre seul recours est de le supprimer et de recommencer. En parlant de suppression, notre bouton moins a désormais une utilité : lorsque la nouvelle entrée est sélectionnée, un clic sur ce bouton permet de supprimer l'ensemble de l'entrée. Et qu'en est-il de notre nouveau bouton plus spécifique à l'entrée ? À ce stade, cliquer sur ce bouton n'apporte absolument rien. Il n'y a même pas d'info-bulle pour suggérer ce qu'il est censé faire.
-Le but de ce bouton est d'ajouter le nom de la classe à tous les éléments SVG sélectionnés, afin qu'ils correspondent au sélecteur CSS et apparaissent dans la boîte de dialogue. Voyons un exemple pratique en sélectionnant le premier élément de chaque rangée. Rappelez-vous que chaque rangée est un groupe séparé, nous devons donc maintenir les touches Ctrl+Shift pour sélectionner un objet dans le groupe (Ctrl) et l'ajouter à la sélection existante (Shift). En maintenant ces touches enfoncées, il est facile de cliquer sur le premier objet de chaque ligne, ce qui nous donne une sélection de quatre éléments. En cliquant sur le bouton plus, la classe "Class1" sera ajoutée à chacun des éléments, et la boîte de dialogue Sélecteurs se met à jour pour nous montrer les ID des éléments qui correspondent au sélecteur.
+Lorsque vous serez complètement remis de cette excitation, vous voudrez peut-être prendre un moment pour vraiment apprécier ce qui s'est passé : il y a maintenant une entrée dans le panneau de droite étiquetée « .Class1 » et avec un autre bouton « plus » à côté ! Vous pouvez sélectionner la nouvelle ligne, mais un double-clic ne vous permettra pas de modifier la valeur ; il n'y a aucun moyen de modifier un sélecteur une fois qu'il a été ajouté, aussi, si vous faites une erreur, votre seul recours est de le supprimer et de recommencer. En parlant de suppression, notre bouton « moins » a désormais une utilité : lorsque la nouvelle entrée est sélectionnée, un clic sur ce bouton permet de supprimer l'ensemble de l'entrée. Et qu'en est-il de notre nouveau bouton plus (+) spécifique à l'entrée ? À ce stade, cliquer sur ce bouton n'apporte absolument rien. Il n'y a même pas d'info-bulle pour suggérer ce qu'il est censé faire.
+Le but de ce bouton est d'ajouter le nom de la classe à tous les éléments SVG sélectionnés, afin qu'ils correspondent au sélecteur CSS et apparaissent dans la boîte de dialogue. Voyons un exemple pratique en sélectionnant le premier élément de chaque rangée. Rappelez-vous que chaque rangée est un groupe séparé ; nous devons donc maintenir les touches Ctrl+Shift enfoncées pour sélectionner un objet dans le groupe (Ctrl) et l'ajouter à la sélection existante (Shift). En maintenant ces touches enfoncées, il est facile de cliquer sur le premier objet de chaque ligne, ce qui nous donne une sélection de quatre éléments. En cliquant sur le bouton plus, la classe « Class1 » sera ajoutée à chacun des éléments, et la boîte de dialogue Sélecteurs se met à jour pour nous montrer les ID des éléments qui correspondent au sélecteur.
@@ Ligne 48: / Ligne 49: @@
 <rect class="Class1" ... />
-Notez qu'Inkscape donne aux éléments <circle> un ID qui commence par "path", donc les trois ID path et un rect listés représentent en fait deux chemins (l'étoile et le chemin de Bézier), un cercle et un carré. C'est un peu déroutant au début, mais rappelez-vous qu'un ID n'est qu'une étiquette unique et qu'il ne doit pas nécessairement être lié au type d'objet. Si vous cliquez sur un seul ID dans la boîte de dialogue, l'objet associé sera sélectionné sur le canevas, il est donc assez facile de savoir quels éléments ont quels ID. Pour l'instant, nous supposons que le sélecteur CSS lui-même (".Class1") est sélectionné, comme dans l'image précédente. Vous remarquerez que le volet de gauche s'est enrichi d'un peu de contenu - et d'un bouton plus.
+Notez qu'Inkscape donne aux éléments <circle> un ID qui commence par « path », donc les trois ID path et un ID rect listés représentent en fait deux chemins (l'étoile et le chemin de Bézier), un cercle et un carré. C'est un peu déroutant au début, mais rappelez-vous qu'un ID n'est qu'une étiquette unique et qu'il ne doit pas nécessairement être lié au type d'objet. Si vous cliquez sur un seul ID dans la boîte de dialogue, l'objet associé sera sélectionné sur le canevas et il est assez facile de savoir quels éléments ont quels ID. Pour l'instant, nous supposons que le sélecteur CSS lui-même (« .Class1 ») est sélectionné, comme dans l'image précédente. Vous remarquerez que le volet de gauche s'est enrichi d'un peu de contenu - et d'un bouton plus.
-Le volet de gauche affiche les propriétés CSS qui s'appliquent aux éléments actuellement sélectionnés, reflétant dans ce cas la feuille de style qu'Inkscape a créée dans l'en-tête du document. Le bouton plus nous permet d'ajouter d'autres propriétés. L'interface utilisateur est un peu maladroite, mais lorsque vous cliquez sur le bouton, une nouvelle entrée vide est créée avec le champ du nom de la propriété centré, prêt à être saisi. Saisissez le nom de la propriété, puis appuyez sur Entrée ou sur Tab pour passer au champ de valeur, où vous pouvez saisir une valeur appropriée pour votre propriété. Voici, par exemple, ce qui arrive à notre sélection lorsque je définis deux couleurs CSS, une pour le trait et une autre pour le remplissage.
+Le volet de gauche affiche les propriétés CSS qui s'appliquent aux éléments actuellement sélectionnés, reflétant dans ce cas la feuille de style qu'Inkscape a créée dans l'en-tête du document. Le bouton plus nous permet d'ajouter d'autres propriétés. L'interface utilisateur est un peu maladroite, mais lorsque vous cliquez sur le bouton, une nouvelle entrée vide est créée avec le champ du nom de la propriété sélectionné, prêt pour une saisie. Saisissez le nom de la propriété, puis appuyez sur Entrée ou sur Tab pour passer au champ de valeur, où vous pouvez saisir une valeur appropriée pour votre propriété. Voici, par exemple, ce qui arrive à notre sélection lorsque je définis deux couleurs CSS, une pour le contour et une autre pour le remplissage.
@@ Ligne 61: / Ligne 62: @@
 Chaque propriété possède un bouton, qui permet de la supprimer complètement, et une case à cocher qui permet de l'activer ou de la désactiver. Mais ces éléments ne fonctionnent pas nécessairement comme vous l'attendez. Dans cet exemple, vous pourriez penser que la désactivation (ou la suppression) de la propriété de remplissage ramènerait les objets à leur remplissage rouge précédent, mais ce n'est pas du tout le cas. Au contraire, le remplissage devient noir.
-Qu'est-ce qui se passe ici ? Vous vous souvenez que le mois dernier, les propriétés CSS contenues dans un attribut "style" remplacent celles de la feuille de style. Mais le remplissage et le trait de nos éléments ont tous été définis par des attributs de style lorsque nous les avons créés, alors comment le remplissage jaune (qui provient de la feuille de style) a-t-il pu fonctionner en premier lieu ? La réponse est qu'Inkscape supprime automatiquement les propriétés conflictuelles de l'attribut de style lorsque vous commencez à les ajouter via la boîte de dialogue Sélecteurs.
+Qu'est-ce qui se passe ici ? Vous vous souvenez, le mois dernier, que les propriétés CSS contenues dans un attribut « style » remplacent celles de la feuille de style. Mais le remplissage et le trait de nos éléments ont tous été définis par des attributs de style lorsque nous les avons créés, alors comment le remplissage jaune (qui provient de la feuille de style) a-t-il pu fonctionner en premier lieu ? La réponse est qu'Inkscape supprime automatiquement les propriétés conflictuelles de l'attribut de style lorsque vous commencez à les ajouter via la boîte de dialogue Sélecteurs.
-Dans ce cas, cela signifie que le remplissage rouge de l'attribut de style a été supprimé dès que le remplissage jaune a été ajouté à la feuille de style. Désactivez cette entrée, cependant, et Inkscape n'a plus aucune idée de la couleur de remplissage à utiliser. Dans ce cas, la spécification SVG est très claire : la valeur initiale pour le remplissage - celle à laquelle Inkscape se rabat - est le noir. La spécification définit également la valeur initiale du trait comme étant "none" - ainsi, la désactivation ou la suppression de la propriété du trait entraîne en fait la suppression de l'ensemble du trait, au lieu de laisser un trait noir épais.
+Dans ce cas, cela signifie que le remplissage rouge de l'attribut de style a été supprimé dès que le remplissage jaune a été ajouté à la feuille de style. Désactivez cette entrée, cependant, et Inkscape n'a plus aucune idée de la couleur de remplissage à utiliser. Dans ce cas, la spécification SVG est très claire : la valeur initiale pour le remplissage - celle à laquelle Inkscape se rabat - est le noir. La spécification définit également la valeur initiale du trait comme étant « none » (aucun) - ainsi, la désactivation ou la suppression de la propriété du trait entraîne en fait la suppression de l'ensemble du trait, au lieu de laisser un trait noir épais.
@@ Ligne 72: / Ligne 73: @@
 The left pane now shows not only the rules that are applied due to the new class that was added, but also those that are defined in the style attribute on the object itself in a section labelled “element”. You can edit existing values, or add new ones via this part of the dialog. If we set the fill color on the element itself, you’ll also note that the value supplied by the class – the one from the stylesheet – acquires a strike-through to indicate that the property has been overridden by another one.**
-Les effets secondaires de ce type signifient que le travail avec la boîte de dialogue Sélecteurs peut être un peu délicat si vous n'êtes pas prudent, ou si vous n'avez pas une compréhension approfondie des règles SVG et CSS. Il est facile de supposer que vous pouvez ajouter une couleur de remplissage, puis la supprimer pour annuler votre changement si vous le souhaitez, mais, comme le montre cet exemple, l'ajout d'une règle peut modifier votre contenu XML d'une manière qui ne sera pas annulée lorsque vous supprimerez la règle.
+Les effets secondaires de ce genre signifient que le travail avec la boîte de dialogue Sélecteurs peut être un peu délicat si vous n'êtes pas prudent, ou si vous n'avez pas une compréhension approfondie des règles de SVG et du CSS. Il est facile de supposer que vous pouvez ajouter une couleur de remplissage, puis la supprimer pour annuler votre changement si vous le souhaitez, mais, comme le montre cet exemple, l'ajout d'une règle peut modifier votre contenu XML d'une manière qui ne sera pas annulée lorsque vous supprimerez la règle.
 Les deux règles étant réactivées, examinons le volet de gauche lorsqu'une seule entrée ID est sélectionnée dans le volet de droite.
-Le volet de gauche affiche maintenant non seulement les règles qui sont appliquées en raison de la nouvelle classe ajoutée, mais aussi celles qui sont définies dans l'attribut de style de l'objet lui-même dans une section intitulée "élément". Vous pouvez modifier les valeurs existantes ou en ajouter de nouvelles via cette partie du dialogue. Si nous définissons la couleur de remplissage sur l'élément lui-même, vous remarquerez également que la valeur fournie par la classe - celle de la feuille de style - est barrée pour indiquer que la propriété a été remplacée par une autre.
+Le volet de gauche affiche maintenant non seulement les règles qui sont appliquées en raison de la nouvelle classe ajoutée, mais aussi celles qui sont définies dans l'attribut de style de l'objet lui-même dans une section intitulée « élément ». Vous pouvez modifier les valeurs existantes ou en ajouter de nouvelles via cette partie du dialogue. Si nous définissons la couleur de remplissage sur l'élément lui-même, vous remarquerez également que la valeur fournie par la classe - celle de la feuille de style - est barrée pour indiquer que la propriété a été remplacée par une autre.
@@ Ligne 87: / Ligne 88: @@
 J'espère que vous comprenez maintenant pourquoi je pense que ces volets sont dans le mauvais ordre : vous devez d'abord sélectionner un élément dans le volet de droite afin de remplir le contenu du volet de gauche, alors que la conception conventionnelle d'une interface utilisateur de gauche à droite (pour une langue basée sur le LTR) suggère que le volet dans lequel vous effectuez l'action devrait être à gauche de celui qui réagit à cette action.
-En plus des boutons permettant de supprimer des propriétés individuelles, vous avez sans doute remarqué qu'il y a des boutons de suppression à côté des ID dans le volet de droite. En cliquant sur l'un d'entre eux, le nom de la classe sera supprimé de la propriété "class" de cet élément, ce qui le supprimera de la boîte de dialogue, ainsi que toutes les règles de classe qui s'y appliquent. Une fois de plus, cependant, toutes les règles conflictuelles qui se trouvaient précédemment dans l'attribut "style" ont disparu depuis longtemps, et vous risquez donc de vous retrouver avec un remplissage noir et aucun trait.
+En plus des boutons permettant de supprimer des propriétés individuelles, vous avez sans doute remarqué qu'il y a des boutons de suppression à côté des ID dans le volet de droite. En cliquant sur l'un d'entre eux, le nom de la classe sera supprimé de la propriété « class » de cet élément, ce qui le supprimera de la boîte de dialogue, ainsi que toutes les règles de classe qui s'y appliquent. Une fois de plus, cependant, toutes les règles conflictuelles qui se trouvaient précédemment dans l'attribut « style » ont disparu depuis longtemps, et vous risquez donc de vous retrouver avec un remplissage noir et aucun trait.
-La prochaine fois, nous ajouterons quelques éléments supplémentaires à notre sélection, nous verrons comment utiliser au mieux cette boîte de dialogue en remplacement de l'ancienne fonction " Jeux de sélection " et nous commencerons à explorer certains des sélecteurs CSS les plus variés qui peuvent être utilisés dans cette boîte de dialogue - avec toutefois quelques réserves importantes !
+La prochaine fois, nous ajouterons quelques éléments supplémentaires à notre sélection, nous verrons comment utiliser au mieux cette boîte de dialogue en remplacement de l'ancienne fonction « Ensembles de sélection » et nous commencerons à explorer certains des sélecteurs CSS les plus variés qui peuvent être utilisés dans cette boîte de dialogue - avec toutefois quelques réserves importantes !