Comments (5)
Is calc()
used to compute constant non-integer values? If so, which ones?
from css-almanac.
Nice one @Crissov, added it to the list!
from css-almanac.
😊 Itʼs not that I desperately want proof to support phi
(which is also unlikely to show up because sqrt()
is too new). I am generally curious because I think I have seen such calculations in the wild.
from css-almanac.
For the properties that calc()
is used in, it's enough to traverse values and keep track of properties whose value contains calc(
.
For the rest, we can either extract uses of calc()
and create a parse tree. Hopefully we can repurpose an expression parser (possibly this?), or wing it with regexes.
- For units, we can match
[a-z]+
after numbers and keep a tally - For calculation complexity, it depends on how we define this. We could guesstimate by the number of opening parens and operators, or by the depth of the tree, which we can either directly measure if we're parsing
- Regarding constants, I suppose if there are no
var()
terms, or dimension tokens, we can conclude this is a constant?
from css-almanac.
Just pushed JS for this. In addition to the metrics we have discussed, I'm also counting properties in which calc()
appears.
Sample output for the Smashing Magazine CSS:
{
"total": 276,
"properties": {
"font-size": 73,
"width": 40,
"padding": 23,
"margin": 17,
"margin-top": 16,
"margin-bottom": 16,
"top": 12,
"max-width": 9,
"padding-top": 9,
"height": 8,
"margin-left": 7,
"line-height": 7,
"padding-left": 7,
"left": 6,
"margin-right": 6,
"min-height": 4,
"right": 4,
"bottom": 3,
"grid-row-gap": 2,
"transform": 2,
"max-height": 1,
"padding-bottom": 1,
"background-position": 1,
"background-size": 1,
"grid-template-columns": 1
},
"units": {
"vw": 220,
"em": 184,
"px": 65,
"%": 43,
"rem": 22,
"vh": 21,
"deg": 2
},
"number_of_different_units": {
"1": 10,
"2": 262,
"3": 4
},
"operators": {
"+": 237,
"-": 68,
"/": 20,
"*": 15
},
"number_of_operators": {
"0": 1,
"1": 230,
"2": 32,
"3": 8,
"4": 4,
"6": 1
},
"number_of_parens": {
"0": 251,
"1": 18,
"2": 6,
"4": 1
},
"constants": []
}
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.