2014 CSS Report: Examining how CSS is being used in the wild(reports.quickleft.com)
reports.quickleft.com
2014 CSS Report: Examining how CSS is being used in the wild
http://reports.quickleft.com/css
8 comments
I think we've all been there and started throwing out crazy z-index values at one point or another, usually out of frustration. The only real solution is to keep this stuff under control from the start and always use exactly the z-index you need.
Ahaha totally. I can just imagine the hilarious scene where a poor dev just breaks after a solid 45 minutues of trying to get that god-forsaken div to overlap another and gets to his feet, punchs down the 9 key for a whole 3 seconds screaming a 3-syllable combination of rage-soaked curses ("cock-sucking cunt" comes to mind), finally collapsing back into his seat on the last; too pissed to even bother hitting Ctrl+R to see if it had worked, typing 'git add . && git commit -m "fuck everything." ' before going home.
First step is for people to understand stacking contexts (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Under...). Blew my mind after years of web development to learn that I had really had no idea how z-index worked.
I always used to use BASIC numbering -- 10x the actual desired value in case you need to insert something in between!
imo, flex-box and evangelism of box-sizing border-box have been the best things since CSS3 selectors and transforms/transitions.
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.
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.
Depends on your definition of "easy"... assuming your markup is being generated on the server or using templates or whatever (in other words, a loop), you can add a different class to each table cell that is in the 2nd column.
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.
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.
[deleted]
Also see Chrome's statistics on CSS (and other web tech) usage: https://www.chromestatus.com/metrics/css/popularity
Out of 79 valid style properties (not counting vendor prefixes) the author found 372 in use. ¯\_(ツ)_/¯
I wish Apple would add a SASS/CSS compiler into XCode for native UI. I know there are a couple side projects for this but if it were baked in it could really take off.
Besides the potential of sharing across platforms, it would be one less system for layout and styles that had to be learned.
Besides the potential of sharing across platforms, it would be one less system for layout and styles that had to be learned.
A few things that stuck out:
* `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).
* `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).
The reason I usually use hex over rgb is because it's easier to snag the hex color from the Photoshop layout given to me. That, and if I'm not using alpha then I suppose I don't really care that much.
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.
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%'
=> 177119> `content` is in the top 5 properties?
Icon fonts.
Icon fonts.
That's what I saw when I spot checked it. Explained both pseudo selector and content prevalence.
Hey OP here, I still have the data around if anyone has further questions to investigate.
Fascinating report!
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)?
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)?
I thought long and hard about trying to identify preprocessor usage reliably because that is a super interesting piece of data, but nothing stuck out as a smoking gun. Sequentially increasing selectors
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)
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)
Could you use the existence of CSS maps to identify the presence of certain preprocessors, even if not to distinguish them?
> Out of 79 valid style properties (not counting vendor prefixes) the author found 372 in use
What were the most common invalid style properties?
What were the most common invalid style properties?
None were particularly common, mostly hapax legomena: typos and wishful thinking like vertical-float and other things like that
[deleted]
FWIW, max z-index that is cross-browser safe is: 16777271