iFrame e modifiche di sanificazione

Abbiamo ora incluso due sistemi di sanificazione del codice per lo sviluppo di schede: Sistema Legacy e Nuovo Sistema.

Modifiche alla sanificazione del codice

Per lo sviluppo delle schede, la sanificazione del codice è ora divisa in due sistemi tra cui scegliere senza interruzioni di modifiche.

Sistema Legacy

Il sistema di sanificazione legacy utilizza linee guida più restrittive per la sanificazione di HTML e CSS.

Come posso abilitarlo?

Per impostazione predefinita, tutti i fogli esistenti dai nostri repository GitHub sono stati scelti per il sistema legacy. Ciò consente agli autori dei fogli di transizione al nuovo sistema al proprio ritmo, mentre tutti i fogli esistenti sul sistema legacy continuano a funzionare come prima.

Se sei sul nuovo sistema di sanificazione e vuoi tornare al Legacy, segui i passaggi seguenti:

• Fogli GitHub Repo
  • Nel tuo file sheet.json, aggiungi la seguente coppia chiave/valore:
  • “legacy”: true

• Foglio Sandbox
  • Nell'editor di sheet.json, aggiungi la seguente coppia chiave/valore:
  • “legacy”: true

• Editor di Foglio Personalizzato
  • Nella pagina delle impostazioni del tuo gioco, seleziona la casella di controllo “Legacy Sanitization”, che si trova sopra l'editor di codice.

Come creo un foglio per questo?

La comunità ha un ottimo articolo Wiki su questa opzione e restrizioni di HTML, CSS e Javascript, visibile qui: https://wiki.roll20.net/Building_Character_Sheets#Restrictions.

Nuova Rete

Il nuovo sistema di sanificazione non sanifica più il CSS in ingresso e riduce notevolmente le restrizioni e le regole associate all'HTML in ingresso.

Come lo attivo?

Per impostazione predefinita, tutti i nuovi fogli dal nostro repo, i fogli personalizzati e i giochi sandbox delle schede personalizzate sono impostati sul nuovo sistema! Facile come bere un bicchier d'acqua!

Se utilizzi ancora il vecchio sistema e vuoi passare al nuovo sistema, segui i passaggi di seguito:

• Fogli del repo di GitHub
  • Nel tuo file sheet.json, rimuovi la seguente coppia chiave/valore:
  • “legacy”: true

• Sandbox per schede personalizzate
  • Nell'editor sheet.json, rimuovi la seguente coppia chiave/valore:
  • “legacy”: true

• Editor per schede personalizzate
  • Nella pagina delle impostazioni del tuo gioco, deseleziona la casella di controllo "Legacy Sanitization", che si trova sopra l'editor di codice.

Come posso creare un foglio per questo?

Inizia a scrivere HTML e CSS come faresti normalmente! Vogliamo che l'esperienza sia il più vicina possibile allo sviluppo tradizionale. La maggior parte degli elementi funzionerà, inclusi classi, id, breakpoints e animazioni.

Tuttavia, ci sono ancora alcune limitazioni per ora che dovrebbero essere prese in considerazione:

• Non tutti gli elementi e gli attributi HTML sono disponibili, ci sono ancora alcune restrizioni. 
  • Esempi di tag limitati: link, video, iframe, meta
  • Esempi di attributi limitati: autoplay, download, onclick

• Javascript è ancora limitato e deve essere utilizzato tramite Sheetworkers
  • Puoi leggere di più su sheetworkers qui: https://wiki.roll20.net/Sheetworkers
• I modelli di lancio continueranno a utilizzare il sistema di sanificazione legacy, il che significa che seguiranno le regole e le restrizioni come descritto qui: https://wiki.roll20.net/Building_Character_Sheets#Restrictions

Migrazione dal sistema legacy al nuovo sistema

Questo potrebbe sembrare un compito arduo, ma speriamo che questi cambiamenti ti permettano di sviluppare schede in modo molto più efficiente e migliorato.

Questa è un'indicazione generale di quello che potresti fare per convertirti al nuovo sistema, ma non copre tutto e dipende dal tuo processo e flusso.

• Passa al nuovo sistema di sanificazione tramite il metodo preferito (GitHub, sandbox della scheda o editor di schede personalizzato)
• Rimuovi qualsiasi riferimento codificato rigido ai seguenti dal tuo CSS e HTML e risolvi qualsiasi problema che ha causato.
  • Classe "Scheda-"
•  Se stai usando la nostra griglia Roll20 fornita, aggiungi "scheda-" agli attributi della classe HTML dove vengono utilizzate tali classi.
• Converti il più possibile in pulsanti di lancio per utilizzare al meglio la nostra barra di macro!

Ulteriori considerazioni sullo sviluppo

Mentre ti sposti verso questo nuovo sistema, considera questi ottimi consigli da aggiungere al tuo foglio mentre lavori:

• Miglior supporto per l'accessibilità
  • Ora supportiamo tag aria, HTML semantico, e altre funzioni fornite nativamente.
  • Ecco alcuni ottimi materiali di lettura che solo sfiorano la superficie di questa disciplina:
    • 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

• Design responsive
  • La nostra app mobile sarà lanciata nel prossimo futuro e vogliamo che i fogli dei personaggi siano bellissimi su di essa!
  • Ora supportiamo punti di interruzione, ID e nuovi tag HTML, tutto ciò dovrebbe aiutarti nel tuo viaggio verso un foglio responsive.
  • Ecco alcuni articoli fantastici su questo argomento:
    • 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

• Stile di stampa
  • Puoi stampare un foglio personaggio aprendolo in una finestra separata e utilizzando le funzioni di stampa native del browser o del dispositivo. Come nota, lo stile del foglio personaggio e alcuni dati potrebbero essere mancanti o influenzati.
  • Ora supportiamo la query dei media di stampa, che dovrebbe consentire agli autori dei fogli di stile di personalizzare i loro fogli specificamente quando un utente desidera stamparli.