Comments (8)
I don’t think this is feasible to do without custom metrics since we don’t have access to the DOM and it would be too expensive to parse the HTML via DOMParser
, but we could still measure how frequently dir
is used and on what selectors. @rviscomi correct me if I’m wrong?
from css-almanac.
@catalinred Do you think we should still pursue this by measuring dir
usage or should we axe it?
from css-almanac.
If we can measure both ‘dir’ attr from the markup and ‘direction’ property from the CSS, and depending of the resulted numbers, then we could draw some interesting conclusions here.
But if this is too cumbersome and expensive, sure, we can skip it :)
from css-almanac.
@Tiggerito added a dir
custom metric for the Markup chapter, so this should be possible.
from css-almanac.
So we just measure usage of each dir value?
from css-almanac.
Here's an example of the output for dirs:
"dirs": {
"html_dir": "ltr",
"body_nodes_dir": {
"values": {
"ltr": 1
},
"total": 1
}
},
So you can report on the values people use for the html dir attribute as well as how often it gets used within the body.
from css-almanac.
One complication is that we don't really know what CSS selectors match. We can guess in certain cases (e.g. html
or :root
, but we don't know what e.g. .foo
is. I could:
- store all distinct CSS selectors that these values are found on, and hope that they'd aggregate nicely over the website corpus, OR
- just measure
dir
values regardless of what selector they come from, OR - measure
dir
values broken down into 3 categories: a) obviously<html>
, b) obviously<body>
, c) any other selector lumped together
Thoughts?
from css-almanac.
measure dir values broken down into 3 categories: a) obviously , b) obviously , c) any other selector lumped together
I'd say this breakdown can be helpful.
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
- 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.