guitarcenter.com / jQuery errors / Style issue

[ioSelect]

guitarcenter.com

Having styling issues after update; there is a error loading what looks to be an older jQuery version:

Same issue with any of the new 'color theme' settings (light,dark,disabled).

Please let us know ..and Thanks for the great browser!

[Moonchild]

Unable to reproduce, here.

[vannilla]

The top of the homepage looks good, but everything else including subpages is broken.
I didn't explore too much so I can't really tell if the messages in the console are meaningful or not.

[Night Wing]

No problems here either with me using, at this time, 64 bit linux Pale Moon 29.2.0 running in 64 bit linux Mint 20.1 (Ulysssa) Xfce

[Moonchild]

Looks like a case of:

Code: Select all

<link rel="preload" href="path/to/css" onload="this.rel='stylesheet'">

They are using "link rel=preload" which is an experimental feature that isn't supported by us (even Firefox only JUST has it since 85, according to MDN, but of course it's a long-since implemented Chrome feature where this originated), so that explains all the missing styling on the page.

Preloading css might in corner cases prevent a brief unstyled display of the page (depending on many, many factors) while it is loading, but effectively there will be no advantage to page load times or final rendering. it is wholly unnecessary to do this and webmasters of production systems should always opt for the more compatible choice, all things being equal (which in this case, they are).

The fix is simple though, just use rel="stylesheet" instead of "rel="preload", remove the onload handler from the <link> elements (which requires JS for it to work, as well, by the way, which isn't good or necessary to just load stylesheets!), and done. Sooo... someone get in touch with the webmaster and relay this information? it'd be in their own best interest to fix this.

See also: viewtopic.php?f=70&t=26061&p=207349&hil ... ad#p207349

[jobbautista9]

Why would someone preload their CSS? Aren't they always loaded first anyway? And even if they want to preload it, why won't they just add it along with stylesheet? You can use multiple rel attributes AFAIK, you just need to separate them with a space.

What a lazy web dev.

[Moonchild]

Why would someone preload their CSS? Aren't they always loaded first anyway?

I already explained why someone would want to preload CSS in my previous reply.
And no, many things are loaded as they become available. Fetching resources in a webpage is not synchronous or sequential.

You can use multiple rel attributes AFAIK

Where did you get that information? AFAIK you can't have more than one rel attribute.

What a lazy web dev.

Just trying to be trendy and being misinformed.

The proper (also according to MDN) way to preload, if you insist on it despite its experimental nature, would be to do it this way:
First, issue the preload, so the browser can preload the stylesheet if the feature is supported...

Code: Select all

<link rel="preload" href="style.css" as="style">

Then list a regular stylesheet link to link the css.

Code: Select all

<link rel="stylesheet" href="style.css">

This keeps it backwards compatible, avoids using JS and unspecified behaviour when changing the relationship of an already-parsed link attribute, and avoids potential restyling (both from preloading and relationship changes of the link). The parser can then use all information in one go; it knows it should preload and cache the .css file, and it knows it is to be linked as a stylesheet. All without re-parsing or dealing with DOM changes or firing up the JavaScript engine early.

[jobbautista9]

You can use multiple rel attributes AFAIK

Where did you get that information? AFAIK you can't have more than one rel attribute.

I mean multiple rel values, sorry if that wasn't clear. W3C allows this:

rel = link-types [CI]
This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.

---

The proper (also according to MDN) way to preload, if you insist on it despite its experimental nature, would be t do it this way:
First, issue the preload, so the browser can preload the stylesheet if the feature is supported...

Code: Select all

<link rel="preload" href="style.css" as="style">

Then list a regular stylesheet link to link the css.

Code: Select all

<link rel="stylesheet" href="style.css">

Sorry if I misunderstood something, but wouldn't

Code: Select all

<link rel="preload stylesheet" href="style.css" as="style">

achieve the same thing? Or is this not allowed for stylesheets?

[Moonchild]

Sorry if I misunderstood something, but wouldn't
Code: Select all
<link rel="preload stylesheet" href="style.css" as="style">
achieve the same thing? Or is this not allowed for stylesheets?

I don't know off-hand. maybe you should try it?
It gets kind of fuzzy when dealing with multiple keywords if they are inherently conflicting. Saving a few bytes combining 2 <link> elements really isn't worth the hassle, IMHO. Same for the onload= trick, same deal.