Load additional CSS outside of JS

33 views
Skip to first unread message

dyingfor...@gmail.com

unread,
Oct 7, 2020, 4:06:19 AM10/7/20
to unpoly
Hi,
I know unpoly wants you to either load all JS or CSS upfront or load site specific JS CSS with JS.

In case of a JS library (slider, maps) I can see that this is the way to go, since JS is needed anyways, but how to deal with site specific CSS the best?

The CMS I use adds site specific files either as <link> element in the header or places inline <style> there as well.

Both gets ignored by unpoly, using `up-dash` etc.

The only way to load additional CSS seems to be adding <link> or <style> to the HTML fragment that gets loaded?

Did I miss something, how do you deal with that in a non JS way? 

dyingfor...@gmail.com

unread,
Oct 7, 2020, 4:33:27 AM10/7/20
to unpoly

MDN writes:

  • A <link> element can occur either in the <head> or <body> element, depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore <link rel="stylesheet"> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <link> elements from your body content, putting them in the <head>.

And here is an older article: https://jakearchibald.com/2016/link-in-body/ 

So what I read is, it's semantically ok, but it blocks rendering?!

Matías

unread,
Oct 15, 2020, 4:46:43 AM10/15/20
to unpoly
I'm not sure if I understand 100% your use case, but I think that if the problem is that you're receiving some <link> and/or <script> elements as an ajax response (by following an up-target enabled link with unpoly for example), then something that you could see if it works is writing a custom compiler.

up.compiler("script", (el) => {
.....
// manually grab this element's links and/or contents and/or scripts and push them to the head
....
})

I haven't tried it, so be aware this might not work at all. Just an idea to try.
Reply all
Reply to author
Forward
0 new messages