Query metrics: Chapter 2. CSS #83

rviscomi · 2019-07-23T18:38:01Z

Part	Chapter	Authors	Reviewers	Tracking Issue
I. Page Content	2. CSS	@una @argyleink	@meyerweb @huijing	#4

READ ME!

All of the metrics in the table below have been marked as Able To Query during the metrics triage. The analyst assigned to each metric is expected to write the corresponding query and submit a PR to have it reviewed and added to the repo.

In order to stay on schedule and have the data ready for authors, please have all metrics reviewed and merged by August 5.

Assignments

ID	Metric description	Analyst	Notes
02.01	Custom properties	@rviscomi	props prefixed by `--`, % of sites
02.02	`@import` `@supports`	@rviscomi	page -> css -> regex (note: the content of @supports is more complex with regex)
02.03	Filters	@rviscomi	page -> css -> regex
02.04	Blend modes	@rviscomi	page -> css -> regex
02.05	Logical properties	@rviscomi	page -> regex (note: attribute selectors also complex to group with regex)
02.06	Hsl vs hsla vs. rgb vs rgba vs. hex	@rviscomi	page -> regex
02.07	rem vs em vs px vs ex vs cm etc.	@rviscomi	page -> regex
02.08	classes vs ids	@rviscomi
02.10	Top CSS libraries	@rviscomi	page -> css or html -> regex (fingerprinting with regex (+ minifiers is extra complex) focus on top 5 libs?)
02.11	Top reset utilities	@rviscomi	possibly with fingerprinting with regex (+ minifiers is extra complex) focus on top 5 libs?
02.12	RTL vs. LTR	@rviscomi	page -> regex
02.13	Flexbox	@rviscomi	feature counter
02.14	Grid	@rviscomi	feature counter
02.15	Most Popular Snap Points	@rviscomi	page -> css -> regex (max-width + min-width)
02.16	max vs. min-width	@rviscomi	page -> css -> regex (counter)
02.17	Ems vs rems vs px in media queries	@rviscomi	page -> css -> regex (counter)
02.18	How many people using print style media queries	@rviscomi	page -> css -> regex (counter)
02.19	number of stylesheets per page	@rviscomi
02.20	Most popular names for stylesheets	@rviscomi
02.21	Minified vs unminified	@rviscomi	check for whitespace
02.22	# of fonts downloaded	@rviscomi
02.23	Types of fonts downloaded	@rviscomi
02.24	Average size of CSS load per site	@rviscomi
02.25	Average size of images loaded by stylesheets (inline and linked)	@rviscomi	need to look at initiator
02.32	Number of colors declared per site	@rviscomi
02.33	Number of duplicate colors per those sites	@rviscomi	whether colors are defined more than once
02.34	Number of fonts declared per site	@rviscomi	duplicate of metric above
02.35	Number of duplicate font family declarations	@rviscomi
02.36	Number different font size values per site	@rviscomi
02.37	Number of z-indices per site	@rviscomi
02.38	Most popular z index values (chart)	@rviscomi
02.39	Number of different media query values per site	@rviscomi
02.40	Number of different margins per site	@rviscomi
02.41	Number of transitions used per site	@rviscomi
02.42	Number of `@keyframes` declared per site	@rviscomi
02.43	Number of [id="foo"]	@rviscomi
02.44	Number of [class*='foo']``[class^='foo'] [class$='foo'][class~='foo']	@rviscomi
02.45	Number of classes per element	@rviscomi
02.46	Average Length of classes	@rviscomi

Checklist of metrics to be merged

The text was updated successfully, but these errors were encountered:

rviscomi · 2019-08-08T19:48:16Z

I've created a new table https://bigquery.cloud.google.com/table/httparchive:almanac.parsed_css containing a JSON object for each parsed CSS resource, for example:

{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [
          ".tparrows:before"
        ],
        "declarations": [
          {
            "type": "declaration",
            "property": "line-height",
            "value": "normal",
            "position": {
              "start": {
                "line": 3,
                "column": 5
              },
              "end": {
                "line": 3,
                "column": 24
              }
            }
          }
        ],
        "position": {
          "start": {
            "line": 1,
            "column": 1
          },
          "end": {
            "line": 5,
            "column": 2
          }
        }
      }
    ],
    "parsingErrors": []
  }
}

Queries for this chapter that depend on specific style values should reference this table.

rviscomi · 2019-08-21T18:36:57Z

I've started analyzing these metrics. I'll be saving the results to this sheet. @una @argyleink I'd appreciate if you could follow along with the sheet to make sure that the results align with your intuition/expectations or if there's anything that needs to be scrutinized further. I can let you know when it's complete.

rviscomi · 2019-08-22T15:21:09Z

@una @argyleink

A couple of questions about the metrics:

02.05 Logical properties
- Can a logical property be defined as any property containing {block,inline}-{start,end} and/or exactly{block,inline}-size?
02.42 Number of @keyframes declared per site
- Given the CSS below, would you count this as one @keyframes declaration or two keyframes (from, to)?

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

argyleink · 2019-08-22T15:36:14Z

that animation code hurts to look at, it's like every no no in 1 animation lol

i'd count that as 1. it's one @Keyframe animation with 2 steps

rviscomi · 2019-08-22T16:06:32Z

Thanks! BTW I copied it from the MDN example :) https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

argyleink · 2019-08-22T16:23:41Z

just submitted a wiki patch to fix that code sample you referenced 👍

rviscomi · 2019-08-22T19:55:21Z

Another question:

02.10 Top CSS libraries
02.11 Top reset utilities

For these metrics, do you have a list of libraries/utilities and/or know a way to detect them?

https://www.wappalyzer.com/categories/web-frameworks includes stuff like Bootstrap. Are there any other Wappalyzer detections we could leverage for these?

nucliweb · 2019-08-22T21:13:23Z

CSS Frameworks

You have stateofcss

Reset Utilities

nucliweb · 2019-08-22T21:35:49Z

Here are a couple more resources:

rviscomi · 2019-08-23T04:39:01Z

Thanks @nucliweb!

nucliweb · 2019-08-23T06:17:01Z

By the way, do you know about Project Wallace?
You may have some idea about a new metric (if possible)

Here are the Open Source Tools

nucliweb · 2019-08-23T14:46:56Z

What do you think of adding the APIs of Paint API and Typed OM of CSS Houdini as a metric?

They are two active APIs in Chrome
👉🏼 Is Houdini ready yet‽

It may be interesting to know if there are implementation and its trend

una · 2019-08-23T14:55:31Z

I think that would be really interesting but I would be very surprised if there is any use in production considering chrome is the only browser to support.

…

On Fri, Aug 23, 2019 at 10:46 AM Joan León ***@***.***> wrote: What do you think of adding the APIs of Paint API <https://drafts.css-houdini.org/css-paint-api/> and Typed OM <https://drafts.css-houdini.org/css-typed-om/> of *CSS Houdini* as a metric? They are two active APIs in Chrome 👉🏼 Is Houdini ready yet‽ <https://ishoudinireadyyet.com/> It may be interesting to know if there are implementation and its trend — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#83?email_source=notifications&email_token=AAM5L3HMK53SGNSA5PR2WJTQF7Z6DA5CNFSM4IGHVY7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5ANRSA#issuecomment-524343496>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAM5L3A66BFZPRCMX3M2YDTQF7Z6DANCNFSM4IGHVY7A> .

nucliweb · 2019-08-23T15:06:53Z

I have found an awesome project with CSS Houdini in production 👉🏼Extra.css 🤪

We can add CSS Houdini on Almanac 2020 😊

nucliweb · 2019-08-23T15:13:55Z

Btw, @una, the inspiration to add CSS Houdini as a metric I was have after reading Chrome Image Lazy Loading - Sites Already Using it on Week 1!

rviscomi · 2019-08-23T16:36:37Z

Paint API is used in 7 (!!) stylesheets:

#standardSQL
SELECT
  client, page, url, REGEXP_EXTRACT(body, '(?i)((?:background|border)-image:\\s*paint\\([^;}]+)')
FROM
  `httparchive.almanac.summary_response_bodies`
WHERE
  (firstHtml OR type = 'css') AND
  REGEXP_CONTAINS(body, '(?i)(background|border)-image:\\s*paint\\(')
ORDER BY
  client, page, url

client	page	url	style
desktop	http://uupaa.hatenablog.com/	http://uupaa.hatenablog.com/	background-image: paint(“foo”)
desktop	https://nteract.io/	https://nteract.io/	background-image:paint(ripple)
desktop	https://whydocatsanddogs.com/	https://whydocatsanddogs.com/css/style.css	background-image: paint(roughBox)
desktop	https://www.outdoortoys.co.uk/	https://www.outdoortoys.co.uk/static/version1562932659/frontend/OutdoorToys/default/en_GB/css/styles.min.css	background-image:paint(pattern)
mobile	https://nteract.io/	https://nteract.io/	background-image:paint(ripple)
mobile	https://whydocatsanddogs.com/	https://whydocatsanddogs.com/css/style.css	background-image: paint(roughBox)
mobile	https://www.outdoortoys.co.uk/	https://www.outdoortoys.co.uk/static/version1562932659/frontend/OutdoorToys/default/en_GB/css/styles.min.css	background-image:paint(pattern)

Such small adoption itself might be noteworthy. Especially as a benchmark against future measurements.

Not sure how to detect Typed OM.

nucliweb · 2019-08-24T09:54:44Z

Typed OM

To detecting Typed OM, you can find in Javascript context:

The method attributeStyleMap
Any Numeric Factory (CSS.em, CSS.px, CSS.deg, CSS.number, etc...)

Sample

Sample from Working with the new CSS Typed Object Model

el.attributeStyleMap.set('padding', CSS.px(42));
const padding = el.attributeStyleMap.get('padding');
console.log(padding.value, padding.unit); // 42, 'px'

rviscomi · 2019-08-29T16:26:36Z

Added metrics 02_10 and 02_11 to the results sheet. I was only able to match 3 reset utilities, but Wappalyzer already includes many of the libraries so we're fortunate to have good coverage there.

I wasn't able to write queries for these last two metrics:

02.21 Minified vs unminified
02.25 Average size of images loaded by stylesheets (inline and linked)

@una @argyleink PTAL at the results and LMK if anything jumps out. This should be ready to go for you to start writing.

argyleink · 2019-08-29T22:00:53Z

fascinating information!

rviscomi added the analysis Querying the dataset label Jul 23, 2019

rviscomi added this to the Content written milestone Jul 23, 2019

rviscomi assigned ymschaap and rviscomi Jul 23, 2019

rviscomi mentioned this issue Jul 23, 2019

Assign analysts to chapters #71

Closed

rviscomi unassigned ymschaap Jul 24, 2019

rviscomi mentioned this issue Aug 22, 2019

CSS queries #124

Merged

rviscomi mentioned this issue Aug 29, 2019

CSS queries #128

Merged

rviscomi closed this as completed in #128 Aug 29, 2019

rviscomi mentioned this issue Sep 8, 2019

Write content: Chapter 2. CSS #132

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Query metrics: Chapter 2. CSS #83

Query metrics: Chapter 2. CSS #83

rviscomi commented Jul 23, 2019 •

edited

Loading

rviscomi commented Aug 8, 2019

rviscomi commented Aug 21, 2019 •

edited

Loading

rviscomi commented Aug 22, 2019 •

edited

Loading

argyleink commented Aug 22, 2019

rviscomi commented Aug 22, 2019

argyleink commented Aug 22, 2019

rviscomi commented Aug 22, 2019

nucliweb commented Aug 22, 2019 •

edited

Loading

nucliweb commented Aug 22, 2019

rviscomi commented Aug 23, 2019

nucliweb commented Aug 23, 2019

nucliweb commented Aug 23, 2019

una commented Aug 23, 2019 via email

nucliweb commented Aug 23, 2019

nucliweb commented Aug 23, 2019

rviscomi commented Aug 23, 2019

nucliweb commented Aug 24, 2019

rviscomi commented Aug 29, 2019

argyleink commented Aug 29, 2019

Query metrics: Chapter 2. CSS #83

Query metrics: Chapter 2. CSS #83

Comments

rviscomi commented Jul 23, 2019 • edited Loading

READ ME!

Assignments

Checklist of metrics to be merged

rviscomi commented Aug 8, 2019

rviscomi commented Aug 21, 2019 • edited Loading

rviscomi commented Aug 22, 2019 • edited Loading

argyleink commented Aug 22, 2019

rviscomi commented Aug 22, 2019

argyleink commented Aug 22, 2019

rviscomi commented Aug 22, 2019

nucliweb commented Aug 22, 2019 • edited Loading

CSS Frameworks

Reset Utilities

nucliweb commented Aug 22, 2019

rviscomi commented Aug 23, 2019

nucliweb commented Aug 23, 2019

nucliweb commented Aug 23, 2019

una commented Aug 23, 2019 via email

nucliweb commented Aug 23, 2019

nucliweb commented Aug 23, 2019

rviscomi commented Aug 23, 2019

nucliweb commented Aug 24, 2019

Typed OM

Sample

rviscomi commented Aug 29, 2019

argyleink commented Aug 29, 2019

rviscomi commented Jul 23, 2019 •

edited

Loading

rviscomi commented Aug 21, 2019 •

edited

Loading

rviscomi commented Aug 22, 2019 •

edited

Loading

nucliweb commented Aug 22, 2019 •

edited

Loading