2014 CSS Report: Examining how CSS is being used in the wild(reports.quickleft.com) |
2014 CSS Report: Examining how CSS is being used in the wild(reports.quickleft.com) |
FWIW, max z-index that is cross-browser safe is: 16777271
i only wish that <col> elements could propagate style rules as if they were parents of all the related td/th cells. there's still no way to specify text-align and font-* on entire columns easily, which is just silly.
Or if you don't need IE8 support you could use the nth-child selector (e.g. .my-table td:nth-child(2) { text-align: center; }).
In some cases I would argue one of these techniques would be cleaner / better than adding a <col> element just for a styling hook. But in other cases I agree with you that it would be nice if <col> styles propogated.
Besides the potential of sharing across platforms, it would be one less system for layout and styles that had to be learned.
* `content` is in the top 5 properties?
* Glad to see nobody else uses two colons on pseudo selectors.
* I can't believe how rare rgb color usage is! 0.4%? hsl I can believe.
* I'd be interested to see how many sites use `!important` (the correct number in a style sheet is zero).
I never liked the double colons for pseudo selectors either. I kind of understand the idea of using two colons for the pseudo elements and single colon for pseudo classes to differentiate the two. But again, I can't seem to care that much. I can tell what they are by their names.
The correct number for !important should be zero but it's whatever number of times you have to use it because someone inlined styles into the HTML and you don't have access to remove it.
select count(*) from property
where value similar to '%!important%'
=> 177119Icon fonts.
Are there any indicators that can reliably indicate usage of a CSS preprocessor? If so, what preprocessors are used and which ones? (Could property ordering, presence of hacks/comments, misspellings, prefixes, or source mapping comment be used to identify?)
What are the common values in ::before and ::after pseudo-element content properties?
If you leave out the identifiable CSS libraries, how does that affect the numbers? Do they scale by 10% or do the libraries (Bootstrap primarily) use rules/properties disproportionately enough to scale the other results?
What percent of files are minimized?
What does the histogram of selectors per site look like?
Edit: Also, how frequently do dataURIs show up (probably as background images)?
tr
tr td
tr td a
tr {
td {
a {
I mostly ignored by-domain grouping in my queries, but there is a host of analysis you could do that would get into the modeling portion of data science, teasing our correlation and trying to find 'groups' or styles' of CSS that is written on a site. I had only so much time ;-)
I also did a web perf report that is not fully edited or ready for consumption, but does not that 54% of sites I ran Google Page Speed Insights against didn't compress all of their CSS assets. (Same sample of domains)
What were the most common invalid style properties?