scratch.mit.edu's Debug function has broken CSS Topic is solved

[leokids]

This might be irrelevant since Scratch itself works fine,but their "Debug" function has broken CSS.

How to test it:

1. Go to scratch.mit.edu

2. Click on Create

3. click on "Debug"

Once you do these steps,you can see the debug is broken visually,possibly related to CSS,although clicking on the texts works fine,since it uses Javascript.

[adoxa]

It's using nested styles, i.e. instead of

Code: Select all

a {}
a b {}

it uses

Code: Select all

a {
  b {}
}

Here's a Modify HTTP Response filter to remove the nesting

Code: Select all

a {}
b {}

not quite the same thing, but works in this instance.

Code: Select all

[["scratch.mit.edu",["/js/projects.bundle.js",[".debug-modal_modal-header","}$&"]]]]

[leokids]

It's using nested styles, i.e. instead of

Code: Select all

a {}
a b {}

it uses

Code: Select all

a {
  b {}
}

Here's a Modify HTTP Response filter to remove the nesting

Code: Select all

a {}
b {}

not quite the same thing, but works in this instance.

Code: Select all

[["scratch.mit.edu",["/js/projects.bundle.js",[".debug-modal_modal-header","}$&"]]]]

Thanks! This fixed it for me,But i'm still waiting for either Pale Moon or Scratch to fix this problem...

[jobbautista9]

CSS Nesting is still a working draft in the W3C, so websites should not be requiring it. This is really on Scratch to fix their own styling. Overhauling the CSS parser to support nesting is not a simple task, and imho it's not worth the cans of worms nesting opens when there's an already-working equivalent syntax of a b {} as mentioned by adoxa.

[leokids]

CSS Nesting is still a working draft in the W3C, so websites should not be requiring it. This is really on Scratch to fix their own styling. Overhauling the CSS parser to support nesting is not a simple task, and imho it's not worth the cans of worms nesting opens when there's an already-working equivalent syntax of a b {} as mentioned by adoxa.

Yep,but for some reason Scratch somehow requires it...ideally,if it's a working draft,then website shouldn't require it but Scratch's styling (on the "debug" function) is broken and that's all due to CSS nesting,They should probably fix it...Scratch themselves,not this browser.

[vannilla]

They should probably fix it...Scratch themselves,not this browser.

You should send them an e-mail or something, since you are a user (probably a regular, too).

Nesting CSS is a solution to a non-existent problem. Sure, you can "layer" complex sheets and reason about them better, but you should not write complex sheets you can't wrap your heads around without "nested syntax" in the first place.
A lot of the use cases for nested CSS can be removed by re-thinking how things are laid out.

[medians]

They should probably fix it...Scratch themselves,not this browser.

You should send them an e-mail or something, since you are a user (probably a regular, too).

Nesting CSS is a solution to a non-existent problem. Sure, you can "layer" complex sheets and reason about them better, but you should not write complex sheets you can't wrap your heads around without "nested syntax" in the first place.
A lot of the use cases for nested CSS can be removed by re-thinking how things are laid out.

He made a bug report on Scratch by the way
https://scratch.mit.edu/discuss/topic/822465