When using custom styles and scripts in cards and reviewing them on the ankiweb site
styles and scripts applied to whole site, not only to card.
Simple reproduction steps:
After adding this style to card type styling
all body on the site is red.
After adding this script into card template
all body on the site is green.
Looks like we need some way to isolation user styles and scripts on the ankiweb site.
I think using of iframe can solve this.
Currently i use bulma css framework for styling and my workaround is scoped import of all bulma styles into some style like “.styled-card”
And then i wrap all card template into
If you target ‘.card’ instead of ‘body’ you should get the correct behaviour.
IMHO, it’s more about security than about incorrect behavior.
User styles and script shouldn’t impact the whole site.
In addition, if CSS frameworks used for styling they often have CSS reset rules that applied to
html element, and if they not applied we get improper style because
html CSS rules are important for overall CSS framework style. But if they applied we break the whole site design.
Which is why I think it’s important that CSS frameworks are cool for styling complicated cards like programming or science. Using of manual styles in card type template is tedious in these cases. It’s simpler include one file, then add few html tags with classes and to get cool styled card.