Hidden CSS?

Community Help
1

I tried to replicate this forked notebook:

as this:

However, somehow the first notebook is loading the dc.css but I cannot figure out how it is importing the css because both notebooks imports the same libraries.

2

Welcome! Would you mind clicking “Enable link sharing” in the upper-right dropdown menu of each of these two notebooks so that we might see what’s going on?

1 Like
3

Apologies! I have enabled link sharing on both!

4

The final cell of your first notebook (named INJECTCSS) is missing from the second one. When I copy that cell to the second notebook, the hover styles then work as expected. I guess the INJECTCSS cell is hard to see (unless you happen to hover over it) since it returns an empty div.

You may already know this, but a more Observable-idiomatic way to write INJECTCSS is with the html template tag function:

INJECTCSS = html`<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3.0.4/dc.css">`

Using it this way also displays a more-visible <link> placeholder (though maybe you wanted to hide to it).

An alternative approach I’ve used before is to load resources together, so that e.g. the dc stylesheet and dc package are loaded in the same cell:

dc = {
  if (!document.getElementById('dc-stylesheet')) 
    document.head.appendChild(html`<link id="dc-stylesheet" rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3.0.4/dc.css">`);
  return require("dc");
}
4 Likes
5

Another way to bundle JS and CSS without having to append to <head> would be to use viewof:

viewof dc = {
  const PKG = 'dc@3.0.4';
  // <code>dc</code> just adds a visual clue to the cell's output.
  const view = html`<code>${PKG}</code><link rel="stylesheet" href="https://unpkg.com/${PKG}/dc.css">`;
  view.value = require(PKG);
  return view;
}
4 Likes