iFrame and Sanitization Changes

Wir haben nun zwei Systeme zur Code-Sanitierung für die Entwicklung von Sheets eingeführt: Altes System und Neues System.

Änderungen bei der Code-Sanitierung

Für die Entwicklung von Sheets wurde die Code-Sanitierung nun in zwei Systeme aufgeteilt, zwischen denen ohne Unterbrechungen gewählt werden kann.

Altes System

Das alte Sanitizationssystem verwendet strengere Richtlinien für die Sanitization von HTML und CSS.

Wie aktiviere ich es?

Standardmäßig wurden alle vorhandenen Sheets aus unseren GitHub-Repositories in das alte System übernommen. So können Sheet-Autoren in ihrem eigenen Tempo zum neuen System wechseln, während alle bestehenden Sheets im alten System weiterhin wie zuvor funktionieren.

Wenn du dich im neuen Sanitizationssystem befindest und zum alten System wechseln möchtest, befolge die folgenden Schritte:

• GitHub-Repo Sheets
  • Füge in deiner sheet.json-Datei folgendes Schlüssel/Wert-Paar hinzu:
  • „legacy“: true

• Charakterbogen-Sandbox
  • In der sheet.json editor füge den folgenden Schlüssel/Wert-Paar hinzu:
  • „legacy“: true

• Benutzerdefinierter Sheet-Editor
  • In den Einstellungen deines Spiels aktiviere das Kontrollkästchen "Legacy-Säuberung", das sich über dem Code-Editor befindet.

Wie erstelle ich einen Bogen dafür?

Die Community hat einen großartigen Wiki-Artikel zu HTML-, CSS- und Javascript-Optionen und -Einschränkungen, der hier zu finden ist: https://wiki.roll20.net/Building_Character_Sheets#Restrictions.

Neues System

Das neue Säuberungssystem sanitizes incoming CSS nicht mehr und reduziert die Einschränkungen und Regeln, die an eingehendes HTML angehängt werden, erheblich.

Wie aktiviere ich es?

Standardmäßig sind alle neuen Blätter aus unserem Repo, benutzerdefinierte Blätter und benutzerdefinierte Blattdatenbankspiele für das neue System aktiviert! Ganz einfach!

Wenn Sie sich im Legacy-System befinden und zum neuen System wechseln möchten, befolgen Sie die folgenden Schritte:

• GitHub Repo Blätter
  • In deiner sheet.json Datei entferne das folgende Schlüssel/Wert-Paar:
  • “legacy”: true

• Charakterbogen-Sandbox
  • In deinem sheet.json Editor entferne das folgende Schlüssel/Wert-Paar:
  • “legacy”: true

• Benutzerdefinierter Blatt-Editor
  • Deaktiviere in den Einstellungen deines Spiels das Kontrollkästchen "Legacy-Bereinigung", das sich über dem Code-Editor befindet.

Wie erstelle ich ein Blatt dafür?

Schreibe HTML und CSS wie gewöhnlich! Wir möchten, dass die Erfahrung so nah wie möglich an der traditionellen Entwicklung ist. Die meisten Elemente funktionieren, einschließlich Klassen, IDs, Breakpoints und Animationen.

Es gibt jedoch noch einige Einschränkungen, die beachtet werden müssen:

• Nicht alle HTML-Elemente und -Attribute stehen zur Verfügung, es gibt noch einige Einschränkungen. 
  • Beispiele für eingeschränkte Tags: Link, Video, iFrame, Meta
  • Beispiele für eingeschränkte Attribute:  Autoplay, Download, Onclick

• Javascript ist weiterhin eingeschränkt und muss über Sheetworkers verwendet werden.
  • Hier findest du weitere Informationen zu sheetworkers: https://wiki.roll20.net/Sheetworkers
• Roll Templates werden weiterhin das alte Säuberungssystem verwenden, was bedeutet, dass sie den Regeln und Beschränkungen folgen werden, wie hier erläutert: https://wiki.roll20.net/Building_Character_Sheets#Restrictions

Von Legacy zu neuem System migrieren

Diese Aufgabe mag zunächst einschüchternd wirken, aber wir hoffen, dass diese Änderungen es dir ermöglichen, Bögen auf eine effizientere und verbesserte Weise zu erstellen.

Dies ist eine allgemeine Übersicht darüber, was du möglicherweise tun könntest, um zum neuen System zu konvertieren, es umfasst jedoch keineswegs alles und hängt von deinem eigenen Prozess und Workflow ab.

• Wechsle auf das neue Säuberungssystem über deine bevorzugte Methode (GitHub, Blatt-Sandbox oder benutzerdefinierter Blatt-Editor)
• Entferne alle fest codierten Verweise auf das folgende aus deinem CSS und HTML und behebe alle dadurch verursachten Probleme.
  • „Sheet-”-Klasse
•  Wenn du unser bereitgestelltes Roll20-Grid verwendest, füge „sheet-“ zu deinen HTML-Klassenattributen hinzu, wo diese Klassen verwendet werden.
• Konvertiere so viele Dinge wie möglich in Würfel-Buttons, um unsere Makroleiste besser nutzen zu können!

Zusätzliche Entwicklungserwägungen

Wenn du zu diesem neuen System migrierst, beachte diese großartigen Tipps, die du während der Arbeit zu deinem Bogen hinzufügen kannst:

• Bessere Unterstützung der Zugänglichkeit
  • Wir unterstützen nun ARIA-Tags, semantische HTML-Tagsund andere nativ bereitgestellte Funktionen.
  • Hier sind einige großartige Lektüren, die nur an der Oberfläche dieses Fachgebiets kratzen:
    • 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

• Responsives Design
  • Unsere mobile App wird in naher Zukunft starten und wir möchten, dass die Charakterbögen darauf schön aussehen!
  • Wir unterstützen jetzt Breakpoints, ID's und neue HTML-Tags, all dies sollte bei deiner reaktionsfähigen Blattreise helfen.
  • Hier sind einige großartige Artikel zu diesem Thema:
    • 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

• Druckstil
  • Du kannst einen Charakterbogen drucken, indem du ihn in einem separaten Fenster öffnest und die Druckfunktionen deines Browsers oder Geräts verwendest. Als Hinweis: Das Styling des Charakterbogens und einige Daten fehlen möglicherweise oder werden beeinflusst.
  • Wir unterstützen jetzt die Print-Media-Query, mit der Blattautoren ihre Blätter speziell für den Druck durch Benutzer stylen können.