Modifiche di rilievo apportate al CSS personalizzato in ThingWorx 9.3.0
È stato rimosso un pollyfill in ThingWorx 9.3.0 e questo potrebbe causare l'interruzione del funzionamento del CSS personalizzato durante l'aggiornamento da una versione precedente di ThingWorx.
 |
Sono interessati da questa modifica solo i CSS personalizzati. Le personalizzazioni eseguite utilizzando l'editor dei temi di stile in Composer o le proprietà di stile dei widget in Mashup Builder restano invariate.
|
In questo argomento vengono descritti il problema e il criterio di PTC per le modifiche di rilievo apportate al CSS personalizzato in ThingWorx 9.3.0.
Antefatto
Quando i widget di tipo componente Web sono stati aggiunti a ThingWorx, i browser Web non includevano il supporto ufficiale per la specifica CSS Shadow Parts. Pertanto, è stato utilizzato un polyfill (ptcs-shadow-style) per fornire supporto per la sintassi CSS ::part. Questo polyfill ha implementato una versione iniziale della specifica che è stata aggiornata successivamente.
Da quando la specifica CSS Shadow Parts è stata modificata e i browser Web hanno iniziato a includere il supporto ufficiale per la sintassi ::part, il polyfill è stato rimosso in ThingWorx 9.3.0. La rimozione del polyfill comporta i vantaggi descritti di seguito.
• Migliora le prestazioni in quanto l'utilizzo delle implementazioni native dell'API del browser è molto più veloce.
• Allinea l'implementazione ThingWorx della sintassi CSS ::part all'ultima versione della specifica implementata in modo nativo nei browser Web.
I widget di tipo componente Web ora supportano solo implementazioni native del browser della specifica. Alcuni aspetti del polyfill iniziale non sono più supportati perché la versione più recente della specifica è più restrittiva. Alcuni selettori CSS precedentemente supportati non funzioneranno più. Non è possibile utilizzare selettori CSS che applicano lo stile alle sottoparti in base alla loro posizione nell'albero DOM.
Ad esempio, non sono più supportati i selettori seguenti:
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) {
...
}
Il documento delle specifiche è sotto forma di bozza da novembre 2018 e potrebbe essere aggiornato in futuro. Inoltre, nella release futura di ThingWorx la struttura dei componenti Web di PTC potrebbe subire cambiamenti per effetto dei miglioramenti apportati alla libreria SDK dei componenti Web.
Soluzione
Si consiglia di utilizzare i CSS con moderazione quando si applica lo stile ai mashup. L'utilizzo del CSS personalizzato richiede il controllo e la correzione manuale di eventuali problemi di stile durante l'aggiornamento della versione di ThingWorx. Per evitare questo processo, utilizzare i temi e le proprietà di stile per personalizzare l'aspetto di mashup e widget quando possibile.
L'impatto di questa modifica sul CSS personalizzato è analogo quando si esegue l'aggiornamento a 9.3.0, 9.3.1, 9.3.2 e 9.3.4 e versioni successive. Tuttavia, nella versione 9.3.4 è stato aggiunto il supporto per l'utilizzo di istruzioni @supports per includere una ptcs-style-unit e questo offre maggiore flessibilità quando si accede alle parti shadow DOM. Tuttavia, è comunque possibile applicare il CSS personalizzato senza utilizzare questo metodo. I nuovi componenti Web introdotti nella versione 9.3 o versioni successive non sono interessati da questa modifica.
Per ulteriori informazioni, fare riferimento alle risorse seguenti: