fix(pseudo class empty): removed whitespace example

[mfranzke]

Description

Added a whitespace again to the code example that has been removed by accident with some code beautification out of #2566
Removed whitespace example in total as discussed in this PR.

Motivation

That whitespace actually makes the difference within this code example, as it's currently being displayed incorrectly without the whitespace being included (first and third example displayed the same as they are actually the same code).
As discussed within this PR, this example might lead to confusion and we would probably bring it in again as soon as browser vendors have implemented the changed behaviour.

Additional details

Resulting live-example page on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Related issues and pull requests

Fixes #2581

[github-actions]

It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[bsmth]

Thanks for opening this one. It looks like no browser supports this yet: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty#browser_compatibility

I would remove it in this case

[bsmth]

Some comments outstanding to remove the whitespace-only example

[mfranzke]

Thanks for opening this one. It looks like no browser supports this yet: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty#browser_compatibility

I would remove it in this case

I would argument towards leaving it in there, especially as it's not a "new feature", but just changing the "matching-rule" for an existing one:

• Even with the current implementation, you could show the effect on the current way to the users that this element with a whitespace included wouldn't get targeted; kind of a "fail" case like the fourth one (Element with nested empty element), whereas the first two actually match.
• On the transition phase when the first browsers would start to change of their implementation, people would be able to compare this within the different browsers versions and different browsers (by different browser vendors) themselves. (Plus if all browser vendors would actually do it, currently we do have only an issue within the Firefox bugtracker being mentioned …)
• And last but not least, even after the whole transition would have been made so that all browser vendors would have moved to that new way of matching elements with whitespace as well, you would even further need that example to show that capability anyhow – so why not leave it in there for the moment, as we would need it the sooner the later (plus the arguments out of the previous two items)?

Plus this is probably a wider discussion, and this PR would just ensure that it's in the same state as it was previous to the – to my interpretation – unintended space removal through the prettification. Merging this would only recover that previous state and the discussion that you've mentioned could get handled in a separate issue.

What do you think?

[bsmth]

Thanks for opening this one. It looks like no browser supports this yet: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty#browser_compatibility

I would remove it in this case

I would argument towards leaving it in there, especially as it's not a "new feature", but just changing the "matching-rule" for an existing one

Thanks for putting time into sharing the rationale for keeping it. In general, we need at least one browser to implement something before we document it and even though this is more of a sub-feature than a feature, I think it will be confusing for some to see an interactive example for something that won't work.

I still think it's best to leave it out here and have the compatibility table be the source of truth. This logic is defined in the Browser Compatibility Data repository, FYI, see https://github.com/mdn/browser-compat-data/blob/60bef76e807ed45d354620d8725a3c7202cafc4b/css/selectors/empty.json#L46-L78. Let me know if that makes sense :)

[dipikabh]

Hello @mfranzke, thanks for this PR.

I agree with @bsmth here. Because no current browser supports this feature yet, including an example that doesn't work in any browser could lead to confusion for those who are trying to learn from these interactive examples. (Probably should not have been added in the first place).

I believe it would be best to remove the "Element with whitespace" example for now and we can consider adding it back once there is some browser support.

[dipikabh]

Thank you!

The requested change has been made