ThingWorx 9.3.0 でのカスタム CSS に対する破壊的変更
ThingWorx 9.3.0 でポリフィルが除去された結果、以前のバージョンの ThingWorx からアップグレードする際にカスタム CSS が動作しなくなる可能性があります。
 |
カスタム CSS のみがこの変更の影響を受けます。Composer のスタイルテーマエディタを使用するか Mashup Builder のウィジェットスタイルプロパティを使用して実行されたカスタマイズは影響を受けません。
|
このトピックでは、ThingWorx 9.3.0 におけるカスタム CSS に対する破壊的変更の問題と PTC のポリシーについて説明します。
背景
Web コンポーネントウィジェットが ThingWorx に追加されたときに、Web ブラウザに CSS シャドウパーツ仕様の公式サポートが含まれていませんでした。このため、ポリフィル (ptcs-shadow-style) を使用して CSS ::part 構文がサポートされていました。このポリフィルによって実装されたのは初期バージョンの仕様であり、仕様は後から更新されました。
CSS シャドウパーツ仕様が変更され、Web ブラウザで ::part 構文の公式サポートの提供が開始されたことに伴い、ThingWorx 9.3.0 でポリフィルが除去されました。ポリフィルが除去されることで次のような利点があります。
• ブラウザ API のネイティブ実装を使用した方がはるかに高速なので、パフォーマンスが向上します。
• CSS ::part 構文の ThingWorx 実装が、Web ブラウザ内にネイティブに実装されている最新バージョンの仕様と揃います。
Web コンポーネントウィジェットでは、ブラウザにネイティブに実装されている仕様のみがサポートされるようになりました。最新バージョンの仕様はより厳格なので、初期ポリフィルの一部の要素はサポートされなくなりました。以前にサポートされていた一部の CSS セレクタは機能しなくなります。DOM ツリー内の位置に基づいてサブパーツにスタイルを適用する CSS セレクタは使用できません。
たとえば、次のセレクタはサポートされなくなりました。
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) {
...
}
この仕様書は 2018 年 11 月からドラフト状態にあり、今後更新される可能性があります。さらに、ThingWorx の今後のリリースで Web Component SDK ライブラリを引き続き強化する際に、PTC Web コンポーネントの構造が変更される可能性があります。
次善策
マッシュアップのスタイルを設定する際に、CSS はできるだけ使用しないでください。カスタム CSS を使用するには、ThingWorx のバージョンをアップグレードする際にスタイルの問題を手動でチェックして修正する必要があります。このプロセスを回避するには、可能なかぎり、スタイルテーマとスタイルプロパティを使用してマッピングとウィジェットのルックアンドフィールをカスタマイズします。
9.3.0、9.3.1、9.3.2、および 9.3.4 以降にアップグレードする場合、この変更がカスタム CSS に与える影響はほぼ同じです。ただし、9.3.4 では、@supports ステートメントを使用して ptcs-style-unit を含めるためのサポートが追加されたことにより、シャドウ DOM パーツにアクセスする際の柔軟性が向上しました。ただし、この方法を使用しなくても引き続きカスタム CSS を適用できます。9.3 以降で導入された新しい Web コンポーネントは、この変更の影響を受けません。
詳細については、次のリソースを参照してください。