Stats on various ways of hiding DOM elements

[LeaVerou]

Would like to see numbers on various ways of hiding DOM elements, by trying to guess on: [aria-hidden], .hidden, .hide, .sr-only, .visually-hidden, .visuallyhidden, .invisible or [hidden].

(by @catalinred)

[catalinred]

On this matter, besides looking for the above CSS selectors and numbers, it would be interesting maybe to come up with some numbers on CSS declarations that "attempt" to hide elements too, e.g.:

• display: none
• width: 0 & height: 0 combination
• font-size: 0 maybe, if not for hiding, I believe this is still popular due to the inline block elements space between.
• transform: scale(0)
• color: rgba(..., ..., ..., 0), color: hsla(..., ..., ..., 0), color: #RRGGBB00 or color: transparent
• opacity: 0 or filter: opacity(0)
• visibility: hidden
• position: absolute; top: -9999px; This isn't a single declaration, but we can assume that once an element has fixed|absolute positioning and some top|left|right|bottom values greater than a defined threshold, then the element is meant to be hidden.
• text-indent: -9999px, same thing here when the value for text-indent is greater than our threshold
• And there's also the clip-path property but detecting the scenarios here might be a bit cumbersome, considering the shapes and values combinations.

Let me know what you think.

[LeaVerou]

I'm having trouble categorizing this in a section, @catalinred which section do you think it would fit in?

[catalinred]

I'd say the Selectors section maybe, we already have "How much are specificity hacks used? #27" so this might fit in there as well?

If we're also interested in the above CSS declarations that "attempt" to hide elements, we can just add this extra information as a paragraph or two in there, even if it's not really related to CSS Selectors.

[LeaVerou]

Hmm, it looks like the metrics first comment relates to selectors, whereas the metrics in the second one do not, so I'm not sure Selectors would be a good fit.

Perhaps we should step back for a moment and examine how we'd proceed with this metric and what it would teach us.

For the selector component (1): How would we determine which classes to look for? Would the metric for most popular classes cover this, which is already going to be measured in the Markup chapter? Similarly, the usage of attributes like hidden or aria-hidden could be covered in the Markup chapter. Do we need to measure its prevalence in selectors too, or would measuring their presence in the DOM suffice?

For the declaration component (2), what would we be measuring? How many rules use these? Which ways are more common?

Or were you thinking of determining the selectors to look for from (2)? I.e. find which rules have a sole purpose of hiding elements and see which selectors for those are most popular? That could be really interesting, and yes, would fit quite nicely in Selectors.

[catalinred]

Even though most popular class names will be covered in the Markup chapter, most probably the top 10 or so will not contain any from the (1) point.

In my opinion, a discussion about the presence of these classes wouldn't be that interesting in the Markup chapter but more in the CSS chapter because most of these class helpers are/can be added by libraries and/or popular CSS resets. But clearly, it's up to you :)

---

I.e. find which rules have a sole purpose of hiding elements and see which selectors for those are most popular? That could be really interesting, and yes, would fit quite nicely in Selectors.

On the (2) point, indeed, initially, I was thinking about how many CSS rules contain at least one of the declarations (block) above but I find your idea interesting.

Still, I think that e.g. you will never see transform: scale(0); or color: #RRGGBB00 added as a declaration to one of the selectors from (1), but it's pretty clear that the author's intent is to hide something using CSS even though the selector is let's say ".mainSidebar".

[LeaVerou]

In my opinion, a discussion about the presence of these classes wouldn't be that interesting in the Markup chapter but more in the CSS chapter because most of these class helpers are/can be added by libraries and/or popular CSS resets. But clearly, it's up to you :)

Agreed.

On the (2) point, indeed, initially, I was thinking about how many CSS rules contain at least one of the declarations (block) above but I find your idea interesting.

At least one, or only such declarations? In the first case we'd get elements that happen to be hidden, whereas in the second, we'd get classes like the ones in your first comment, that have the sole purpose of hiding.

Still, I think that e.g. you will never see transform: scale(0); or color: #RRGGBB00 added as a declaration to one of the selectors from (1), but it's pretty clear that the author's intent is to hide something using CSS even though the selector is let's say ".mainSidebar".

Especially about transform: scale(0), it is often use to enforce a certain kind of transition/animation.

[catalinred]

At least one, or only such declarations?

That's correct, only such declaration blocks.

In the first case we'd get elements that happen to be hidden, whereas in the second, we'd get classes like the ones in your first comment, that have the sole purpose of hiding.

This sounds good and looking forward to see the numbers!

[catalinred]

@LeaVerou here's an interesting find by @Tiggerito on the above visuallyhidden way of hiding stuff in the DOM:

[LeaVerou]

So in terms of an algorithm, how about this:
We traverse the AST, keeping only rules with declarations that match the examples above for hiding. We return a list of selectors from these rules, then we aggregate these selectors over all websites to see which ones are most common.

[LeaVerou]

I'm afraid we may have to forgo this. Way too many false positives for the data to be interesting.

If anybody else wants to work on it, here's my prototype:

export default function compute() {

let ret = {};

walkRules(ast, rule => {
	// Remove hiding declarations and see if there's anything left
	let nonHiding = rule.declarations.filter(({property, value}) => {
		if (property === "color") {
			return !matches(value, [
				"transparent",
				/^(rgb|hsl)a\(.+?,\s*0\)$/,
				/^(rgb|hsl)\(.+?\/\s*0\)$/,
				/^#[a-f0-9]{6}00$/
			]);
		}

		if (property.startsWith("-")) {
			return false;
		}

		let str = property + ": " + value.trim();

		return !matches(str, [
			"display: none",
			"visibility: hidden",
			"overflow: hidden",
			"clip: rect(0, 0, 0, 0)",
			"clip: rect(1px, 1px, 1px, 1px)",
			"clip-path: inset(0% 0% 100% 100%)",
			"clip-path: inset(0px 0px 99.9% 99.9%)",
			"transform: scale(0)",
			"width: 0",
			"height: 0",
			"padding: 0",
			"border: 0",
			"opacity: 0",
			"text-indent: -9999px",
			"position: absolute",
			"position: fixed",
		]);
	});

	if (nonHiding.length === 0 && rule.declarations.length > 0) {
		for (let selector of rule.selectors) {
			incrementByKey(ret, selector);
		}
	}
}, {
	type: "rule"
});

return sortObject(ret);

}

I'm going to close it for now, but we can always reopen if there's a volunteer to work on it.