Ceci est une ancienne révision du document !
A quick recap on where we got to last time: using CSS classes, we were able to toggle the style of a button by clicking on it. But it worked well only for a simple button with no content. If you clicked on the text inside the button, the toggle wouldn’t work. And you were still able to select the text, which is less than ideal for a button. What we really want to do is to group together several objects, and have a click on any of them act as a trigger for the button. And, with a little more CSS, we can deal with the selectable text issue, too. So let’s begin in Inkscape, by designing a fancier button…
Récapitulons rapidement ce que nous avons vu la dernière fois : en utilisant les classes du CSS, nous avons été capables de basculer le style d'un bouton en cliquant dessus. Mais ça ne marche bien que si le bouton ne contient rien. Si cliquez sur le texte à l'intérieur du bouton, la bascule ne marchait pas. Et vous pouviez encore sélectionner le texte, ce qui est loin d'être idéal pour un bouton. Ce que nous voulons vraiment faire, c'est de regrouper plusieurs objets et qu'un clic sur l'un d'eux agit comme déclencheur pour le bouton. Et, avec un peu plus de CSS, nous pouvons aussi traiter le problème du texte sélectionnable. Aussi, commençons, dans Inkscape, par dessiner un bouton plus raffiné.
This button is made up of four objects, each of which has a solid fill color so there are no stroke colors to worry about. When toggled, we’d like to change the background and text colors, and give the impression of the button being ‘pressed in’ by making the top/left object dark and the bottom/right one light. We can therefore draw up a small table showing the type of each object and the colors it will adopt in each state. We’re going to put the entire button into a single group. This isn’t strictly necessary, as Inkscape’s layers are already SVG group objects, but does make it a little easier to work with if we want to add more than one button (or other objects) to a single layer.
Ce bouton est constitué de quatre objets, chacun d'eux ayant une couleur de fond unie et aucune couleur de contour dont se soucier. Lors d'un basculement, nous aimerions modifier les couleurs du fond et du texte et donner l'impression que le bouton a été « appuyé » en assombrissant le haut et la gauche de l'objet et en éclaircissant le bas et la droite. Nous pouvons par conséquent dessiner un petit tableau montrant le type de chaque objet et les couleurs qu'il adoptera dans chaque état.
Nous mettons tout le bouton dans un seul groupe. Ce n'est pas strictement nécessaire, car les calques d'Inkscape sont déjà des objets du groupe SVG, mais ceci facilitera un peu le travail si nous voulons ajouter plus d'un bouton (ou d'autres objets) à un calque unique.
Now it’s time to set up the CSS classes. The basic idea is that we will give the outer group a class of ‘button’, and then toggle an additional ‘clicked’ class on and off using one of the techniques from last time. Let’s start by looking at the structure of the button, as created by Inkscape, but with most of the attributes removed for clarity: <svg> … <g inkscape:label=“Layer 1”> <g id=“g972”> <rect id=“rect10” /> <path id=“path31” /> <path id=“path874” /> <text id=“text958”> <tspan id=“tspan956”>CLICK ME</tspan> </text> </g> </g> </svg>
Maintenant, c'est le moment de paramétrer les classes du CSS. L'idée de base est que nous attriburons au groupe extérieur un classe « button » (bouton), et ensuite nous basculerons un classe additionnelle « clicked » (cliqué) sur arrêt/marche en utilisant une des techniques vues la dernière fois. Commençons par regarder la structure du bouton, telle que créée dans Inkscape, mais en ayant retiré la plupart des attributs pour plus de clarté :
<svg> …
<g inkscape:label="Layer 1">
<g id="g972">
<rect id="rect10" />
<path id="path31" />
<path id="path874" />
<text id="text958">
<tspan id="tspan956">CLICK ME</tspan>
</text>
</g>
</g>
</svg>
It’s all pretty much as you might expect: a <g> (the layer in Inkscape) containing a <g> (our button) which contains the four objects from the table above. There’s a slight oddity in terms of the <text> object containing a <tspan>, but that’s just down to the way SVG handles text. If we had multiple lines of text in our button, this might make more sense, as all the lines would then be separate <tspan> elements contained within a single <text>, but, even with only one line, Inkscape still uses a <tspan> even though it’s not strictly necessary. To keep the CSS a little clearer, it’s best to change the IDs of some objects, or give them classes to better describe what they do. Otherwise, trying to remember which <path> is which at some point in the future becomes a problem. I tend to use classes for these sorts of labels, so they can be reused in other parts of the file as well. After all, you might want a second button to also have a ‘top-left’ path, so using that string as an ID would become prohibitive (remember, IDs have to be unique in a document, classes don’t).
With the addition of a class for the button group, and one each for the paths, we’ve basically got this structure: <g class=“button”> <rect /> <path class=“top-left” /> <path class=“bottom-right” /> <text> <tspan>CLICK ME</tspan> </text> </g>
Now it’s time to add our CSS rules. We’ll use the immediate child selector (>) to ensure that these rules apply only to elements inside our button, so there’s no danger of all the text in the document becoming blue. Compare these rules with the table earlier in this document and you should be able to see what they’re doing: <svg> … <style> .button > rect { fill: #000080; } .button > .top-left { fill: #ffffff; } .button > .bottom-right { fill: #00002e; } .button > text { fill: #a6a6ff; } </style> <g inkscape:label=“Layer 1”> … </g> </svg>
Don’t forget to also remove any explicit fill and color properties in the ‘style’ attributes of your elements (including the <tspan>), so that the CSS rules you’ve added aren’t overridden. If you load the image into a web browser, it should look the same as the original version in Inkscape. If you’re not sure that your styles are working, or that you’ve removed all the overriding properties on the elements themselves, try temporarily changing the colors in the CSS to other values and confirm that it has an effect when you reload the page. Take a careful look at each CSS rule to make sure you understand what’s happening. Pay particular attention to the difference between an element selector (eg. ‘rect’) and a class selector (with a dot – eg. ‘.button’). So, in this case, ‘.button > rect’ (matches any <rect> that is an immediate child of an element with the ‘button’ class), and ‘.button > .top-left’ (matches any element with the ‘top-left’ class that is an immediate child of an element with the ‘button’ class). Spotting the difference between a class, ID, and element can be tricky. The syntax for CSS is excessively terse, and less than obvious if you’re not used to it, but it’s the language we’re stuck with so we’ll have to make the most of it.
If everything is working okay at this point, it’s time to add another set of rules that will apply when the <g> has both the ‘button’ and the ‘clicked’ classes set. In this case, you just have to concatenate the class selectors – but make sure not to add any spaces between them, as that signifies an ancestor-descendent relationship. Yeah, the syntax of CSS really is that terse. Here’s an example of the additional rule for the <rect>, complete with the new color from the table earlier in the article. I’ll leave it as an exercise for the reader to create the remaining three CSS rules. .button.clicked > rect { fill: #800000; } You can test your new CSS rules by manually adding an extra ‘clicked’ class to the group (so that it reads class=“button clicked”), saving the file, and reloading the page. Remove the extra class and save again before proceeding.
Open the file in Inkscape and select the group that represents the button. In the Object Properties dialog, expand the ‘interactivity’ section and add the following one-liner to the ‘onclick’ field (this should be familiar from last month’s column): this.classList.toggle('clicked'); Save your file, load it into your browser and, if everything has gone smoothly, you should find that clicking on your button toggles it between the two states. One advantage of wrapping everything in a group, and applying the code to that outer layer, is that clicks on any part of the button are passed through to the enclosing element. This avoids our previous problem whereby clicks on the text didn’t toggle the button. But we still have an issue with the text being selectable. We can address this with the ‘pointer-events’ CSS rule, which lets us tell the browser that all mouse activity over the text – including clicks and selection – should be ignored. Modify your first set of rules so that the last one looks like this: .button > text { fill: #a6a6ff; pointer-events: none; }
That deals with the selectability problem, but we can go a step further in making our button seem clickable. By adding a ‘cursor’ property to the group itself, we can make the mouse pointer change when it moves over the button. Add this rule to the CSS: .button { cursor: pointer; } Save, reload, and move your mouse pointer over the button to see the effect.
Previously, I said I would show you how to make clicks on one element have an effect on a completely different one, but I’ve run out of space in this article, so that will have to wait until next time. Until then, however, you now know how to use CSS classes to style more complex collections of objects, allowing for the creation of much fancier buttons. You also know how to respond to clicks in such a collection simply by putting the code onto a group that wraps all the content. Why not spend the next month designing ever more impressive buttons? There are plenty of tutorials online for different styles if you’re stuck for inspiration. You don’t just have to make them toggle when clicked: a common effect is to apply a class in the ‘onmouseover’ field, and remove it in the ‘onmouseout’. You could even go the whole hog and create a button that has both a mouseover effect and a click effect. And next time, I promise, I will show you how to hook your new buttons up to other elements on your page.