Can't use @CSS with document.body
26 views
Skip to first unread message
pcxunl...@gmail.com
Sep 13, 2014, 5:59:49 PM9/13/14
to strati...@googlegroups.com
So I finally started on the UI portion of Tab Organizer, and of course I'm using the "mho:surface" module.
If I do this...
var foo = @CSS(`
background-color: red;
`)
document.body ..@appendContent(@Div() ..foo)
...then it works just fine. But if I do this...
var foo = @CSS(`
background-color: red;
`)
document.body ..foo
...then it doesn't work. I'm guessing this is because document.body isn't an Element, and so it gets wrapped, rather than mutating its class (like I want).
No problem, just have a top-level @Div, right? The problem is, if I do that, the <body> element still has some default styles (like margin) that I need to get rid of. It seems hacky that I would have to use a normal <style> for that, rather than using @CSS.
This also applies to the <html> element, which is the other element I need to style.
I tried messing around a bit with "mho:surface/doc-template/default" but that's for NodeJS only. Using "mho:surface/doc-template/plain" didn't help either (it intentionally provides no styles whatsoever). So, what's the best way to deal with this, since I'm *not* using .app files with Twitter Bootstrap? Just go with a normal <style>?
If I do this...
var foo = @CSS(`
background-color: red;
`)
document.body ..@appendContent(@Div() ..foo)
...then it works just fine. But if I do this...
var foo = @CSS(`
background-color: red;
`)
document.body ..foo
...then it doesn't work. I'm guessing this is because document.body isn't an Element, and so it gets wrapped, rather than mutating its class (like I want).
No problem, just have a top-level @Div, right? The problem is, if I do that, the <body> element still has some default styles (like margin) that I need to get rid of. It seems hacky that I would have to use a normal <style> for that, rather than using @CSS.
This also applies to the <html> element, which is the other element I need to style.
I tried messing around a bit with "mho:surface/doc-template/default" but that's for NodeJS only. Using "mho:surface/doc-template/plain" didn't help either (it intentionally provides no styles whatsoever). So, what's the best way to deal with this, since I'm *not* using .app files with Twitter Bootstrap? Just go with a normal <style>?
pcxunl...@gmail.com
Sep 13, 2014, 6:12:32 PM9/13/14
to strati...@googlegroups.com, pcxunl...@gmail.com
For the record, I decided to use a "reset.css" file which is included in my HTML pages by using <link>. This fixes the issues with <html> and <body> (among other things), so my app can focus on just the important stuff. I think this solution is pretty good, and I'm sure there's reasons that "mho:surface" doesn't consider DOM elements to be Elements, so I'm satisfied with this for now. Feel free to ignore this thread if you want.
Alexander Fritze
Sep 14, 2014, 12:47:04 PM9/14/14
to strati...@googlegroups.com
Yeah, the following *should* work:
var foo = @CSS(`background-color: red;`);
document .. @appendContent( @Body .. foo);
But it doesn't, because @appendContent doesn't work for "document",
which, in turn, is caused by "insertAdjacentHTML" not being defined on
"document".
It can be fixed (and we should fix it!), but fwiw it feels a bit odd
to add/remove body elements to a document and have @CSS scope & track
CSS for it.
What we usually do is to either add a global stylesheet (via <link> or
@RequireExternalCSS), or inject global CSS into the document using an
@global declaration in @CSS that is attached to some element in the
document, e.g.:
var my_global_css = @CSS(`
@global {
body { background-color: red; }
}
`);
var my_main_container = @Div(...);
document.body .. @appendContent(
my_main_container .. my_global_css
);
> --
> You received this message because you are subscribed to the Google Groups
> "StratifiedJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to stratifiedjs...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
var foo = @CSS(`background-color: red;`);
document .. @appendContent( @Body .. foo);
But it doesn't, because @appendContent doesn't work for "document",
which, in turn, is caused by "insertAdjacentHTML" not being defined on
"document".
It can be fixed (and we should fix it!), but fwiw it feels a bit odd
to add/remove body elements to a document and have @CSS scope & track
CSS for it.
What we usually do is to either add a global stylesheet (via <link> or
@RequireExternalCSS), or inject global CSS into the document using an
@global declaration in @CSS that is attached to some element in the
document, e.g.:
var my_global_css = @CSS(`
@global {
body { background-color: red; }
}
`);
var my_main_container = @Div(...);
document.body .. @appendContent(
my_main_container .. my_global_css
);
> You received this message because you are subscribed to the Google Groups
> "StratifiedJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to stratifiedjs...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
Tim Cuthbertson
Sep 14, 2014, 9:34:35 PM9/14/14
to strati...@googlegroups.com
There's also surface::GlobalCSS (on the current `master` branch), which produces a surface widget with no actual HTML content, just a global style:
document.body .. @appendContent(@GlobalCSS("
body {
...
}
"));
(you could append it anywhere, since it has a global effect - but I usually just use document.body)
Reply all
Reply to author
Forward
0 new messages