--- title: "Optimisez l'utilisation de vos designs StyleVision grâce à la sélection dynamique de fichiers CSS" date: "2012-01-10" description: Découvrez comment améliorer les conceptions StyleVision en sélectionnant dynamiquement des fichiers CSS en fonction de conditions spécifiques, ce qui permet de simplifier la mise en forme pour différents scénarios. --- Status: #blog Tags: Categories: [Altova](/blog/fr/category/altova.md) # Optimisez l'utilisation de vos designs StyleVision grâce à la sélection dynamique de fichiers CSS L'un des principaux avantages de StyleVision est sa grande flexibilité. Avec StyleVision, vous pouvez [concevoir des feuilles de style et des rapports visuellement sophistiqués](https://www.altova.com/fr/stylevision.html) pour différents formats de sortie, notamment HTML, PDF et des formulaires électroniques standard. Maintenant, StyleVision facilite encore davantage l'adaptation aux différents besoins de formatage au sein d'une seule conception, grâce à la sélection dynamique de fichiers CSS, une nouvelle fonctionnalité introduite dans [StyleVision 2012](https://www.altova.com/fr/whatsnew.html). Bien que vous puissiez toujours gérer la plupart des tâches de mise en forme directement dans l'outil de conception StyleVision, la sélection dynamique des fichiers CSS vous permet de créer un modèle unique utilisable dans de nombreuses situations. Pour illustrer cela, nous avons créé une facture pour la société fictive Nanonull. La mise en forme de cette facture varie en fonction du nombre de jours écoulés entre la date d'émission de la facture et la date d'échéance. Bien que nous aurions pu utiliser XPath pour modifier la mise en forme de chaque élément en fonction du nombre de jours écoulés, il est plus efficace, dans ce cas, de créer des fichiers CSS distincts qui s'appliquent à différents scénarios. [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) Voici la facture que nous avons conçue avec StyleVision. Vous remarquerez qu'au-delà des titres en gras, elle est presque dépourvue de mise en forme. Nous appliquerons la mise en forme en fonction du nombre de jours écoulés entre la date d'émission de la facture et la date d'échéance, grâce à des fichiers CSS. [![](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png)](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png) Maintenant, nous pouvons créer nos fichiers CSS dans XMLSpy, le logiciel d'Altova [Éditeur XML](https://www.altova.com/fr/xml-editor/) avec une prise en charge intégrée pour l'édition des langages CSS2 et CSS3. Tout d'abord, nous allons créer un fichier CSS pour les factures dont la date d'échéance est postérieure à la date d'émission (c'est-à-dire les factures qui ne sont pas impayées). Ici, nous avons simplement créé le sélecteur "body" avec un fond jaune, le logo Nanonull et une classe pour l'en-tête. [![](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png)](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png) Maintenant, nous allons créer une feuille de style CSS plus élaborée pour les factures impayées. Le sélecteur "body" inclura une image indiquant le dépassement de délai, le sélecteur "paragraph" aura une police rouge en gras de 20 points, et les classes "header" et "small header" auront une police rouge en gras de différentes tailles. [![](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png) Maintenant, nous pouvons affecter les fichiers CSS à la conception StyleVision, puis attribuer des classes à différents éléments de la conception. Dans StyleVision, il suffit de cliquer sur "ajouter un nouveau fichier CSS" dans la vue d'ensemble de la conception, puis de naviguer vers les fichiers CSS que nous avons créés dans XMLSpy. StyleVision prend en charge plusieurs fichiers CSS au sein de la même conception. Notre conception actuelle se présente ainsi : veuillez noter que la mise en forme provenant à la fois de CSSRegular et de CSSOverdue a été appliquée dans la vue de conception de StyleVision. [![](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png)](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png) Cependant, nous souhaitons attribuer le fichier CSS en fonction de la distance entre la date d'émission de la facture et la date d'échéance. Pour cela, nous cliquerons avec le bouton droit de la souris sur la flèche située à côté du fichier CSS dans la vue d'aperçu du design, et nous choisirons l'option "Sélectionner un seul fichier CSS avec XPath" (ci-dessous). [![](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png)](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png) Cela ouvrira la boîte de dialogue "Sélectionner le fichier CSS à l'aide de XPath" (voir ci-dessous). Nous pouvons utiliser XPath dans cette boîte de dialogue pour sélectionner le fichier CSS approprié en fonction de données variables. Dans cet exemple, nous avons configuré StyleVision pour utiliser le fichier CSSOverdue.css si la date d'échéance de la facture est antérieure à la date d'émission de la facture, et le fichier CSSRegular.css dans tous les autres cas. [![](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png)](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png) Voici l'expression XPath complète que nous avons saisie dans la boîte de dialogue "Sélectionner un fichier CSS à l'aide d'XPath" mentionnée ci-dessus. [![](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png)](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png) Maintenant, nous pouvons attribuer les classes définies dans les fichiers CSS aux différents éléments de conception dans la maquette StyleVision. Dans cet exemple, nous avons affecté le paragraphe contenant le texte "Facture" à la classe "en-tête" dans le volet "Styles". En fonction du contenu de nos fichiers CSS, ce texte apparaîtra en rouge, en gras et avec une taille de 20 points pour les factures impayées, et en noir, en gras et avec une taille de 20 points pour les factures dont la date d'échéance est ultérieure. [![](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png)](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png) De même, nous allons attribuer la date d'échéance de la facture à la classe "petit titre" Nous sommes maintenant prêts à prévisualiser la facture. Voici un aperçu HTML d'une facture impayée : notez que le mot "Facture" et la date d'échéance sont affichés en rouge et en gras, et que l'image "Impayée" est apposée au centre. [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) Examinons maintenant la même facture, mais avec une date d'échéance future. Notez le fond jaune, le logo Nanonull, et le fait que les mots "Facture" et la date d'échéance apparaissent en noir. [![](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png)](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png) La possibilité de sélectionner un fichier CSS en fonction de données dynamiques ouvre un large éventail de possibilités et rend vos conceptions StyleVision encore plus adaptables. Grâce à cette fonctionnalité, vous pouvez modifier la mise en forme en temps réel grâce aux fichiers CSS associés à une conception, ce qui est particulièrement utile pour les conceptions comportant de nombreux éléments. Vous avez créé un projet remarquable en utilisant la feuille de style StyleVision et l'outil de conception de rapports, ou l'un des autres outils d'Altova, et vous souhaitez le présenter ? N'hésitez pas à partager votre expérience avec les autres utilisateurs d'Altova en commentant cet article de blog. Si vous pensez que votre expérience pourrait constituer une excellente étude de cas, veuillez consulter la page [Études de cas Altova](https://www.altova.com/fr/case-studies.html). Si nous utilisons votre témoignage, vous recevrez une carte-cadeau Amazon d'une valeur de 200 $. Nous serions ravis de vous entendre !