iFrame- und Sanitization-Änderungen

Wir haben jetzt zwei Systeme zur Codebereinigung für die Blattentwicklung integriert: Legacy-System und neues System.

Änderungen bei der Code-Bereinigung

Für die Blattentwicklung ist die Code-Bereinigung jetzt in zwei Systeme aufgeteilt, aus denen Sie ohne Unterbrechung durch Änderungen wählen können.

Legacy-System

Das alte Desinfektionssystem verwendet restriktivere Richtlinien für die Desinfektion von HTML und CSS.

Wie aktiviere ich es?

Standardmäßig wurden alle vorhandenen Blätter aus unseren GitHub-Repositorys für das Legacy-System aktiviert. Dadurch können Blattautoren in ihrem eigenen Tempo auf das neue System umsteigen, während alle vorhandenen Blätter im Altsystem weiterhin wie zuvor funktionieren.

Wenn Sie das neue Desinfektionssystem verwenden und zurück zum Legacy wechseln möchten, führen Sie die folgenden Schritte aus:

• GitHub Repo Sheets
  • Fügen Sie in Ihrer sheet.json-Datei das folgende Schlüssel/Wert-Paar hinzu:
  • „Vermächtnis“: wahr

• Blatt-Sandkasten
  • Fügen Sie im sheet.json-Editor das folgende Schlüssel/Wert-Paar hinzu:
  • „Vermächtnis“: wahr

• Benutzerdefinierter Blatteditor
  • Aktivieren Sie auf der Einstellungsseite Ihres Spiels das Kontrollkästchen „Legacy Sanitization“, das sich über dem Code-Editor befindet.

Wie erstelle ich ein Blatt dafür?

Die Community hat einen großartigen Wiki-Artikel zu diesen HTML-, CSS- und Javascript-Optionen und -Einschränkungen, den Sie hier sehen können: https://wiki.roll20.net/Building_Character_Sheets#Restrictions.

Neues System

Das neue Bereinigungssystem bereinigt eingehendes CSS nicht mehr und verringert auch die Einschränkungen und Regeln, die an eingehendes HTML gebunden sind, erheblich.

Wie aktiviere ich es?

Standardmäßig sind alle neuen Sheets aus unserem Repo, benutzerdefinierte Sheets und benutzerdefinierte Sheet-Sandbox-Spiele für das neue System aktiviert! Kinderleicht!

Wenn Sie das alte System verwenden und auf das neue System wechseln möchten, führen Sie die folgenden Schritte aus:

• GitHub Repo Sheets
  • Entfernen Sie in Ihrer sheet.json-Datei das folgende Schlüssel/Wert-Paar:
  • „Vermächtnis“: wahr

• Blatt-Sandkasten
  • Entfernen Sie im sheet.json-Editor das folgende Schlüssel/Wert-Paar:
  • „Vermächtnis“: wahr

• Benutzerdefinierter Blatteditor
  • Deaktivieren Sie auf der Einstellungsseite Ihres Spiels das Kontrollkästchen „Legacy Sanitization“, das sich über dem Code-Editor befindet.

Wie erstelle ich ein Blatt dafür?

Beginnen Sie mit dem Schreiben von HTML und CSS wie gewohnt! Wir möchten, dass die Erfahrung so nah wie möglich an der traditionellen Entwicklung ist. Die meisten Elemente funktionieren, einschließlich Klassen, IDs, Haltepunkte und Animationen.

Allerdings gibt es vorerst noch ein paar Einschränkungen, die beachtet werden sollten:

• Es stehen nicht alle HTML-Elemente und -Attribute zur Verfügung, dennoch gibt es 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
  • Mehr über Sheetworker können Sie hier lesen: https://wiki.roll20.net/Sheetworkers
• Roll-Vorlagen werden weiterhin das alte Desinfektionssystem verwenden, was bedeutet, dass sie den hier beschriebenen Regeln und Einschränkungen folgen: https://wiki.roll20.net/Building_Character_Sheets#Restrictions

Migration vom Altsystem zum neuen System

Dies mag wie eine entmutigende Aufgabe erscheinen, aber wir hoffen, dass diese Änderungen es Ihnen ermöglichen, Tabellen viel effizienter und besser zu entwickeln.

Dies ist ein allgemeiner Überblick darüber, was Sie tun können, um auf das neue System umzusteigen, umfasst jedoch keineswegs alles und hängt von Ihrem eigenen Prozess und Ablauf ab.

• Wechseln Sie über Ihre bevorzugte Methode (GitHub, Sheet-Sandbox oder benutzerdefinierter Sheet-Editor) zum neuen Desinfektionssystem.
• Entfernen Sie alle fest codierten Verweise auf Folgendes aus Ihrem CSS und HTML und beheben Sie alle dadurch verursachten Probleme.
  • Klasse „Blatt“.
•  Wenn Sie unser bereitgestelltes Roll20-Raster verwenden, fügen Sie „sheet-“ zu Ihren HTML-Klassenattributen hinzu, wo diese Klassen verwendet werden.
• Wandeln Sie so viele Dinge wie möglich in Rollschaltflächen um, um unsere Makro-Schnellleiste besser nutzen zu können!

Zusätzliche Überlegungen zur Entwicklung

Berücksichtigen Sie bei der Migration auf dieses neue System die folgenden tollen Tipps, die Sie während der Arbeit in Ihr Arbeitsblatt einfügen können:

• Bessere Unterstützung für Barrierefreiheit
  • Wir unterstützen jetzt Aria-Tags, semantisches HTMLund andere nativ bereitgestellte Funktionen.
  • Hier sind einige großartige Lesematerialien, die nur die Oberfläche dieser Disziplin 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

• Sich anpassendes Design
  • Unsere mobile App wird in naher Zukunft auf den Markt kommen und wir möchten, dass die Charakterbögen darauf schön aussehen!
  • Wir unterstützen jetzt Haltepunkte, IDs und neue HTML-Tags, die alle bei Ihrer Responsive-Sheet-Reise hilfreich sein sollten.
  • Hier sind einige tolle 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
  • Sie können ein Charakterblatt drucken, indem Sie es in einem separaten Fenster öffnen und die nativen Druckfunktionen des Browsers oder des Geräts verwenden. Bitte beachten Sie, dass der Stil des Charakterblatts und einige Daten möglicherweise fehlen oder beeinträchtigt sind.
  • Wir unterstützen jetzt die Druckmedienabfrage, die es Blattautoren ermöglichen soll, ihre Blätter speziell für den Fall zu gestalten, wenn ein Benutzer sie drucken möchte.