Take elements into account which do appear on scrolling

Hi!
Currently elements which appear only after scrolling (like in many one-pager) are not taken into account when css is generated.

Regarding to https://github.com/Zrce/puppeteer-coverage-report-test/blob/master/index.js

I would like to see that an option for autoscroll is added
const autoScroll = async (page) => { await page.evaluate(async () => { await new Promise((resolve, reject) => { console.log("start scrolling"); var totalHeight = 0; var distance = 100; var timer = setInterval(() => { var scrollHeight = document.body.scrollHeight; window.scrollBy(0, distance); totalHeight += distance; if (totalHeight >= scrollHeight) { clearInterval(timer); resolve(); } }, 100); }); }); }

May I create a pull request for that?

[peterbe]

I'm not convinced. If you really want to depend on scrolling, it would be best if you can pass in a callable (that returns a promise) that does things to the DOM before the critical CSS is captured. In your case, it would be to scroll a bit. In someone else's case it might to be click some button.

So if you can come up with an optional callable that would be awesome. And a lot of people would appreciate your contribution.

[peterbe]

The other thing I would recommend is to wrap up your deployment with minimal CSS such that the rest of the CSS is loaded between the initial load and the first scrolling. With the right lazy loading, no human would be able to be fast enough to scroll down and see unstyled content.

[nubranch]

Somewhat related to this... Sticky or fixed navigation bars that appear after scrolling are also missed by minimalcss. Is there a way around this? I've been adding the sticky css class to my whitelist, but each website is different and uses different class names.

[peterbe]

There is no known workaround other than you should only rely on the minimal CSS to be that before somebody scrolls. I.e. navigating with no hands :)
What could potentially be a fancy solution is if you could programmatically supply some code that does something within the DOM. Perhaps something like:

minimalcss
  .minimize({ url: 'https://example.com/' }, interact: (document) => {
    // Scroll down a bit so that the sticky navbar starts to appear
    document.scrollTo(300);
  })
  .then(result => {
    console.log('OUTPUT', result.finalCss.length, result.finalCss);
  })
  .catch(error => {
    console.error(`Failed the minimize CSS: ${error}`);
  });

The thing that scares me is; you might now need to take 2 "snapshots". One when you haven't scrolled and one when you've scrolled down a bit.

In the end, I would recommend that you use the minimal css to put that into a <style> block in the HTML and then immediately, start replacing that with the full CSS. That way you get a nice first-load experience but also have all the CSS available for any possible user interactions.

[nubranch]

I tried the scrollTo statement but I didn't get a different css output.

Here's another example:

https://metrolighting.ca/lighting-automation-solutions/

If you scroll down the page, you'll see an image slider.

When I run minimalcss, the following selectors are missing:

button styling:
.slick-slider .slider-nav

And button arrows:
.fa-chevron-right:before
.fa-chevron-left:before

Is this related to animation not being captured unless scroll event is somehow captured?