Comments (10)
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
combinationfont-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
orcolor: transparent
opacity: 0
orfilter: 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 fortext-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.
from css-almanac.
I'm having trouble categorizing this in a section, @catalinred which section do you think it would fit in?
from css-almanac.
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.
from css-almanac.
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.
from css-almanac.
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".
from css-almanac.
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.
from css-almanac.
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!
from css-almanac.
@LeaVerou here's an interesting find by @Tiggerito on the above visuallyhidden
way of hiding stuff in the DOM:
from css-almanac.
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.
from css-almanac.
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.
from css-almanac.
Related Issues (20)
- Which media query features are used most? HOT 3
- Selectors HOT 7
- How frequently is each color format used? HOT 34
- Usage of grid-template-areas as grid layout mechanism HOT 6
- Usage of named lines syntax when creating grid tracks HOT 5
- Grid-like use of flexbox HOT 8
- Multicol usage with column-count and column-width HOT 2
- [meta] Value utilization HOT 12
- direction CSS property usage HOT 8
- Analyze Sass stylesheets HOT 8
- What CSS hacks are still used to target browsers/versions/platforms? HOT 5
- How popular is each CSS preprocessing language? HOT 4
- [meta] Chapter outline HOT 4
- Logical vs physical properties HOT 2
- CSS-in-JS HOT 18
- Most common properties used inside media queries HOT 3
- [meta] Custom metrics HOT 8
- !important stats
- Global keyword usage
- Declaration repetition (DRYness) HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-almanac.