Zu Fehlern führende Änderungen an benutzerdefiniertem CSS in ThingWorx 9.3.0
In ThingWorx 9.3.0 wurde ein Polyfill entfernt. Dies kann dazu führen, dass benutzerdefiniertes CSS beim Upgrade von einer früheren Version von ThingWorx nicht mehr funktioniert.
 |
Von dieser Änderung ist nur benutzerdefiniertes CSS betroffen. Alle Anpassungen, die mit dem Stilthema-Editor in Composer oder mit Widget-Stileigenschaften in Mashup Builder durchgeführt werden, sind davon nicht betroffen.
|
Dieses Thema beschreibt das Problem und die PTC Richtlinie für zu Fehlern führenden Änderungen an benutzerdefiniertem CSS in ThingWorx 9.3.0.
Hintergrund
Als Webkomponenten-Widgets zu ThingWorx hinzugefügt wurden, beinhalteten Webbrowser keine offizielle Unterstützung für die Spezifikation für CSS-Schattenteile. Daher wurde ein Polyfill (ptcs-shadow-style) verwendet, um die CSS-Syntax "::part" zu unterstützen. Dieses Polyfill implementierte eine frühe Version der Spezifikation, die später aktualisiert wurde.
Da sich die Spezifikation für CSS-Schattenteile änderte und Webbrowser begannen, die Syntax ::part offiziell zu unterstützen, wurde der Polyfill in ThingWorx 9.3.0 entfernt. Das Entfernen des Polyfill hat folgende Vorteile:
• Es verbessert die Leistung, da die Verwendung der nativen Implementierungen der Browser-API viel schneller ist.
• Es richtet die ThingWorx Implementierung der CSS-Syntax ::part an der neuesten Version der Spezifikation aus, die nativ in Webbrowsern implementiert wird.
Webkomponenten-Widgets unterstützen jetzt nur native Browserimplementierungen der Spezifikation. Einige Aspekte des anfänglichen Polyfill werden nicht mehr unterstützt, da die neueste Version der Spezifikation restriktiver ist. Bestimmte CSS-Selektoren, die zuvor unterstützt wurden, funktionieren nicht mehr. Sie können keine CSS-Selektoren verwenden, die Stile auf untergeordnete Teile basierend auf ihrer Position in der DOM-Struktur anwenden.
Beispielsweise werden die folgenden Selektoren nicht mehr unterstützt:
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) {
...
}
Das Spezifikationsdokument befindet sich seit November 2018 im Entwurfsstatus und wird evtl. in Zukunft aktualisiert. Darüber hinaus kann sich die Struktur der PTC Webkomponenten ändern, da wir die Web Component SDK-Bibliothek in der zukünftigen Version von ThingWorx weiter verbessern.
Workaround
Es wird dringend empfohlen, CSS sparsam zu verwenden, wenn Sie Mashups formatieren. Die Verwendung von benutzerdefiniertem CSS erfordert, dass Sie beim Upgrade Ihrer Version von ThingWorx Stilprobleme manuell prüfen und beheben. Dies können Sie vermeiden, indem Sie Stilthemen und -eigenschaften verwenden, um das Aussehen und Verhalten Ihrer Mashups und Widgets anzupassen (wenn möglich).
Die Auswirkungen dieser Änderung auf benutzerdefiniertes CSS sind beim Upgrade auf 9.3.0, 9.3.1, 9.3.2 und 9.3.4 und höher ähnlich. In 9.3.4 wird jedoch die Verwendung von @supports-Anweisungen unterstützt, um eine ptcs-style-unit einzuschließen. Dies bietet mehr Flexibilität beim Zugriff auf Schatten-DOM-Teile. Sie können jedoch weiterhin benutzerdefiniertes CSS ohne diese Methode anwenden. Neue Webkomponenten, die in Version 9.3 oder höher eingeführt wurden, sind von dieser Änderung nicht betroffen.
Weitere Informationen finden Sie in den folgenden Ressourcen.