ThingWorx 9.3.0에서 사용자 정의 CSS에 대한 변경 차단
ThingWorx 9.3.0에서 폴리필이 제거되었기 때문에 이전 버전의 ThingWorx 업그레이드 시 사용자 정의 CSS의 작동이 중지될 수 있습니다.
 |
사용자 정의 CSS만 이 변경의 영향을 받습니다. Composer의 스타일 테마 편집기를 사용하거나 Mashup Builder의 위젯 스타일 속성을 사용하여 수행되는 사용자 정의는 영향을 받지 않습니다.
|
이 항목에서는 ThingWorx 9.3.0에서 사용자 정의 CSS에 대한 변경 차단과 관련된 문제와 PTC 정책에 대해 설명합니다.
배경
웹 구성 요소 위젯이 ThingWorx에 추가되었을 때 웹 브라우저에 CSS 섀도우 부품 사양에 대한 공식 지원이 포함되지 않았습니다. 따라서, CSS ::part 구문에 대한 지원을 제공하기 위해 폴리필(ptcs-shadow-style)이 사용되었습니다. 이 폴리필은 나중에 업데이트된 사양의 초기 버전을 구현했습니다.
CSS 섀도우 부품 사양이 변경되고 웹 브라우저가 ::part 구문에 대한 공식 지원을 제공하기 시작하면서 ThingWorx 9.3.0에서 폴리필이 제거되었습니다. 폴리필을 제거하면 다음과 같은 이점이 있습니다.
• 브라우저 API의 기본 구현을 사용하는 것이 훨씬 빠르기 때문에 성능이 향상됩니다.
• CSS ::part 구문의 ThingWorx 구현을 웹 브라우저 내에서 기본적으로 구현되는 사양의 최신 버전과 일치시킵니다.
이제 웹 구성 요소 위젯은 사양의 기본 브라우저 구현만 지원합니다. 사양의 최신 버전이 더 제한적이기 때문에 초기 폴리필의 일부 측면이 더 이상 지원되지 않습니다. 이전에 지원되었던 특정 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 릴리즈에서 웹 구성 요소 SDK 라이브러리를 지속적으로 향상시키면서 PTC 웹 구성 요소의 구조가 변경될 수 있습니다.
해결 방법
매쉬업의 스타일을 지정할 때 CSS를 적게 사용하는 것이 좋습니다. 사용자 정의 CSS를 사용하려면 ThingWorx 버전을 업그레이드할 때 스타일 문제를 수동으로 확인하고 수정해야 합니다. 이 프로세스를 방지하기 위해서는 가능하면 스타일 테마 및 스타일 속성을 사용하여 매쉬업 및 위젯의 모양과 느낌을 사용자 정의합니다.
9.3.0, 9.3.1, 9.3.2 및 9.3.4 이상으로 업그레이드할 때 사용자 정의 CSS에 대한 이러한 변경의 영향은 유사합니다. 그러나 9.3.4에는 ptcs-style-unit을 포함하는 @supports 문 사용에 대한 지원이 추가되었기 때문에 Shadow DOM 부분에 액세스할 때 더 많은 유연성을 제공합니다. 그러나 이 방법을 사용하지 않고도 사용자 정의 CSS를 적용할 수 있습니다. 9.3 이상에서 도입된 새 웹 구성 요소는 이 변경의 영향을 받지 않습니다.
자세한 내용은 다음 리소스를 참조하십시오.