@import doesn't work with online URLs?

[Cleridwen]

hi!

sorry if this isn't a good place to ask for help… I haven't found answers online. for some reasons, using @import to point directly to the online file doesn't work in userChrome.css. is this intended? is there a way to change it? or am I doing something wrong?

@import url(http://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/combined_favicon_and_tab_close_button.css);
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*** Remove items from image context menu ***/

/* Email Image... */
#context-sendimage {
  display: none !important;
}

/* Set Image as Desktop Background... (and preceding separator) */
#context-sep-setbackground, #context-setDesktopBackground {
  display: none !important;
}

/* Inspect Accessibility Properties */
#context-inspect-a11y {
  display: none !important;
}

/* Save Page to Pocket */
#context-pocket { 
  display: none !important; 
}

I tried using https, adding or removing "s around the url. considering Firefox requires a restart every time anything is changed, I assume that loading content from online sources would introduce some delay that would make things simply not work. but in case there's any other way…

[MrOtherGuy]

I don't know exactly why the import fails, but I think it's a pretty safe bet to assume that the parent process is not allowed to use css resources loaded via http(s).

Save the file locally into your chrome directory and then import that.

[MrOtherGuy]

Another thing that occured to me is that the link you are using is not a link to the actual stylesheet, it's just a link to github webpage, of which that stylesheet is a small part of. You would at the very least need to use the url for the actual file - https://mrotherguy.github.io/firefox-csshacks/chrome/combined_favicon_and_tab_close_button.css

But I still don't think it would work.

[MrOtherGuy]

Looking into this a bit more, I'm pretty sure that user styles (userChrome.css and userContent.css) are only ever loaded synchronously, and so their imports also need to bee synchronous. So, they need to be given actual files on disk (I suppose a network drive might work), but they cannot import style sheets over network.

[Cleridwen]

Thanks for the replies! that all makes sense. I'll import files manually and git pull once in a while to deal with updates if anything breaks.

Another thing that occured to me is that the link you are using is not a link to the actual stylesheet, it's just a link to github webpage, of which that stylesheet is a small part of. You would at the very least need to use the url for the actual file

That would seem logical, but I ruled that out as an issue while testing, because through my other interactions with CSS, I have found that it somehow still works fine, for example with custom CSS for Discord (using BetterDiscord), where I have a bunch of @imports using regular github.com links, as they were directly shared by their creators. I suppose github knows that some users would eventually do that, and somehow made it work in the background