Content Visibility

(() => {
 
  // Create an object to store the results
  let ret = {
    autoTable: [],
    autoNodeArray: []
  };
 
 
  // Get the name of the node
  function getName(node) {
    const name = node.nodeName;
    return node.nodeType === 1
      ? name.toLowerCase()
      : name.toUpperCase().replace(/^#/, '');
  }
 
  // Get the selector
  const getSelector = (node) => {
    let sel = '';
 
    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const part = el.id
          ? '#' + el.id
          : getName(el) +
          (el.classList &&
            el.classList.value &&
            el.classList.value.trim() &&
            el.classList.value.trim().length
            ? '.' + el.classList.value.trim().replace(/\s+/g, '.')
            : '');
        if (sel.length + part.length > (100) - 1) return sel || part;
        sel = sel ? part + '>' + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch (err) {
      // Do nothing...
    }
    return sel;
  };
 
  const getNodesWithContentVisibility = (node) => {
    // Get the computed style
    let cs = window.getComputedStyle(node);
    let cv = cs['content-visibility'];
 
    // If we find content-visibility: auto, add it to the table
    if (cv && cv === 'auto') {
      ret.autoTable.push({ selector: getSelector(node), ContentVisibility: cs['content-visibility'] });
      ret.autoNodeArray.push(node);
    }
 
    // Recursively call this function for each child node
    for (let i = 0; i < node.children.length; i++) {
      getNodesWithContentVisibility(node.children[i]);
    }
  }
 
  // find all content-visibility: auto
  getNodesWithContentVisibility(document.body);
 
  // Display the results in the console
  if (ret.autoTable.length === 0) {
    console.log('%cNo content-visibility: auto found. Consider applying content-visibility: auto to offscreen content (the footer perhaps?)', 'color: orange; font-weight: bold;');
  } else {
    console.log('%cContent-visibility: auto selectors', 'color: green; font-weight: bold;');
    console.table(ret.autoTable);
 
    console.log('%cNodeList for you to inspect (harder to read but more info)', 'color: green; font-weight: bold;');
    console.log(ret.autoNodeArray);
  }
})()