Custom card styles and scripts affect whole ankiweb site

Anki Development
1

Hello!

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

body {
    background-color: red;
}

all body on the site is red.

After adding this script into card template

document.body.style.backgroundColor="green";

all body on the site is green.

изображение
изображение1271×356 12 KB

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”

// scss
.styled-card {
    @import "bulma"
}

And then i wrap all card template into <div class="styled-card"></div>.

2

If you target ‘.card’ instead of ‘body’ you should get the correct behaviour.

3

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 body and html element, and if they not applied we get improper style because body and 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.

4

The study screen is hosted on a different domain to limit what JavaScript can do. I agree an iframe solution would be better, but when I tried it in the the past I ran into problems, and have not had a chance to return to it yet.