Is the new 'content-visibility' CSS property affecting how scripts are loaded on a webpage?

The freshly minted CSS feature known as the content-visibility property seems like a promising technique to boost the loading speed of web pages.

I am considering implementing it in my website's footer:

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

Since the footer is typically located at the bottom of the page structure, this property allows it to be rendered later on the screen for all pages across my site.

However, within my footer reside a multitude of JavaScript libraries that are incorporated through various <script> tags within the footer itself.

These scripts have different loading methods - some are eagerly loaded, others deferred, and some are asynchronously loaded. (Yes, quite a lot of scripts, unfortunately).

Therefore, my query is:

Will the use of the content-visibility property impact the loading of these scripts in any manner?

or will the scripts load normally regardless of the application of the CSS property?

I'm reaching out here because this appears to be a relatively new and somewhat mystical concept to me, and I haven't come across much relevant documentation. Thank you in advance for any insights on this matter.

javascripthtmlcssdombrowser

Answer №1

The correct syntax is 

<footer style="content-visibility:auto">
, not 
<footer content-visibility="auto">
.

This CSS property does not impact script loading, but it could affect script execution if it influences the layout, like relying on specific layout operations such as obtaining the bounding box of a rectangle.

Answer №2

After reviewing Alohci's answer and deeming it incomplete, I wanted to share my thoughts, although they may echo what has already been said.

I don't have Chrome 85, so unfortunately I can't personally test it. However, based on my interpretation of the specifications outlined here and here, here is what I believe:

  1. ...but if there was a script that adds a handler to an element, could it potentially be flawed, like using $(selector).click(...) ?

    I recommend testing it out! Try clicking on an element with content-visibility: auto using JavaScript code while it remains invisible due to being off-screen. I suspect the handler will work as intended since there are no indications in the specifications regarding this scenario.

  2. Could the use of the content-visibility property impact script loading in any way?

    No, according to the specifications, there is no mention of interference with resource loading caused by this property. Nevertheless, I encourage you to conduct your own tests! Refer to the Network tab to observe whether the script's loading sequence remains unaffected.

  3. So, it won't affect widely-used scripts, such as bootstrap, but what about scripts that...

    ...rely on various factors related to elements with content-visibility: auto or its descendants (as pointed out by Alohci)

    • depend on properties like innerText
    • are associated with accessibility features (although this area is not within my expertise)
    • and other scenarios specified in the specifications
    • not covered in the current draft, given that content-visibility's spec is still in development

    Yes, it could cause issues

    Consider a script that parses CSS properties, encounters content-visibility, and fails due to lack of recognition...or perhaps simply out of spite towards those implementing content-visibility :)

    However, chances are slim in your case, assuming the scripts you mentioned aren't concerned with your specific footer.

In any case, thorough testing is recommended. Yet, it's impossible to entirely rule out bugs, so give it a try if deemed necessary and observe the outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the date format inside the content of an HTML element or its descendants (excluding their attributes)

I have been trying to reformat some dates using JavaScript. My initial approach was: var regex = /(\d{4})-(\d{2})-(\d{2})/g; $('.container td').each(function() { $(this).html($(this).html().replace(regex, '$3-$2-$1')); ...

javascriptjqueryhtml

Ways to efficiently implement configuration settings in a functional approach

I've delved into the world of functional programming and I'm working on developing a package that needs to be configurable. My goal is to set up this configuration only once to maintain purity in my functions without relying on global state. Curr ...

javascriptfunctional-programmingnext.js

What methods can be used to optimize web page designs for varying levels of user privilege?

When creating web pages for users with varying levels of access and privileges, what is the most effective approach to take? And also, how can we ensure the safety of our design? 1) Should we create separate pages for different user levels/privileges? Or ...

javascripthtml

What is the best way to modify a current DOM element in React?

I have been utilizing the cropper.js tool to extract screenshots from a PDF file. My goal now is to personalize the crop box tool by adding some custom buttons at the bottom of the crop box. Upon loading the PDF file, cropper.js generates certain DOM eleme ...

javascriptreactjscropperjs

Preserve the scroll position while initiating a jQuery dialog

Utilizing Jquery UI Dialog to showcase a popup box In my design, there is a grid on the page where each row contains an icon that triggers a dialog box An issue arises when scrolling down and opening a dialog at the bottom of the grid, as it causes the p ...

javascriptjquerycssjquery-uijquery-ui-dialog

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

javascriptjquerycss

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

htmlcssinternet-explorer

Typescript HashMap implementation with Lists as values

Currently delving into TypeScript, I am attempting to generate a collection in a manner akin to the following Java example: HashMap<String, List<String>> hashMap = new HashMap<String,List<String>>(); Struggling to locate any releva ...

javascriptangulartypescript

Unexpectedly, the e.target.value in React's debounce function returned as undefined

I attempted to implement input debouncing with lodash's debounce function, but the code snippet provided below returned an undefined value. const { debounce } from 'lodash' class App extends Component { constructor(){ super() th ...

javascriptreactjsecmascript-6

Invoke a function from within an event handler

Is there a way to trigger a function once an event has been completed? For example - $('.class').slideUp('fast', function() { // execute the function }); ...

javascriptjquery

Maintain the alignment of content in the center while expanding background images

I am looking to create a website with a split background effect, similar to the design on this site . I want to maintain a content container width of 980px while achieving this look. I attempted to accomplish this by adding height and background color pro ...

htmlcssbackground-color

Show a brief glimpse of the JS/jQuery object on the screen

Exploring JavaScript objects today and encountered an unusual glitch. <form method="get" action="" name="start" > <fieldset> <label for="date">Date</label> <input type="date" name="date" id="date" /> <div>&nbsp; ...

javascriptjqueryobject

Exploring data elements in a Javascript array

Is there a way to use Javascript or jQuery to address the individual employee number, tasks, and sites in the following JSON array? $.each(mySchedule, function(i, obj) { console.log(obj.employees); }); var mySchedule = { "schedule": { "empl ...

javascriptjqueryloops

Ensure that the content inside the page has an overflow auto setting

When looking at the image, it is clear that I do not want my page to be scrollable. Researching the issue, I discovered that setting the height to 100vh is the solution (How to make a div 100% height of the browser window). I then set elements like 4 and 5 ...

htmlcssbootstrap-5mdbootstrap

Issue encountered: ng:areq Invalid Argument error encountered while attempting to define controllers in different files

After experiencing great success with my app, I encountered a challenge due to the size of my app.js file. To address this issue and promote modularity, I decided to separate controllers into individual files and restructure my app in a more conventional m ...

javascriptangularjsmoduleangular-ui-router

The movie's frame rate suffers from slow performance due to the use of separately downloaded JPEGs

I'm looking for a way to showcase a continuous stream of jpg images from a directory in a webpage, creating a movie-like effect. My current approach involved using the following code: function slideit() { $.get("test.php", function(show) { if(show ...

phpjavascriptajaxjsonslideshow

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

htmlcssbuttonmouseeventstylesheet

Eliminate spaces between divs without any margins or padding

In my HTML code, I have two divs with different classes - mini-date-holder and mini-event-holder. Even though both of these divs are set to have no margin or padding, they are still displaying with a gap between them. I'm struggling to understand why ...

htmlcss

Tips for displaying external JavaScript code in an alert box:

Is there a way to display external JavaScript code in an alert or another location by accessing the variable value s_code? (function(){ var newscript = document.createElement('script'); newscript.type = 'text/javascript'; ...

javascriptjavascript-objectsdom-events

Vue.js: The href attribute in a link is different from the data

Having <a> href tag below, clicking will redirect to www.duckduckgo.com, with the value of page.publicWebsite being displayed as well. {{page.publicWebsite}} shows www.duckduckgo.com. Is everything functioning correctly? https://i.stack.imgur.com/ ...

javascriptvue.jshref