W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2019

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

From: Craig Francis via GitHub <sysbot+gh@w3.org>
Date: Mon, 28 Oct 2019 18:30:44 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-513481721-1572287443-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:55 UTC