Re: [csswg-drafts] [selectors] Add :before-load() pseudo-class (#4462)

Thanks @tabatkins.

This probably should be a Media Query.

I originally thought about a pseudo-class because it might help keep rules together:

    html:before-load .member_fields,
    html[data-member="no"] .member_fields {
        display: none;
    }

But I doubt I would actually do this, as the initial load would be a `display: none`, and after setup I would probably use other styles (e.g. [height for animation](https://github.com/w3c/csswg-drafts/issues/626)).

---

I like your idea of using `document.readyState` (loading, interactive, complete); but I think we need another state to cover async JavaScript.

As in, if you use:

    <script src="./script.js" async="async"></script>

That JavaScript might run after `DOMContentLoaded`, which is why I use something like:


    ;(function(document, window, undefined) {
    
      'use strict';
    
      if (!document.addEventListener || !document.querySelector) {
        return;
      }
    
      document.documentElement.className += ' js_register_enabled';
    
      function init() {
        var inputs = document.querySelectorAll('.member_fields');
        // ...
      }
    
      if (document.readyState !== 'loading') {
        init();
      } else {
        document.addEventListener('DOMContentLoaded', init);
      }
    
    })(document, window);

Now I could use `loading` or `interactive`:

    @media (page-state: loading), (page-state: interactive) {
        .member_fields {
            display: none;
        }
    }

Which would work, but it would involve waiting for all resources to load (images might be a while).

So is there is a state we can define, a bit like how the `load` event works, but it just waits for `<script>` resources; which could be sync, defer, or async?

-- 
GitHub Notification of comment by craigfrancis
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4462#issuecomment-547222930 using your GitHub account

Received on Tuesday, 29 October 2019 02:04:26 UTC