iFrame et changements de désinfection

29 août 2024 15:32

Nous avons maintenant inclus deux systèmes de désinfection de code pour le développement de feuilles : Système hérité et Nouveau système.

Changements de désinfection de code

Pour le développement de feuilles, la désinfection de code est maintenant divisée en deux systèmes à choisir sans perturbation des changements.

Système hérité

Le système de désinfection hérité utilise des directives plus restrictives pour la désinfection à la fois de HTML et CSS.

Comment l'activer ?

Par défaut, toutes les feuilles existantes de nos dépôts GitHub ont été choisies pour le système hérité. Cela permet aux auteurs de feuilles de transitionner vers le nouveau système à leur propre rythme, tandis que toutes les feuilles existantes du système hérité continuent de fonctionner comme avant.

Si vous vous trouvez sur le nouveau système de désinfection et que vous souhaitez revenir à l'hérité, suivez les étapes ci-dessous :

Feuilles de dépôt GitHub
- Dans votre fichier sheet.json, ajoutez la paire clé/valeur suivante :
- «legacy»: true

Feuille Bac à sable
- Dans l'éditeur sheet.json, ajoutez la paire clé/valeur suivante:
- «legacy»: true

Éditeur de feuille personnalisée
- Dans la page des paramètres de votre jeu, sélectionnez la case à cocher «Sanitisation héritée», qui se situe au-dessus de l'éditeur de code.

Comment créer une feuille pour cela?

La communauté a un excellent article Wiki à propos de cela, avec les options et restrictions HTML, CSS et Javascript, consultez-le ici : https://wiki.roll20.net/Building_Character_Sheets#Restrictions.

Nouveau Système

Le nouveau système de sanitisation ne saute plus le CSS entrant et réduit considérablement les restrictions et les règles appliquées au HTML entrant également.

Comment l'activer?

Par défaut, toutes les nouvelles feuilles de notre dépôt, les feuilles personnalisées et les jeux de bac à sable des feuilles personnalisées sont optées pour le nouveau système ! Facile comme bonjour !

Si vous êtes sur le système hérité et que vous souhaitez passer au nouveau système, suivez les étapes ci-dessous :

Feuilles de dépôt GitHub
- Dans votre fichier sheet.json, supprimez la paire clé/valeur suivante :
- “hérité”: true

Bac à sable de feuilles
- Dans l'éditeur sheet.json, supprimez la paire clé/valeur suivante :
- “hérité”: true

Éditeur de feuille personnalisée
- Dans la page des paramètres de votre jeu, désélectionnez la case à cocher “Sanitisation Héritée”, qui se trouve au-dessus de l'éditeur de code.

Comment créer une feuille pour cela ?

Commencez à écrire du HTML et du CSS comme vous le feriez normalement ! Nous voulons que l'expérience soit aussi proche que possible du développement traditionnel. La plupart des éléments fonctionneront, y compris les classes, les identifiants, les points d'arrêt et les animations.

Cependant, il existe encore quelques limitations à prendre en compte :

Tous les éléments et attributs HTML ne sont pas disponibles, il y a encore quelques restrictions.
- Exemples de balises restreintes : lien, vidéo, iframe, meta
- Exemples d'attributs restreints : autoplay, download, onclick

Javascript est toujours limité et doit être utilisé par les tôliers.
- Pour en savoir plus sur les tôliers, consultez le site : https://wiki.roll20.net/Sheetworkers
Les modèles de lancer continueront d'utiliser le système de désinfection hérité, ce qui signifie qu'ils suivront les règles et restrictions décrites ici : https://wiki.roll20.net/Building_Character_Sheets#Restrictions

Passage de l'ancien système au nouveau système

Cela peut sembler une tâche intimidante, mais nous espérons que ces changements vous permettront de développer des feuilles de personnage de manière beaucoup plus efficace et améliorée.

Il s'agit d'un aperçu général de ce que vous pourriez faire pour passer au nouveau système, mais cela ne comprend pas tout et dépend de votre propre processus et flux.

Passez au nouveau système de désinfection via votre méthode préférée (GitHub, bac à sable de feuille, ou éditeur de feuille personnalisé)
Supprimez toutes les références en dur aux éléments suivants dans votre CSS et HTML et corrigez les problèmes qu'ils ont causés.
- Classe "Feuille-"
Si vous utilisez notre grille Roll20 fournie, ajoutez "feuille-" à vos attributs de classe HTML là où ces classes sont utilisées.
Convertissez autant de choses en boutons de lancer que possible pour mieux utiliser notre barre d'outils de macros !

Autres considérations de développement

Alors que vous migrez vers ce nouveau système, pensez à ces excellentes astuces à ajouter à votre fiche pendant que vous travaillez :

Meilleure prise en charge de l'accessibilité
- Nous prenons maintenant en charge les balises ARIA, les balises HTML sémantiques, et autres fonctions fournies nativement.
- Voici quelques documents de lecture intéressants qui ne font qu'effleurer la surface de cette discipline :

Design adaptatif
- Notre application mobile sera bientôt lancée et nous souhaitons que les feuilles de personnage soient magnifiques dessus !
- Nous prenons maintenant en charge les points de rupture, les ID et les nouvelles balises HTML, qui devraient tous aider dans votre parcours de feuille de personnage adaptative.
- Voici quelques articles géniaux sur ce sujet :

Mise en page d'impression
- Vous pouvez imprimer une fiche de personnage en l'ouvrant dans une fenêtre séparée et en utilisant les fonctions d'impression du navigateur ou de l'appareil. Notez que la mise en style de la fiche de personnage et certaines données peuvent être manquantes ou affectées.
- Nous prenons désormais en charge la requête média d'impression , ce qui devrait permettre aux auteurs de fiches de personnage de styliser leurs fiches spécifiquement pour l'impression.