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](


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) {
      document.documentElement.className += ' js_register_enabled';
      function init() {
        var inputs = document.querySelectorAll('.member_fields');
        // ...
      if (document.readyState !== 'loading') {
      } 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 using your GitHub account

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