아이프레임 및 살균 변경 사항

이제 시트 개발을 위한 두 가지 코드 살균 시스템이 포함되었습니다: 레거시 시스템과 새 시스템.

코드 살균 변경 사항

시트 개발의 경우, 이제 코드 살균이 두 가지 시스템으로 분리되어 변경 사항을 중단하지 않고 선택할 수 있습니다.

레거시 시스템

레거시 위생 처리 시스템은 HTML과 CSS의 위생 처리를 위해 보다 제한적인 가이드라인을 사용합니다.

어떻게 활성화하나요?

기본적으로 GitHub 리포지토리의 모든 기존 시트는 레거시 시스템으로 선택되어 있습니다. 따라서 시트 작성자는 자신의 속도에 맞춰 새 시스템으로 전환할 수 있으며, 레거시 시스템의 모든 기존 시트는 이전과 동일하게 작동합니다.

새로운 위생 처리 시스템을 사용 중이고 레거시로 다시 전환하려면 아래 단계를 따르세요:

• GitHub 리포지토리 시트
  • 시트.json 파일에 다음 키/값 쌍을 추가합니다:
  • “legacy”: true

• Sheet Sandbox
  • In the sheet.json editor, add the following key/value pair:
  • “legacy”: true

• Custom Sheet Editor
  • In your game’s settings page, select the “Legacy Sanitization” checkbox, which sits above the code editor.

How do I create a sheet for this?

The community has a great Wiki article about this in HTML, CSS, and Javascript options and restrictions, seen here: https://wiki.roll20.net/Building_Character_Sheets#Restrictions.

New System

The new sanitization system no longer santizes incoming CSS and greatly lessens the restrictions and rules appended to incoming HTML as well.

How do I enable it?

기본적으로, 우리의 저장소, 사용자 정의 시트 및 사용자 정의 시트 샌드박스 게임에서 모든 새 시트는 새 시스템으로 선택됩니다! 쉽죠!

레거시 시스템에 있고 새 시스템으로 전환하려면 아래 단계를 따르세요:

• GitHub 저장소 시트
  • sheet.json 파일에서 다음 키/값 쌍을 제거하세요:
  • “legacy”: true

• 사용자 정의 시트 샌드박스
  • sheet.json 편집기에서 다음 키/값 쌍을 제거하세요:
  • “legacy”: true

• 사용자 정의 시트 편집기
  • 게임 설정 페이지에서 코드 편집기 위에 위치한 “레거시 살균” 확인란을 선택 취소하세요.

이를 위해 어떻게 시트를 생성하나요?

HTML 및 CSS를 일반적으로 작성하십시오! 경험을 전통적인 개발에 최대한 가깝게 만들고자 합니다. 클래스, id, 브레이크 포인트 및 애니메이션을 포함하여 대부분의 항목이 작동합니다.

그러나 아직 고려해야 할 몇 가지 제한 사항이 있습니다:

• 모든 HTML 요소와 속성을 사용할 수 없으며, 아직 몇 가지 제한 사항이 있습니다. 
  • 제한된 태그 예: 링크, 비디오, 아이프레임, 메타
  • 제한된 속성 예: autoplay, download, onclick

• 자바스크립트는 아직 제한되어 있으며 Sheetworkers를 통해 활용해야 합니다.
  • Sheetworkers에 대해 자세히 읽을 수 있습니다: https://wiki.roll20.net/Sheetworkers
• 롤 템플릿은 여전히 레거시 살균 시스템을 사용하므로 다음과 같은 규칙과 제한을 따를 것입니다: https://wiki.roll20.net/Building_Character_Sheets#Restrictions

레거시에서 새로운 시스템으로 마이그레이션하기

이 작업은 어려울 수 있지만, 이러한 변경 사항을 통해 보다 효율적이고 개선된 방식으로 시트를 개발할 수 있기를 기대합니다.

이것은 새로운 시스템으로 변환하는 데 필요한 일반적인 개요입니다. 그러나 이로 인해 발생한 문제를 해결하기 위해 여러분 자신의 프로세스와 흐름에 따라 달라질 수 있습니다.

• 선호하는 방법(GitHub, 시트 샌드박스 또는 사용자 정의 시트 편집기)을 통해 새로운 살균 시스템으로 전환하세요.
• CSS 및 HTML에서 다음과 같은 하드 코딩된 참조를 제거하고 발생한 문제를 수정하세요.
  • “Sheet-” 클래스
•  Roll20 그리드를 사용하는 경우 해당 클래스가 사용되는 HTML 클래스 속성에 "sheet-"를 추가하세요.
• 롤 버튼으로 가능한 많은 것을 변환하여 매크로 퀵바를 더욱 효율적으로 활용하세요!

추가적인 개발 고려 사항

이 새로운 시스템으로 이동하는 동안 작업하는 동안 시트에 추가할 수 있는 훌륭한 팁을 고려해보세요:

• 더 나은 접근성 지원
  • 이제 aria 태그를 지원합니다, 시맨틱 HTML등 다른 기능을 지원합니다.
  • 이 분야의 표면만 긁어본 훌륭한 독서 자료들이 있습니다:
    • https://www.w3.org/WAI/fundamentals/accessibility-intro/
    • https://developer.mozilla.org/en-US/docs/Web/Accessibility
    • https://www.w3schools.com/html/html_accessibility.asp

• 반응형 디자인
  • 저희 모바일 앱은 곧 출시될 예정이며 캐릭터 시트가 아름답게 보이기를 원합니다!
  • 이제 우리는 반응형 시트 여정에서 도움이 될 수 있는 브레이크포인트, ID 및 새로운 HTML 태그를 지원합니다.
  • 이 주제에 대한 멋진 기사 몇 가지가 있습니다:
    • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
    • https://www.w3schools.com/html/html_responsive.asp
    • https://www.w3schools.com/css/css_rwd_intro.asp

• 인쇄 스타일링
  • 별도의 창에서 열고 브라우저나 기기의 기본 인쇄 기능을 사용하여 캐릭터 시트를 인쇄할 수 있습니다. 참고로, 캐릭터 시트 스타일링과 일부 데이터가 누락되거나 영향을 받을 수 있습니다.
  • 이제 인쇄 미디어 쿼리 을 지원합니다. 이를 통해 시트 작성자는 사용자가 인쇄를 원할 때 특정한 스타일을 적용할 수 있습니다.