Last time, I indulged in a whistle-stop tour of CSS support in SVG files, in preparation for this month’s topic: the Selectors and CSS dialog. As I noted previously, this dialog first appeared as a hidden option in Inkscape version 1.0, and was then officially exposed in version 1.0.1. It can be opened using the Ctrl-Shift-Q keyboard shortcut (even on v1.0), with later releases also exposing it via the Object menu. In my experience, it’s still a little buggy, even in version 1.1, and can lead to full application crashes, so please make sure to save regularly if you decide to use it. To describe the operation of this dialog requires a sample document on which to work – preferably one with a mixture of elements to target via CSS selectors. For the purposes of this article, therefore, I’ve created a collection of sixteen elements (four squares, four circles, four stars, and four Bézier paths), arranged as four rows, with the content of each row being grouped. 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 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.
As usual, I’ve omitted a lot of the SVG content for clarity, including additional style properties and the namespaces of most of the elements and attributes. Note the first path, however, where I have specifically included the sodipodi:type attribute which tells Inkscape that this is a star primitive. The Bézier path, on the other hand, does not have such an attribute, as that is just a standard SVG path element and doesn’t require additional hints for Inkscape to understand how to work with it. The IDs are just the arbitrary values assigned by Inkscape – in a real file you might want to edit them to be more descriptive or user-friendly. Now it’s time to open the Selectors and CSS dialog (hereafter referred to as the Selectors dialog, for brevity), via the Object > Selectors and CSS… menu entry. With nothing selected on the page, be prepared for something of a disappointment, as it hardly screams functionality at this point. 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, 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.
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).
Let’s just run with this for now, accepting the default selector value by clicking the Add button. Brace yourself for the overwhelming complexity of the change it makes to the main dialog. When you’ve fully recovered from the excitement, you might want to take a moment to really appreciate what has happened: there’s now an entry in the right-hand panel labelled “.Class1”, and with another plus button next to it! You can select the new row, but double-clicking won’t let you change the value – there’s no way to edit a selector once it’s been added, so if you make a mistake your only recourse is to delete it and start again. Speaking of deleting it, our minus button now has a purpose: with the new entry selected, clicking the button will delete the entire entry. And what of our new entry-specific plus button? Clicking on it at this stage does absolutely nothing. There’s not even a tooltip to suggest what it is meant to do. The purpose of this button is to add the class name to any selected SVG elements, causing them to match the CSS selector and appear in the dialog. Let’s look at a practical example by selecting the first element from each row. Remember that each row is a separate group, so we have to hold Ctrl+Shift to select an object within the group (Ctrl) and add to the existing selection (Shift). With those keys held, it’s a simple task to click on the first object in each row, giving us a selection of four items. Clicking on the plus button now will add the “Class1” class to each of the elements, and the Selectors dialog updates to show us the IDs of the elements that match the selector.
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é, 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.
In the XML code those elements now look something like this: <rect class=“Class1” … /> Note that Inkscape gives <circle> elements an ID that begins with “path”, so the three path and one rect IDs listed actually represent two paths (the star and the Bézier path), a circle and a square. It’s a little confusing at first, but just remember that an ID is just a unique label, and doesn’t have to relate to the type of object. Clicking on a single ID in the dialog will select the associated object on the canvas, so it’s pretty easy to keep track of which elements have which IDs. For now, we’ll assume the CSS selector itself (“.Class1”) is selected, per the previous image. You’ll notice that the left-hand pane has now gained a little content – and a plus button of its own. The left pane shows the CSS properties that apply to the currently selected elements, in this case reflecting the stylesheet that Inkscape has created in the head of the document. The plus button lets us add more properties. The UI is a little clunky, but when you click the button, a new blank entry will be created with the property name field focused, ready for you to type into. Put in the property name, then press Enter or Tab to move to the value field, where you can type a suitable value for your property. Here, for example, is what happens to our selection when I set a couple of CSS colors, one for the stroke and another for the fill.
Dans le code XML, ces éléments ressemblent maintenant à quelque chose comme ceci :
<rect class=“Class1” … />
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é 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.
Each property has a button, which can be used to remove it completely, and a checkbox that can be used to toggle it on and off. But these don’t necessarily work the way you might expect. In this example, you might think that turning off (or deleting) the fill property would revert the objects back to their previous red fill, but that’s not the case at all. Instead the fill changes to black. What’s going on here? Remember from last month that CSS properties in a “style” attribute override those from the stylesheet. But our elements all had their fill and stroke set via style attributes when we created them, so how did the yellow fill (which comes from the stylesheet) ever work in the first place? The answer is that Inkscape automatically deletes conflicting properties from the style attribute when you start adding them via the Selectors dialog. In this case, it means that the red fill from the style attribute was removed as soon as the yellow fill was added to the stylesheet. Turn that entry off, however, and Inkscape no longer has any idea what fill color to use. In that case the SVG spec is quite clear: the initial value for fill – the one that Inkscape falls back to – is black. The spec also defines the initial value for stroke to be “none” - so disabling or deleting the stroke property actually results in the whole stroke being removed, rather than a thick black stroke remaining.
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, 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 » (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.
Side effects like this mean that working with the Selectors dialog can be a little tricky if you’re not careful, or don’t have a thorough understanding of the SVG and CSS rules. It’s easy to assume that you can add a fill color, then just delete it to revert your change if you want, but, as this example demonstrates, the act of adding a rule can make a change to your XML content in a way that won’t be reverted when you remove the rule. With both rules re-enabled, let’s take a look at the left-hand pane when only a single ID entry is selected in the right pane. 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 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.
Hopefully you can now see why I think these panes are in the wrong order: you first have to select an item in the right-hand pane in order to populate the content in the left one, whereas conventional left-to-right UI design (for an LTR based language) would suggest the pane in which you perform the action should be to the left of the one which reacts to that action. As well as buttons to delete individual properties, you’ve no-doubt noticed that there are delete buttons next to the IDs in the right hand pane. Clicking one of these will remove the class name from that element’s “class” property, removing it from the dialog, and removing any class rules that apply to it. Once again, however, any conflicting rules that were previously in the “style” attribute are long since gone, so you’re likely to end up with a black fill and no stroke once more. Next time, we’ll add a few more items to our selection, look at how best to use this dialog as a replacement for the old “Selection Sets” feature, and begin to explore some of the more varied CSS selectors that can be used in this dialog – albeit with some pretty big caveats!
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.
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 !