leaverou / css-almanac Goto Github PK
View Code? Open in Web Editor NEWRepo for planning & voting on which stats to study
Home Page: https://projects.verou.me/mavoice/?repo=leaverou/css-almanac&labels=proposed%20stat
Repo for planning & voting on which stats to study
Home Page: https://projects.verou.me/mavoice/?repo=leaverou/css-almanac&labels=proposed%20stat
I'm aware only Safari implements this now, but other browsers are showing interest so probing color(display-p3 r g b)
would be timely this year. Interesting to see
color-gamut
media queryThis has actually better browser support than I expected so it would be interesting to study if it's used anywhere yet.
I'm interested to find out how many devs use a different direction
in CSS compared to the dir
attribute from the markup?
My guess is that the CSS direction
property is often used for UX things like star rating or similar and has nothing to do with the actual direction of the text in the document.
We could get HUGE insight about what CSS authors need by analyzing Sass stylesheets. We can find URLs to Sass files from the CSS files that have sourcemaps and there is a JS-based Sass parser. This will give us insight not just into the current state of CSS, but perhaps more importantly, its future.
The things we could study span all areas of the outline. Here are some initial ideas
&
)? How many levels?I'm most excited about studying these, because they are things that absolutely cannot be done in CSS today, so it would be illuminating to see how much they are used and for what.
@if
, @else
, @for
, @each
etc)if()
function?Popular vendor prefix numbers. Are the -webkit-
, -moz-
, -o-
or -ms-
numbers still relevant, considering the improved browser support for most of the CSS properties that once required vendor prefixes?
Nice one, although
-webkit
now falls into two categories which should be distinguished;
- Things that are actually WebKit specific
- Things that the other browsers have (wth varying degrees of reluctance) had to implement, primarily so that iOS-specific mobile content also works on browsers other than Safari. The
-webkit
vendor prefix merely being historical legacy, at this point.
The second one is interesting to analyze because it constitutes a part of the Open Web Platform that was added without the usual design debate or standards process.
How much are people using multicol on the web?
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]
.
…and what percentage of that uses sourcemaps?
It would be good to see how popular the various CSS-in-JS approaches are, potentially breaking it down by library.
List of libraries and how to detect:
Implemented | Solution | How | Example |
---|---|---|---|
YES | styled-components | data-styled attribute in style tag |
https://officeworks.com.au |
YES | radium | data-radium attribute |
https://pixboost.com/customer |
YES | react-jss | data-jss attribute |
https://cssinjs.org/react-todo-mvc |
YES | Goober | id=_goober |
|
YES | emotion | data-emotion attribute |
https://emotion.sh/docs/introduction |
YES | merge-styles | data-merge-styles attribute |
https://developer.microsoft.com/en-us/fluentui#/ |
YES | styled-jsx | style element with id that starts from __jsx- |
https://vercel.com |
YES | aphrodite | data-aphrodite attribute in <style> |
https://www.khanacademy.org |
YES | fela | data-fela-stylesheet attribute in <style> |
https://www.ninjaconcept.com |
YES | styletron | data-styletron attribute in <style> or class _styletron_hydrate_ in <style> |
|
YES | react-native-web | <style> with id="react-native-stylesheet"` |
https://matchcenter.mlssoccer.com |
YES | glamorous | data-glamor attribute in <style> |
https://glamorous.rocks/getting-started |
cxs | |||
react-css | |||
glam | |||
rockey |
TODO: Add libraries from here https://github.com/MicheleBertoli/css-in-js
I've wondered for years the web-wide usage of media query features and wanted answers to questions like:
min-
or max-
features used more prevalently?width
features compare to height
for responsive design?print
media type is out there?width
-based breakpoints, what are the commonly used breakpoints!important
?Algorithm: Walk all declarations, count how many have !important
and how many there are total. Of those with !important
, count which property it is.
After wading through all proposed stats, it looks like the only ones that may require custom metrics are:
Greg's script in #37 would also fall under that category, since it reads document.styleSheets
, but it may be a better idea to write a script that uses the Rework AST to compute these metrics.
[attr]
, exact([attr=val]
), starts with ([attr^=val]
), ends with([attr$=val]
), substring([attr*=val]
), language([attr|=val]
). Used at all; not just in relation to ID or class>
, +
, and ~
, as well as :not
(maybe we should leave space out)::before
(incl :before
), ::after
, ::first-letter
, ::first-line
, ::selection
(incl prefixed)::-webkit-X
, ::-ms-X
, and ::-moz-
like ::-webkit-inner-spin-button
are people including, including non-prefixed, such as ::file-chooser-button
.:checked
, :valid
, etc.How many of the pages are using the latest border-box
sizing model, compared to content-box? Is the border-box
number high due to popular CSS libraries usage, such as Bootstrap or Zurb Foundation?
Popular shorthands, e.g. transition, background, font, animation. Are the numbers maybe low due to the fact that the order of the values is not that easy to remember without checking the documentation?
I'd like to see how CSS is applied to a page: style
attribute, <style>
element and/or the <link>
element. Besides <link>
, I'd expect numbers to be quite high on <style>
elements mostly due to the critical CSS recommended practice.
Added by @LeaVerou: It would also be interesting to measure how much inline CSS (style
attribute) is used on pages.
Via HTTPArchive/almanac.httparchive.org#898 (comment):
If still feasible it would be interesting to know where we stand with respect to declaration repetition, that is, the ratio of unique to total declarations per style sheet (ideally: per media query).
The resulting factor would tell us how “DRY” and therefore maintainable style sheets are, and could potentially inform relevant spec decisions.
Past data, context, and some thoughts are available in 70% Repetition in Style Sheets (disclosure: own article).
In addition to how this is used, we can also study whether custom properties are present in @keyframes
.
How many of those are actually declared, and how many fail to animate?
This could include:
We can study this by extracting the extension from sourcemap URLs.
Last year we adjusted the data gathering so we could look at and examine custom elements, I even made a little tool that let you explore the dataset collections with regexps instantly because the dataset is rather specific and comparatively small (it's a loadable json file even of reasonable size)... This was really, really handy in exploring (we even found and helped fix a very popular bug because of it) and I've used it a number of times since - @rviscomi gives me a new dump of data occasionall and we can explore it over time even.... I wonder if we could do the same for css custom properties? I expect the same basic idea/data model would work?
Note: This needs to be periodically copied over to the google doc, but is easier to work on here so we can easily cross-reference issues
Nov 23: Moved Sass to a separate section, moved !important
under Selectors, which was renamed "Selectors & Cascade".
Nov 10: Added @rachelandrew to RWD chapter, removed CSS Hacks #40 section
Sep 21: Removed Fonts section, as the overlap with the Fonts chapter is too significant. This was it:
Sep 17 Removed #12, added the now more general #14 as a separate section
Last year, we only measured the percentage of pages that use any logical property.
While this is a useful measurement, I would like to measure:
rgb()
, rgba()
, hsl()
, hsla()
, #rgb
, #rgba
, #rrggbb
, #rrggbbaa
, color(...)
, named colors, currentColor
.rgb(r g b / a)
instead of rgba(r, g, b, a)
etc.In a way, this is a generalization of #18.
We may possibly want to group by type of media query (size-related vs capability-related).
This will give us a lot of insight about which design aspects of websites designers want to adapt to different conditions.
I'd be interested to see how often people are using grid-template-areas rather than placing by line name and number.
You can generally detect usage of flexbox for more gridlike things if sizing is set in percentages and grow is 0
. As to make flexbox behave like a grid, you need to stop it being flexible. This would possible be swamped by frameworks as this is what all the frameworks with a flexbox-based grid layout are doing.
Try to detect and show numbers for the native font stack variations, compared to the other popular font families like Open Sans and Roboto.
When it comes to CSS units usage, I'd love to see some numbers on unitless 0 values, e.g. 0 vs 0px/em/rem/ numbers comparison.
It would be especially cool to see which non-related properties are often used together.
(idea by @karger)
How many of the pages are using SVG favicons and are these SVG's using CSS @media (prefers-color-scheme: light/dark)
to provide an alternate style depending on the OS color scheme?
I see last year we only calculated how many websites use custom properties (5%).
This year, I would like to go a lot deeper. E.g.:
var()
only, or both? (via custom metric):root
like static variables? (via custom metric)@supports
? If so, what property name do they test for? (via AST)initial
? (via custom metric or AST)Are .clearfix
, .clear
or .cf
still popular? How popular considering the current flexbox and grid usage?
Are authors still using these?Which ones are most prevalent that work with common versions of browsers? If possible to determine, which problems are being solved that can’t be solved with @supports?
For reference: http://browserhacks.com/
Usage of inherit, initial, unset, revert, overall and by property.
Algorithm is pretty obvious.
Stats on which font-variant-*
longhands such as font-variant-numeric
or font-variant-east-asian
are being used.
Also whether the font-variant
shorthand is being used with the none
value, to reset all the longhands.
Are people naming lines? Anecdotally I didn't see a lot of use of this until the last year, I'm getting more questions about it recently and it feels as if it was something people found an extra complexity but now they are using grid more they find it is useful. I'd be interested to know if the stats bear that out.
Considering the unitless line-height
is a best practice, would be interesting maybe to see which values authors prefer when setting the line-height: length, unitless or percentage.
Which features are most commonly detected and with what values (if any)?
We may also want to measure CSS.supports()
, its JS counterpart.
calc()
most frequently used in?calc()
most frequently used with?calc()
used to compute constant non-integer values? If so, which ones? (by @Crissov)While it may be obvious, I've historically found value utilization valuable in a normalized manner for browser vendors, interested web devs as well as standards folks. What I mean by normalization is to remove down to the unit. Francois and myself did a lot of work here because many people report on say the utilization of a property (eg: Chromestatus) but we found a lot of value in the value. So we would normalize them to parans, units, keywords. So for color you would see something like this:
The units become valuable, say for example percentages used in the margin and padding properties :)
font-variation-settings
, or the higher level properties (where available)?By specificity hacks I mean selector rewritings or additions with the sole purpose of increasing or decreasing specificity. Things like:
[id=foo]
.foo.foo.foo
:not(#nonexistent) .actual-selector
I suppose BEM could also be considered a specificity hack.
E.g. average specificity per selector
Specificity: what percent of selectors are 0-0-0 thru 5-5-5. What is the highest specificity found?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.