CSS 2022 queries

[rviscomi]

Progress on #2879

Usage

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

Selectors and the cascade

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

Values and units

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

Custom properties

• [x] Names
• [x] Types
• [x] Properties
• [x] Functions
• [x] Complexity

Colors

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

Gradients and images

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

Layout

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

Transitions and animations

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

Visual effects

• [x] Blend and mix modes
• [x] Filters
• [x] Masks and clip paths

Responsive design (media queries)

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

Feature queries (@supports)

• [ ] Number of queries
• [x] Properties queried
• [ ] Properties changed in queries
• [ ] Vendor prefixes

Internationalization

• [x] Direction
• [x] Logical properties
• [x] Ruby

CSS in JS

• [x] Any CSS/JS
• [x] Houdini

Libraries

• [x] Sass/SCSS

CSS for print

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

Meta

• [x] Repetition
• [x] Shorthands and longhands
• [x] Syntax errors
• [x] 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,