CSS 2022 queries

[rviscomi]

Progress on #2879

Usage

• Distribution of stylesheet sizes
• Distribution of link and style elements per page
• Distribution of rules per sheet and page

Selectors and the cascade

• Most popular classes and IDs
• Distribution of selector specificity
• Usage of !important
• Pseudos
  • Usage of :focus
  • Usage of :focus-visible
  • ❓ Common generated content
  • Usage of :has
• ❓ Attributes
• Usage of @layer

Values and units

• Length
• Percentages
• calc()
• global values (inherit/all/etc)

Custom properties

• Names
• Types
• Properties
• Functions
• Complexity

Colors

• Formats
  • ❓ Color fallback strategies
  • ❓ New formats: hwb(), color(), etc
• ❓ color-scheme
• alpha: hsla(), rgba(), /-delimited alpha param in hsl(), rgb(), and color()
• ❓ names
• ❓ accent-color
• ❓ color-mix()

Gradients and images

• Gradient types
• Formats of images in CSS (gradients, png, svg, etc)
• Number of images in CSS
• Weight of images in CSS
• Pixel size of images in CSS

Layout

• Methods
• Box sizing
• Flexbox
• Grid
  • ❓ subgrid
• Multicol
  • Use of fragmentation properties in multicol break-before, break-after, break-inside

Transitions and animations

• Frequency of transitions and animations
• Properties used
• Durations and timings
• Average animation and transition duration
• Keyframe counts and positions

Visual effects

• Blend and mix modes
• Filters
• Masks and clip paths

Responsive design (media queries)

• Queried features
  • prefers-reduced-motion, prefers-color-scheme, prefers-reduced-data
  • hover / any-hover, pointer / any-pointer
  • forced-colors
• Breakpoints
• Properties changed in queries
• ❓ New media query syntax from level 4 spec
• ❓ Container queries

Feature queries (@supports)

• Number of queries
• Properties queried
• Properties changed in queries
• Vendor prefixes

Internationalization

• Direction
• Logical properties
• Ruby

CSS in JS

• Any CSS/JS
• Houdini

Libraries

• Sass/SCSS

CSS for print

• Pages with print stylesheets
• Usage of fragmentation properties in print stylesheets
• Usage of @page

Meta

• Repetition
• Shorthands and longhands
• Syntax errors
• Mystery properties
• ❓ Polyfill usage

[siakaramalegos]

@rviscomi it looks like you have 70 files, so I'm assuming you're further along than the checkboxes?

[rviscomi]

Yeah that's 70 queries migrated from 2021, updated to 2022, executed, and their results saved to the spreadsheet. The last leg of the work is to format the results, write a summary comment, and generate the charts. The checkboxes only represent the metrics that are 100% done.

[rviscomi]

FYI @rachelandrew most of the queries are now complete (including data+charts) in the results sheet. Still working on the rest, but don't want you to be completely blocked.

[rviscomi]

All but 5 queries are done. This is ready to merge,