Does CSS new 'content-visibility' property interfere with scripts loading behavior?

Question

The new CSS property content-visibility property looks like a nice tool to increase page loading speed.

I want to add it to my page footer:

<footer style="content-visibility: auto;">
  (...)
</footer>

As it can be painted later on the screen (it appears below the folder for all my site's pages).

However, my page's footer has many js libs that are loaded there via <script> tags inside the footer tag.

Some scripts are eager loaded, some are deferred and other are loaded asynchronously. (yeah, many scripts, unfortunately).

So my question is:

Will the content-visibility property interfere with script loading in any way?

or will the scripts load the same way regardless of the CSS property?

Asking here as it's new and looks kind of "magic" to me, and I didn't find much related documentation. Thanks in advance for any insight on this.

Answer 1

It would be <footer style="content-visibility:auto"> not <footer content-visibility="auto">.

It's a CSS property, so it won't affect script loading, but because it has the potential to affect the layout, script execution could be affected if it, for example, relied on a particular layout based operation such as getting the bounding box of a rectangle.

Answer 2

As you consider Alohci's answer as incomplete, I'll add my 2 cents, but mostly I can only rephrase that what already been said.

I don't have Chrome 85, so I can't test it. But after reading the specs this and this I think that:

1. ...but if It was a script that adds a handler to an element, it may be faulty, like $(selector).click(...) ?

   Just test it! Try clicking an element with content-visibility: auto with JS code while it's still invisible due to being off-screen. I'm sure handler will work. There is nothing in the specs about such matters.

2. Will the content-visibility property interfere with script loading in any way?

   No. There is not a word about resource loading in the specs. But again - test it! Look at the Network tab. Script's load sequence shouldn't change.

3. So, it won't affect scripts that are of general use, like bootstrap and such, but [what] if it was a script that...

   ...a script that...

   • somehow depends on the size of element with content-visibility: auto or it descendants (Alohci already pointed it out)
   • somehow depends on innerText
   • related to some accessibility features (possibly... not really familiar with these)
   • and in some other cases (read the spec if you're interested in the details)
   • and there can be other cases not mentioned in the specs as the feature is still in it's infancy. (And the content-visibility's spec is actually a draft)

   Yes it can break

   You can even imaging a script that reads css properties, finds content-visibility and throws as it's unknown to it... or even throws just because it's author hates those who use content-visibility :)

   But I think that in your case the chances are infinitesimal, as I suppose that non of the scripts you're referring to are interested in your footer.

Anyway, any change should be tested (ideally). But also you can never be sure that there are no bugs. So just just try it, if it's worth it, and see how it goes.