| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue175:inkscape [2021/12/01 14:08] – d52fr | issue175:inkscape [2021/12/03 18:20] (Version actuelle) – andre_domenech |
|---|
| Ce mois-ci, c'est la dernière partie de notre exploration de la nouvelle boîte de dialogue Sélecteurs et CSS (« boîte de dialogue Sélecteurs » en abrégé). Comme dans les parties précédentes, nous allons travailler avec cette collection de formes disposées en quatre groupes d'objets, un pour chaque ligne. | Ce mois-ci, c'est la dernière partie de notre exploration de la nouvelle boîte de dialogue Sélecteurs et CSS (« boîte de dialogue Sélecteurs » en abrégé). Comme dans les parties précédentes, nous allons travailler avec cette collection de formes disposées en quatre groupes d'objets, un pour chaque ligne. |
| |
| Nous avons précédemment examiné l'utilisation des sélecteurs de classe et d'élément dans la boîte de dialogue, mais, comme vous vous en souvenez peut-être dans la partie 112, CSS permet une variété d'autres sélecteurs, et différentes façons de les combiner. L'analyseur CSS d'Inkscape ne prend pas en charge toutes ces possibilités, mais il en gère certaines. Qu'ils vous soient utiles ou non est une toute autre question, mais, dans cet épisode, je vais examiner certains sélecteurs avancés qui fonctionnent, ainsi que d'autres qui, malheureusement, ne fonctionnent pas. | Nous avons précédemment examiné l'utilisation des sélecteurs de classe et d'élément dans la boîte de dialogue, mais, comme vous vous en souvenez peut-être (CF la partie 112), CSS permet une variété d'autres sélecteurs et différentes façons de les combiner. L'analyseur CSS d'Inkscape ne prend pas en charge toutes ces possibilités, mais il en gère certaines. Qu'ils vous soient utiles ou non est une toute autre question, mais, dans cet épisode, je vais examiner certains sélecteurs avancés qui fonctionnent, ainsi que d'autres qui, malheureusement, ne fonctionnent pas. |
| |
| En partant d'une boîte de dialogue de sélecteurs vierge, j'ai créé une classe appelée « squares » qui inclut tous les carrés de notre image échantillon, et une deuxième classe appelée « col-1 » qui contient tous les éléments de la première colonne d'objets. Comme vous pouvez le voir, l'élément « #rect31 » apparaît dans les deux, comme vous pouvez vous y attendre. | En partant d'une boîte de dialogue de sélecteurs vierge, j'ai créé une classe appelée « squares » qui inclut tous les carrés de notre image échantillon, et une deuxième classe appelée « col-1 » qui contient tous les éléments de la première colonne d'objets. Comme vous pouvez le voir, l'élément « #rect31 » apparaît dans les deux, comme vous pouvez vous y attendre. |
| Using these selectors, I’ve added rules to change the color of any object where both classes match, and the stroke of any <rect> with the “col-1” class. The effect is that the square at the top left has both the new rules applied, but no other elements are affected.** | Using these selectors, I’ve added rules to change the color of any object where both classes match, and the stroke of any <rect> with the “col-1” class. The effect is that the square at the top left has both the new rules applied, but no other elements are affected.** |
| |
| En désélectionnant tout ce qui se trouve dans le dessin et en cliquant sur le bouton plus en bas de la boîte de dialogue, on déclenche la boîte de dialogue permettant d'ajouter un nouveau sélecteur - pré-rempli avec « .Class1 » comme d'habitude. Comme nous l'avons vu la dernière fois, il est également possible d'entrer un nom d'élément ici, mais, cette fois, nous allons créer quelque chose d'encore plus complexe : un sélecteur qui cible plusieurs classes. Si nous saisissons la valeur « .squares.col-1 » comme chaîne unique, sans espace, le sélecteur ne ciblera que les éléments auxquels sont appliquées les classes « squares » et « col-1 ». Dans notre cas, le seul élément qui correspond à cette combinaison est le carré en haut à gauche. | En désélectionnant tout ce qui se trouve dans le dessin et en cliquant sur le bouton plus en bas de la boîte de dialogue, on déclenche la boîte de dialogue permettant d'ajouter un nouveau sélecteur, pré-rempli avec « .Class1 » comme d'habitude. Comme nous l'avons vu la dernière fois, il est également possible d'entrer un nom d'élément ici, mais, cette fois, nous allons créer quelque chose d'encore plus complexe : un sélecteur qui cible plusieurs classes. Si nous saisissons la valeur « .squares.col-1 » comme chaîne unique, sans espace, le sélecteur ne ciblera que les éléments auxquels sont appliquées à la fois les classes « squares » et « col-1 ». Dans notre cas, le seul élément qui correspond à cette combinaison est le carré en haut à gauche. |
| |
| Nous pouvons également combiner un sélecteur d'élément avec un sélecteur de classe. En saisissant « rect.col-1 », par exemple, seuls les éléments <rect> auxquels est appliquée la classe « col-1 » seront pris en compte. Encore une fois, la seule chose qui correspond dans ce cas est le carré en haut à gauche. | Nous pouvons également combiner un sélecteur d'élément avec un sélecteur de classe. En saisissant « rect.col-1 », par exemple, seuls les éléments <rect> auxquels est appliquée la classe « col-1 » seront pris en compte. Encore une fois, la seule chose qui correspond dans ce cas est le carré en haut à gauche. |
| The fact that Inkscape piles its own internal attributes onto <path> elements in order to support some of its basic shapes does lead onto another type of CSS selector that’s worth further examination: the attribute selector. In the world of CSS it’s possible to select elements that have a particular attribute, or which have an attribute set to a particular value. The table below covers the main selectors that will work in a web browser.** | The fact that Inkscape piles its own internal attributes onto <path> elements in order to support some of its basic shapes does lead onto another type of CSS selector that’s worth further examination: the attribute selector. In the world of CSS it’s possible to select elements that have a particular attribute, or which have an attribute set to a particular value. The table below covers the main selectors that will work in a web browser.** |
| |
| La possibilité de combiner des classes de cette manière peut s'avérer utile, notamment si vous souhaitez utiliser des noms de classe pour catégoriser vos éléments. Lors de la production d'actifs de jeu, par exemple, vous pouvez avoir plusieurs images dans un seul document, couvrant différents types de paysages à différentes saisons, et avec différents actifs. Vous avez besoin de trouver rapidement l'image d'une tuile de forêt hivernale avec une mine ? Ajoutez un nouveau sélecteur pour « .winter.forest.mine » - en supposant que vous avez déjà défini les bonnes classes sur vos images. | La possibilité de combiner des classes de cette manière peut s'avérer utile, notamment si vous souhaitez utiliser des noms de classe pour catégoriser vos éléments. Lors de la production d'éléments de jeu, par exemple, vous pouvez avoir plusieurs images dans un seul document, couvrant différents types de paysages à différentes saisons, et avec différents éléments. Vous avez besoin de trouver rapidement l'image d'une tuile de forêt hivernale avec une mine ? Ajoutez un nouveau sélecteur pour « .winter.forest.mine » - en supposant que vous avez déjà défini les bonnes classes sur vos images. |
| |
| La combinaison d'éléments et de classes est probablement moins utile, en particulier compte tenu du fait que de nombreuses primitives d'Inkscape ne sont en fait que des éléments <path> dans le SVG sous-jacent, et sont donc indiscernables les unes des autres via un simple sélecteur d'élément. Si vous pouvez penser à un bon cas d'utilisation pour cela, cependant, il est agréable de savoir qu'Inkscape supporte déjà le format. | La combinaison d'éléments et de classes est probablement moins utile, en particulier compte tenu du fait que de nombreuses primitives d'Inkscape ne sont en fait que des éléments <path> dans le SVG sous-jacent, et sont donc indiscernables les unes des autres via un simple sélecteur d'élément. Si vous pouvez penser à un bon cas d'utilisation pour cela, cependant, il est agréable de savoir qu'Inkscape supporte déjà le format. |
| C'est peut-être à cause de cet espace de noms. Que diriez-vous de [sodipodi:type] ou [sodipodi:type="star"] ? Non, ils ne fonctionnent pas non plus. En fait, les espaces de noms en CSS sont un peu pénibles, car ils vous obligent à redéfinir vos préfixes dans le CSS en plus de la définition dans le XML lui-même. Dans la règle du sélecteur, l'espace de noms est ensuite séparé de la valeur par un caractère pipe, et non par deux points. Donc, en théorie, l'ajout manuel d'une règle « @namespace » à la feuille de style, puis l'utilisation de [sodipodi|type="star"] devraient faire l'affaire. Mais pas dans Inkscape. | C'est peut-être à cause de cet espace de noms. Que diriez-vous de [sodipodi:type] ou [sodipodi:type="star"] ? Non, ils ne fonctionnent pas non plus. En fait, les espaces de noms en CSS sont un peu pénibles, car ils vous obligent à redéfinir vos préfixes dans le CSS en plus de la définition dans le XML lui-même. Dans la règle du sélecteur, l'espace de noms est ensuite séparé de la valeur par un caractère pipe, et non par deux points. Donc, en théorie, l'ajout manuel d'une règle « @namespace » à la feuille de style, puis l'utilisation de [sodipodi|type="star"] devraient faire l'affaire. Mais pas dans Inkscape. |
| |
| J'ai essayé de très nombreuses combinaisons différentes de sélecteurs d'attributs, avec ou sans espace de noms, mais aucune d'entre elles ne fonctionne dans Inkscape. C'est vraiment dommage car il est impossible de cibler des primitives spécifiques d'Inkscape ou des éléments avec d'autres attributs propriétaires. | J'ai essayé de très nombreuses combinaisons différentes de sélecteurs d'attributs, avec ou sans espaces de noms, mais aucune d'entre elles ne fonctionne dans Inkscape. C'est vraiment dommage car il est impossible de cibler des primitives spécifiques d'Inkscape ou des éléments avec d'autres attributs propriétaires. |
| |
| Si vous êtes un développeur Web, sachez que ces sélecteurs fonctionnent effectivement comme annoncé dans les navigateurs Web, à condition d'inclure la déclaration d'espace de nom CSS et d'utiliser un séparateur de pipe. Ce bloc <style>, par exemple, fera apparaître toutes les étoiles du document de test avec un remplissage orange dans un navigateur Web, mais il ne fonctionne pas lorsque le même fichier est chargé dans Inkscape. | Si vous êtes un développeur Web, sachez que ces sélecteurs fonctionnent effectivement comme annoncé dans les navigateurs Web, à condition d'inclure la déclaration d'espace de nom CSS et d'utiliser un séparateur pipe. Ce bloc <style>, par exemple, fera apparaître toutes les étoiles du document de test avec un remplissage orange dans un navigateur Web, mais il ne fonctionne pas lorsque le même fichier est chargé dans Inkscape. |
| |
| |
| </style> | </style> |
| |
| Bien qu'Inkscape ne fonctionne pas avec les sélecteurs d'attributs, il existe quelques autres règles CSS utiles dont il semble satisfait. Tout d'abord, nous avons le sélecteur descendant : il suffit de saisir deux sélecteurs avec un espace entre eux, et la règle ne correspondra que si l'élément correspondant au second sélecteur est un descendant (dans la structure XML) d'un élément correspondant au premier sélecteur. | Bien qu'Inkscape ne fonctionne pas avec les sélecteurs d'attributs, il existe quelques autres règles CSS utiles dont il semble satisfait. Tout d'abord, nous avons le sélecteur descendant : il suffit de saisir deux sélecteurs séparés par un espace, et la règle ne correspondra que si l'élément correspondant au second sélecteur est un descendant (dans la structure XML) d'un élément correspondant au premier sélecteur. |
| |
| Par exemple, dans notre fichier de test, chaque rangée d'objets se trouve dans un groupe distinct, et j'ai défini l'ID de chaque groupe (à l'aide de la boîte de dialogue Propriétés de l'objet) comme « row-1 », « row-2 » et ainsi de suite. Si je veux sélectionner tous les éléments <path> de la rangée 3 (c'est-à-dire les objets étoile et chemin de Bézier), je peux créer un sélecteur avec la chaîne « #row-3 path » pour trouver chaque élément <path>, mais seulement s'il est un descendant de l'élément avec l'ID « row-3 ». | Par exemple, dans notre fichier de test, chaque rangée d'objets se trouve dans un groupe distinct, et j'ai défini l'ID de chaque groupe (à l'aide de la boîte de dialogue Propriétés de l'objet) comme « row-1 », « row-2 » et ainsi de suite. Si je veux sélectionner tous les éléments <path> de la rangée 3 (c'est-à-dire les objets étoile et chemin de Bézier), je peux créer un sélecteur avec la chaîne « #row-3 path » pour trouver chaque élément <path>, mais seulement s'il est un descendant de l'élément avec l'ID « row-3 ». |
| La pseudo-classe « :not() » figure également sur la liste des règles CSS utiles qui ne fonctionnent pas. Elle devrait vous permettre de sélectionner les éléments qui ne correspondent pas à une règle particulière. Par exemple, « :not(path) » pour sélectionner tous les éléments qui ne sont pas des chemins. Au lieu de cela, Inkscape se contente d'avaler la nouvelle règle lorsque vous la saisissez - sans qu'elle n'apparaisse du tout dans la boîte de dialogue. Le fait de la préfixer avec un sélecteur de classe (par exemple, « .row-1:not(path) ») lui permet d'apparaître, mais elle ne fonctionne certainement pas comme elle le devrait. | La pseudo-classe « :not() » figure également sur la liste des règles CSS utiles qui ne fonctionnent pas. Elle devrait vous permettre de sélectionner les éléments qui ne correspondent pas à une règle particulière. Par exemple, « :not(path) » pour sélectionner tous les éléments qui ne sont pas des chemins. Au lieu de cela, Inkscape se contente d'avaler la nouvelle règle lorsque vous la saisissez - sans qu'elle n'apparaisse du tout dans la boîte de dialogue. Le fait de la préfixer avec un sélecteur de classe (par exemple, « .row-1:not(path) ») lui permet d'apparaître, mais elle ne fonctionne certainement pas comme elle le devrait. |
| |
| Il existe quelques pseudo-classes qui fonctionnent en quelque sorte avec Inkscape, mais pas suffisamment bien pour être véritablement utiles. Les sélecteurs « :first-child », « :last-child » et « :nth-child() » fonctionnent, mais uniquement s'ils sont appliqués à un sélecteur de classe ou d'ID. Par exemple, « .squares:first-child » sélectionnera tout élément de la classe « squares » qui est le premier enfant de son parent. Dans le fichier d'exemple, cela correspondra au carré en haut à gauche, car il est le premier enfant de l'élément de groupe qui contient la ligne. En théorie, vous devriez pouvoir utiliser simplement « :first-child » ou « *:first-child » pour faire correspondre le premier élément de n'importe quel parent mais, en pratique, cela ne fonctionne pas du tout. C'est vraiment dommage car cela rend pratiquement impossible l'utilisation de la puissante pseudo-classe « :nth-child() » pour sélectionner tous les enfants impairs d'un groupe, ou tous les quatrièmes, par exemple. | Il existe quelques pseudo-classes qui fonctionnent plus ou moins avec Inkscape, mais pas suffisamment bien pour être véritablement utiles. Les sélecteurs « :first-child », « :last-child » et « :nth-child() » fonctionnent, mais uniquement s'ils sont appliqués à un sélecteur de classe ou d'ID. Par exemple, « .squares:first-child » sélectionnera tout élément de la classe « squares » qui est le premier enfant de son parent. Dans le fichier d'exemple, cela correspondra au carré en haut à gauche, car il est le premier enfant de l'élément de groupe qui contient la ligne. En théorie, vous devriez pouvoir utiliser simplement « :first-child » ou « *:first-child » pour faire correspondre le premier élément de n'importe quel parent mais, en pratique, cela ne fonctionne pas du tout. C'est vraiment dommage car cela rend pratiquement impossible l'utilisation de la puissante pseudo-classe « :nth-child() » pour sélectionner tous les enfants impairs d'un groupe, ou tous les quatrièmes, par exemple. |
| |
| Un ensemble connexe de sélecteurs est « :first-of-type », « :nth-of-type », plus quelques autres chaînes « -of-type ». Si vous essayez de les utiliser, Inkscape se plantera complètement, alors évitez-les absolument ! | Un ensemble connexe de sélecteurs est « :first-of-type », « :nth-of-type », plus quelques autres chaînes « -of-type ». Si vous essayez de les utiliser, Inkscape se plantera complètement, alors évitez-les absolument ! |
