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

craigfrancis has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] Add :before-load() pseudo-class ==
Page layout will often change when using async JavaScript, which is annoying, especially on a slow internet connection.

Would it be possible to have a CSS selector that's only applied when the JavaScript is being downloaded, and during initial execution.

I'm always reluctant to do something like `display: none` on some content, then get the JavaScript to show it, as the JavaScript may have a problem (fails to load due to network or ad-blocker, parsing issues, finding the element, etc).

I realise async JavaScript introduces an issue here, because it can download after `DOMContentLoaded`. And the `load` event is probably too late (waiting for loads of images), so the exact definition of this pseudo-class is up for debate.

---

As an example...

On a registration form, it asks if you're a member, and if you select "yes", then additional fields appear.

Today I'd do that by getting the JavaScript to hide the fields on `DOMContentLoaded`, but this means the additional fields appear while loading.

I'd like to create a rule, that's in a normal `<link>` style sheet, such as:

    html:before-load .member_fields {
        display: none;
    }

So the fields are initially hidden, then my JavaScript can set more specific styles; and if I don't, it will fall back to the fields being shown.

As it's async, and the DOM might not contain the fields yet, I suspect my initial JavaScript code would do something like the following (after any compatibility checks):

    document.documentElement.className += ' js_register_enabled';

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4462 using your GitHub account

Received on Monday, 28 October 2019 18:30:46 UTC