| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue172:inkscape [2021/08/30 16:04] – d52fr | issue172:inkscape [2021/08/31 15:49] (Version actuelle) – andre_domenech |
|---|
| Je vais commencer ce mois-ci par une nouvelle plainte sur l'état de la prise en charge des polices dans les navigateurs Web. Une fois de plus, un seul fournisseur de navigateur a effectivement sabordé un format pris en charge par ses pairs, nous laissant, utilisateurs et développeurs, sans alternative pratique. | Je vais commencer ce mois-ci par une nouvelle plainte sur l'état de la prise en charge des polices dans les navigateurs Web. Une fois de plus, un seul fournisseur de navigateur a effectivement sabordé un format pris en charge par ses pairs, nous laissant, utilisateurs et développeurs, sans alternative pratique. |
| |
| J'ai décrit dans le passé la façon dont l'absence de prise en charge des polices SVG par Firefox a effectivement tué le format. Ce fut un véritable coup dur : la possibilité pour un développeur web de modifier dynamiquement les polices à la volée en utilisant JavaScript aurait pu être vraiment révolutionnaire. Plus récemment, il semblait que le format SVG dans OpenType offrirait de nouvelles possibilités en termes de polices de couleur et de prise en charge des bitmaps, mais Google a clos le problème correspondant dans le suivi des bogues de Chromium (#306078) avec un statut WONTFIX, indiquant qu'il n'ajoutera pas la prise en charge de ce format au navigateur. Étant donné la part de marché dominante de Chrome, cela neutralise effectivement une partie de la nouvelle prise en charge des polices dans Inkscape 1.0 que j'ai couverte dans la partie 108 de cette série. | J'ai décrit dans le passé la façon dont l'absence de prise en charge des polices SVG par Firefox a effectivement tué le format. Ce fut un véritable coup dur : la possibilité pour un développeur Web de modifier dynamiquement les polices à la volée en utilisant JavaScript aurait pu être vraiment révolutionnaire. Plus récemment, il semblait que le format SVG dans OpenType offrirait de nouvelles possibilités en termes de polices de couleur et de prise en charge des bitmaps, mais Google a clos le problème correspondant dans le suivi des bogues de Chromium (#306078) avec un statut WONTFIX, indiquant qu'il n'ajoutera pas la prise en charge de ce format au navigateur. Étant donné la part de marché dominante de Chrome, cela neutralise effectivement une partie de la nouvelle prise en charge des polices dans Inkscape 1.0 que j'ai couverte dans la partie 108 de cette série. |
| |
| Les polices variables, telles que décrites dans cet article, fonctionnent déjà et continueront à fonctionner. C'est le format SVG dans OpenType qui est maintenant effectivement mort, bien qu'il soit pris en charge par Firefox, Safari et même les anciennes versions de Edge. Mes propres expériences suggéraient un certain niveau de prise en charge des polices que j'utilisais (par exemple, la police Gilbert Color était rendue dans Chrome, mais uniquement comme une police monochrome). Je soupçonne maintenant que cela était dû aux polices elles-mêmes qui fournissaient un contenu de repli non-SVG, plutôt qu'à la prise en charge par Chrome de ce format. | Les polices variables, telles que décrites dans cet article, fonctionnent déjà et continueront à fonctionner. C'est le format SVG dans OpenType qui est maintenant effectivement mort, bien qu'il soit pris en charge par Firefox, Safari et même les anciennes versions de Edge. Mes propres expériences suggéraient un certain niveau de prise en charge des polices que j'utilisais (par exemple, la police Gilbert Color était rendue dans Chrome, mais uniquement comme une police monochrome). Je soupçonne maintenant que cela était dû aux polices elles-mêmes qui fournissaient un contenu de repli non-SVG, plutôt qu'à la prise en charge par Chrome de ce format. |
| Time will tell whether or not Google’s new format will win out, or font foundries will just embed both the Google and the SVG versions of color glyphs into ever-more-bloated font files. For now, however, despite Inkscape’s support for color fonts – and its partial support for bitmap fonts – you might want to think twice about using these in your projects.** | Time will tell whether or not Google’s new format will win out, or font foundries will just embed both the Google and the SVG versions of color glyphs into ever-more-bloated font files. For now, however, despite Inkscape’s support for color fonts – and its partial support for bitmap fonts – you might want to think twice about using these in your projects.** |
| |
| Ce qui est le plus décourageant dans cette évolution, c'est que la principale raison invoquée par Google pour ne pas prendre en charge SVG dans OpenType semble être qu'ils développent leur propre format pour les polices de caractères en couleur (à nouveau, intégré à OpenType). Si vous doutiez que Google puisse utiliser sa domination du marché pour forcer la direction des standards du web, peut-être que ceci vous fera réaliser qu'un seul vendeur ayant autant de contrôle n'est pas vraiment dans le meilleur intérêt des utilisateurs. La nécessité de disposer de moteurs de rendu multiples et indépendants est la raison pour laquelle je continue à utiliser Firefox comme mon navigateur quotidien. La bataille contre IE a peut-être été gagnée, mais la guerre pour un web véritablement ouvert et indépendant continue. | Ce qui est le plus décourageant dans cette évolution, c'est que la principale raison invoquée par Google pour ne pas prendre en charge SVG dans OpenType semble être qu'ils développent leur propre format pour les polices de caractères en couleur (à nouveau, intégré à OpenType). Si vous doutiez que Google puisse utiliser sa domination du marché pour forcer la direction des standards du Web, peut-être que ceci vous fera réaliser qu'un seul vendeur ayant autant de contrôle n'est pas vraiment dans le meilleur intérêt des utilisateurs. La nécessité de disposer de moteurs de rendu multiples et indépendants est la raison pour laquelle je continue à utiliser Firefox comme mon navigateur quotidien. La bataille contre IE a peut-être été gagnée, mais la guerre pour un Web véritablement ouvert et indépendant continue. |
| |
| Le temps nous dira si le nouveau format de Google l'emportera ou si les fonderies de polices se contenteront d'intégrer les versions Google et SVG des glyphes de couleur dans des fichiers de polices de plus en plus volumineux. Pour l'instant, cependant, malgré la prise en charge des polices de couleur par Inkscape - et sa prise en charge partielle des polices bitmap - vous devriez réfléchir à deux fois avant d'utiliser ces polices dans vos projets. | Le temps nous dira si le nouveau format de Google l'emportera ou si les fonderies de polices se contenteront d'intégrer les versions Google et SVG des glyphes de couleur dans des fichiers de polices de plus en plus volumineux. Pour l'instant, cependant, malgré la prise en charge des polices de couleur par Inkscape - et sa prise en charge partielle des polices bitmap - vous devriez réfléchir à deux fois avant d'utiliser ces polices dans vos projets. |
| CSS dans SVG | CSS dans SVG |
| |
| Le sujet principal de ce mois-ci était censé être le dialogue Sélecteurs et CSS qui a été ajouté de manière expérimentale dans Inkscape v1.0, puis promu à non-expérimental dans la v1.0.1. Mais pour comprendre ce que fait cette boîte de dialogue, il est essentiel d'avoir d'abord une base décente sur le fonctionnement de CSS dans un fichier SVG autonome. L'article de ce mois-ci vous permettra d'acquérir ces connaissances de base - si vous êtes déjà un aficionado de CSS, vous pouvez sauter cet article et revenir le mois prochain pour les détails du dialogue. | Le sujet principal de ce mois-ci était censé être le dialogue Sélecteurs et CSS qui a été ajouté de manière expérimentale dans Inkscape v1.0, puis promu à non expérimental dans la v1.0.1. Mais pour comprendre ce que fait cette boîte de dialogue, il est essentiel d'avoir d'abord une base décente sur le fonctionnement de CSS dans un fichier SVG autonome. L'article de ce mois-ci vous permettra d'acquérir ces connaissances de base - si vous êtes déjà un aficionado de CSS, vous pouvez sauter cet article et revenir le mois prochain pour les détails du dialogue. |
| |
| Commençons par un peu d'histoire. Le format SVG a toujours été un peu confus quant à son identité. Il a été créé au cours de la grande révolte XML de la fin des années 1990, lorsque le World Wide Web Consortium (W3C) faisait pression pour que le XML devienne une base commune à de nombreux formats de fichiers, permettant ainsi aux outils et aux flux de travail de combiner et de convertir facilement différents types de données. SVG était un format vectoriel autonome, qui n'était pas encore intégré directement dans les navigateurs Web, mais l'intention était claire : il devait se conformer aux normes Web existantes et fonctionner avec elles. Il était donc confronté à une sorte de dichotomie : d'une part, il devait pouvoir définir directement les polices, les couleurs et les dimensions afin d'être utilisé comme un format vectoriel générique ne dépendant pas d'un moteur de navigateur ; d'autre part, il devait fonctionner avec la puissance croissante de CSS pour définir les styles pour les utilisateurs qui souhaitaient travailler d'une manière plus axée sur le Web. | Commençons par un peu d'histoire. Le format SVG a toujours été un peu confus quant à son identité. Il a été créé au cours de la grande révolte XML à la fin des années 1990, lorsque le World Wide Web Consortium (W3C) faisait pression pour que le XML devienne une base commune à de nombreux formats de fichiers, permettant ainsi aux outils et aux flux de travail de combiner et de convertir facilement différents types de données. SVG était un format vectoriel autonome, qui n'était pas encore intégré directement dans les navigateurs Web, mais l'intention était claire : il devait se conformer aux normes Web existantes et fonctionner avec elles. Il était donc confronté à une sorte de dichotomie : d'une part, il devait pouvoir définir directement les polices, les couleurs et les dimensions afin d'être utilisé comme un format vectoriel générique ne dépendant pas d'un moteur de navigateur ; d'autre part, il devait fonctionner avec la puissance croissante de CSS pour définir les styles pour les utilisateurs qui souhaitaient travailler d'une manière plus axée sur le Web. |
| |
| |
| If CSS only offered a way to put all the style information into a single attribute, it wouldn’t be terribly useful. But as well as setting styles on each element individually, CSS also offers a mechanism for applying styles across an entire document (or even across multiple documents, but that doesn’t work with Inkscape). It makes it trivial to give all your rectangles the same fill color; or to divide your objects into common classes that share similar styles; or to add override rules that make, for example, the third rectangle in a group have a different stroke width to the others.** | If CSS only offered a way to put all the style information into a single attribute, it wouldn’t be terribly useful. But as well as setting styles on each element individually, CSS also offers a mechanism for applying styles across an entire document (or even across multiple documents, but that doesn’t work with Inkscape). It makes it trivial to give all your rectangles the same fill color; or to divide your objects into common classes that share similar styles; or to add override rules that make, for example, the third rectangle in a group have a different stroke width to the others.** |
| |
| Dans les premiers temps du HTML, les attributs de présentation étaient courants. Les développeurs Web chevronnés se souviennent peut-être des attributs « border », « color » et « bgcolor », entre autres, mais ces fonctionnalités ont rapidement été supplantées par la portée croissante de CSS. Afin de remplacer les styles CSS par élément, les règles CSS pertinentes ont dû être combinées en un seul attribut « style ». Cette méthode fonctionne également avec le SVG, ce qui signifie que notre rectangle rouge à traits épais pourrait également être écrit comme ceci : | Dans les premiers temps du HTML, les attributs de présentation y étaient courants aussi. Les développeurs Web chevronnés se souviennent peut-être des attributs « border », « color » et « bgcolor », entre autres, mais ces fonctionnalités ont rapidement été supplantées par la portée croissante de CSS. Afin de remplacer les styles CSS par élément, les règles CSS pertinentes ont dû être combinées en un seul attribut « style ». Cette méthode fonctionne également avec le SVG, ce qui signifie que notre rectangle rouge à traits épais pourrait également être écrit comme ceci : |
| <rect x="20" y="20" | <rect x="20" y="20" |
| width="100" height="100" | width="100" height="100" |
| Notice that the syntax of the stylesheet is quite different to that of the SVG content. I won’t go into details about how to write CSS here, but suffice to say that it’s made up of multiple rules (delimited by curly braces: { and } ), with each rule starting with a “selector” that determines what elements the rule will apply to. In this case, the selector is just the string “rect” which will make this rule apply to all the <rect> elements in the document.** | Notice that the syntax of the stylesheet is quite different to that of the SVG content. I won’t go into details about how to write CSS here, but suffice to say that it’s made up of multiple rules (delimited by curly braces: { and } ), with each rule starting with a “selector” that determines what elements the rule will apply to. In this case, the selector is just the string “rect” which will make this rule apply to all the <rect> elements in the document.** |
| |
| Ces astuces sont réalisées en déplaçant les informations de style hors des attributs de style, dans un élément <style> dans une feuille de style commune. L'attribut de style s'applique toujours, et remplacera la feuille de style, comme le montre cet exemple abrégé où les deux éléments <rect> partagent les mêmes couleur de remplissage et largeur du trait, ainsi que leur largeur et leur hauteur, mais ont des couleurs de trait différentes : | Ces tours sont réalisées en déplaçant les informations de style hors des attributs de style, dans un élément <style> dans une feuille de style commune. L'attribut de style s'applique toujours et remplacera la feuille de style, comme le montre cet exemple abrégé où les deux éléments <rect> partagent les mêmes couleur de remplissage et largeur du trait, ainsi que leur largeur et leur hauteur, mais ont des couleurs de trait différentes : |
| <style> | <style> |
| rect { | rect { |
| We can also target multiple items by giving them the same value in a “class” attribute and using it preceded by a dot (.) as the CSS selector. This example has four rectangles, split into two different classes. Note that an element can have more than one class, separated by spaces, which allows for a huge amount of flexibility in combining objects into overlapping sets.** | We can also target multiple items by giving them the same value in a “class” attribute and using it preceded by a dot (.) as the CSS selector. This example has four rectangles, split into two different classes. Note that an element can have more than one class, separated by spaces, which allows for a huge amount of flexibility in combining objects into overlapping sets.** |
| |
| Nous pouvons cibler un élément spécifique en nous assurant qu'il possède un attribut « id » dans le contenu du SVG (ce qu'Inkscape fait par défaut), puis en utilisant cet ID, préfixé par un caractère dièse (#), comme sélecteur. Dans cet exemple, nous avons trois rectangles qui partagent tous un style de base commun, mais l'un d'entre eux a sa couleur de remplissage surchargée de cette façon : | Nous pouvons cibler un élément spécifique en nous assurant qu'il possède un attribut « id » dans le contenu du SVG (ce qu'Inkscape fait par défaut), puis en utilisant cet ID, préfixé par un caractère dièse (#), comme sélecteur. Dans cet exemple, nous avons trois rectangles qui partagent tous un style de base commun, mais la couleur de remplissage de l'un d'entre eux est surchargée de cette façon : |
| |
| <style> | <style> |
| /> | /> |
| |
| Les CSS des navigateurs Web fournissent également des sélecteurs d'attributs. Ceux-ci donnent la possibilité de sélectionner des éléments en fonction de la présence, et éventuellement de la valeur, d'attributs spécifiques sur les éléments. Cela serait particulièrement utile pour traiter certains objets natifs d'Inkscape, dont certains sont implémentés comme des éléments <path>, avec un attribut personnalisé pour indiquer à Inkscape de quelle sorte d'objets natifs il s'agit. De même, les groupes et les couches sont tous deux implémentés comme des éléments SVG <g>, avec un attribut spécifique à Inkscape indiquant lesquels sont des calques, ce qui offrirait donc un moyen de les distinguer dans les sélecteurs CSS. Malheureusement, il semble que la boîte de dialogue Sélecteurs et CSS ne reconnaisse pas la syntaxe des sélecteurs d'attributs, aussi je n'y réfléchirai pas davantage ici. | Les CSS des navigateurs Web fournissent également des sélecteurs d'attributs. Ceux-ci donnent la possibilité de sélectionner des éléments en fonction de la présence, et éventuellement de la valeur, d'attributs spécifiques sur les éléments. Cela serait particulièrement utile pour traiter certains objets natifs d'Inkscape, dont certains sont implémentés comme des éléments <path>, avec un attribut personnalisé pour indiquer à Inkscape de quelle sorte d'objets natifs il s'agit. De même, les groupes et les couches sont tous deux implémentés comme des éléments SVG <g>, avec un attribut spécifique à Inkscape indiquant lesquels sont des calques, ce qui offrirait donc un moyen de les distinguer dans les sélecteurs CSS. Malheureusement, il semble que la boîte de dialogue Sélecteurs et CSS ne reconnaisse pas la syntaxe des sélecteurs d'attributs, aussi je n'en parlerai pas davantage ici. |
| |
| **These basic selectors can be combined to further refine the elements that will match. Using “rect.important”, for example, would only match <rect> elements with a class of “important”. It would not match <rect class="warning"> or <path class="important">. In a similar manner, “#r1.high.important” would only match the element with an id of “r1” if it also had both the “important” and “high” classes assigned. | **These basic selectors can be combined to further refine the elements that will match. Using “rect.important”, for example, would only match <rect> elements with a class of “important”. It would not match <rect class="warning"> or <path class="important">. In a similar manner, “#r1.high.important” would only match the element with an id of “r1” if it also had both the “important” and “high” classes assigned. |
| Ces sélecteurs de base peuvent être combinés pour affiner davantage les éléments qui correspondent. L'utilisation de « rect.important », par exemple, ne correspondrait qu'aux éléments <rect> dont la classe est « important ». Elle ne correspondrait pas à <rect class="warning"> ou <path class="important">. De la même manière, "#r1.high.important" ne correspondrait à l'élément dont l'id est "r1" que si les classes « important » et « high » lui sont également attribuées. | Ces sélecteurs de base peuvent être combinés pour affiner davantage les éléments qui correspondent. L'utilisation de « rect.important », par exemple, ne correspondrait qu'aux éléments <rect> dont la classe est « important ». Elle ne correspondrait pas à <rect class="warning"> ou <path class="important">. De la même manière, "#r1.high.important" ne correspondrait à l'élément dont l'id est "r1" que si les classes « important » et « high » lui sont également attribuées. |
| |
| Le navigateur fournit gratuitement certaines classes, sous la forme de « pseudo-classes », qui vous permettent de créer des sélecteurs ciblant des éléments que le navigateur calcule au moment de l'exécution. Ces éléments peuvent changer de façon dynamique, notamment si votre page utilise JavaScript pour manipuler le document. La plupart d'entre eux ne sont pas applicables au monde non dynamique d'Inkscape, mais certains concernent l'ordre dans lequel les éléments apparaissent dans le modèle de document, et fonctionnent de manière limitée dans la boîte de dialogue Sélecteurs et CSS. Par exemple, un sélecteur « rect:first-child » sélectionnerait tout élément <rect> qui est le premier enfant de son parent (par exemple, le premier élément à l'intérieur d'un groupe). Inkscape ne permet pas tout à fait cette syntaxe, cependant, mais il existe une solution de contournement. J'approfondirai les pseudo-éléments et la façon de les utiliser dans Inkscape au fur et à mesure que nous progresserons dans la boîte de dialogue Sélecteurs et CSS. | Le navigateur fournit gratuitement certaines classes, sous la forme de « pseudo-classes », qui vous permettent de créer des sélecteurs ciblant des éléments que le navigateur calcule au moment de l'exécution. Ces éléments peuvent changer de façon dynamique, surtout si votre page utilise JavaScript pour manipuler le document. La plupart d'entre eux ne sont pas applicables au monde non dynamique d'Inkscape, mais certains concernent l'ordre dans lequel les éléments apparaissent dans le modèle de document et fonctionnent de manière limitée dans la boîte de dialogue Sélecteurs et CSS. Par exemple, un sélecteur « rect:first-child » sélectionnerait tout élément <rect> qui est le premier enfant de son parent (par exemple, le premier élément à l'intérieur d'un groupe). Inkscape ne permet pas tout à fait cette syntaxe, cependant, mais il existe une solution de contournement. J'approfondirai les pseudo-éléments et la façon de les utiliser dans Inkscape au fur et à mesure que nous progresserons dans la boîte de dialogue Sélecteurs et CSS. |
| |
| Les sélecteurs peuvent être combinés de différentes manières pour faire correspondre plus d'éléments, ou pour affiner la correspondance en fonction de la structure hiérarchique du document SVG. « #id1, #id2, .important » correspondrait aux deux éléments avec les ID spécifiés, mais aussi à tout élément avec la classe « important ». « text + path », quant à lui, correspondrait à tout élément <path> qui est un frère immédiat d'un élément <text>. Celui-là peut être utile pour styliser tout soulignement que vous avez dessiné avec vos éléments de texte, par exemple. | Les sélecteurs peuvent être combinés de différentes manières pour faire correspondre plus d'éléments, ou pour affiner la correspondance en fonction de la structure hiérarchique du document SVG. « #id1, #id2, .important » correspondrait aux deux éléments avec les ID spécifiés, mais aussi à tout élément avec la classe « important ». « text + path », quant à lui, correspondrait à tout élément <path> qui est un frère immédiat d'un élément <text>. Celui-là peut être utile pour styliser tout soulignement que vous avez dessiné avec vos éléments de texte, par exemple. |
| There’s even more to CSS than the rules I’ve laid out here, but these are the ones that are most useful or relevant when working with the Selectors and CSS dialog. Even so, it’s a lot to take on board if you’re not already familiar with CSS. Next month, it will hopefully start to make a bit more sense as we begin our look at the new dialog.** | There’s even more to CSS than the rules I’ve laid out here, but these are the ones that are most useful or relevant when working with the Selectors and CSS dialog. Even so, it’s a lot to take on board if you’re not already familiar with CSS. Next month, it will hopefully start to make a bit more sense as we begin our look at the new dialog.** |
| |
| Un simple caractère espace crée une règle qui correspond si le deuxième élément est un descendant (éventuellement même un descendant profondément imbriqué) du premier. Par exemple, « g.primary rect » correspond à un <rect> qui se trouve quelque part à l'intérieur d'un groupe dont la classe est « primary ». D'autre part, « g.primary > rect » ne correspondrait au <rect> que s'il est un enfant immédiat du groupe primaire, et non s'il est imbriqué plus loin dans d'autres groupes. | Un simple caractère espace crée une règle qui correspond si le deuxième élément est un descendant (éventuellement même un descendant profondément imbriqué) du premier. Par exemple, « g.primary rect » correspond à un <rect> qui se trouve quelque part à l'intérieur d'un groupe dont la classe est « primary ». En revanche, « g.primary > rect » ne correspondrait au <rect> que s'il est un enfant immédiat du groupe primaire, et non s'il est imbriqué plus loin dans d'autres groupes. |
| |
| Avec les informations des derniers paragraphes, voyez si vous pouvez donner un sens à ce fichier d'exemple : | Avec les informations des derniers paragraphes, voyez si vous pouvez donner un sens à ce fichier d'exemple : |
