Modifications sources de défaillances apportées aux CSS personnalisées dans ThingWorx 9.3.0
Un polyfill a été supprimé de ThingWorx 9.3.0, ce qui peut entraîner l'arrêt du fonctionnement des CSS personnalisées lors de la mise à niveau à partir d'une version précédente d'ThingWorx.
 |
Seules les CSS personnalisées sont affectées par cette modification. Les personnalisations effectuées à l'aide de l'éditeur de thème stylistique dans Composer ou à l'aide des propriétés de style de widget dans Mashup Builder ne sont pas affectées.
|
Cette rubrique décrit le problème et la politique PTC concernant les modifications sources de défaillances apportées aux CSS personnalisées dans ThingWorx 9.3.0.
Contexte
Lorsque les widgets de composant Web ont été ajoutés à ThingWorx, les navigateurs Web n'incluaient pas la prise en charge officielle de la spécification CSS Shadow Parts. Par conséquent, un polyfill (ptcs-shadow-style) était utilisé pour assurer la prise en charge de la syntaxe CSS ::part. Ce polyfill a implémenté une version antérieure de la spécification qui a été mise à jour ultérieurement.
Comme la spécification CSS Shadow Parts changeait et que les navigateurs Web commençaient à fournir une prise en charge officielle de la syntaxe ::part, le polyfill a été supprimé dans ThingWorx 9.3.0. Cette suppression présentait les avantages suivants :
• Les performances étaient améliorées, car l'utilisation des implémentations natives de l'API du navigateur est beaucoup plus rapide.
• L'implémentation ThingWorx de la syntaxe CSS ::part est alignée sur la dernière version de la spécification qui est implémentée de manière native dans les navigateurs Web.
Désormais, les widgets de composant Web ne prennent en charge que les implémentations natives de navigateur de la spécification. Certains aspects du polyfill initial ne sont plus pris en charge, car la dernière version de la spécification est plus restrictive. Certains sélecteurs CSS précédemment pris en charge ne fonctionneront plus. Vous ne pouvez pas utiliser des sélecteurs CSS qui appliquent le style aux sous-pièces en fonction de leur position dans l'arborescence DOM.
Par exemple, les sélecteurs suivants ne sont plus pris en charge :
ptcs-chart-line::part(legend)::part(grid){
...
}
.blue > .widget-ptcslist::part(list-item):nth-child(even) {
...
}
...
}
.blue > .widget-ptcslist::part(list-item):nth-child(even) {
...
}
Le document de spécification est à l'état de brouillon depuis novembre 2018 et peut être mis à jour ultérieurement. En outre, la structure des composants Web PTC peut changer alors que nous continuons d'améliorer la bibliothèque du kit de développement Web Component SDK dans les futures versions de ThingWorx.
Solutions alternatives
Nous vous recommandons vivement d'utiliser CSS avec parcimonie lorsque vous stylisez vos applications composites. L'utilisation de CSS personnalisées nécessite de vérifier et de corriger manuellement les problèmes de style lors de la mise à niveau de votre version de ThingWorx. Pour éviter ce processus, utilisez des thèmes et propriétés stylistiques pour personnaliser l'apparence de vos applications composites et widgets dans la mesure du possible.
L'impact de cette modification sur les CSS personnalisées est similaire lors de la mise à niveau vers les versions 9.3.0, 9.3.1, 9.3.2, 9.3.4 et ultérieures. Toutefois, dans la version 9.3.4, nous avons ajouté la prise en charge de l'utilisation d'instructions @supports pour inclure un élément ptcs-style-unit, ce qui vous offre plus de souplesse lors de l'accès aux pièces Shadow DOM. Toutefois, vous pouvez toujours appliquer des CSS personnalisées sans utiliser cette méthode. Les nouveaux composants Web qui ont été introduits dans la version 9.3 ou ultérieure ne sont pas affectés par cette modification.
Pour plus d'informations, consultez les ressources suivantes :