CSS 2021 figures (#2444)

* css figures * Optimised images with calibre/image-actions * figures 3-10 * Optimised images with calibre/image-actions * figures 10-30 * Optimised images with calibre/image-actions * figures 30-50 * Optimised images with calibre/image-actions * all figures * Optimised images with calibre/image-actions * remove figure stubs * smaller color stops img * css lint fixes * fix color contrast * Update css.md Descriptions for the first several figures (I lost count) * Figure descriptions, part 2 Written up through "Images". * Descriptions (and a new figure with TODOs) for Images * Descriptions for Layout and Transitions/Animations * Descriptions for Responsive design and Feature queries * Finished descriptions! * Clarifying edits * Apply suggestions from code review Co-authored-by: Barry Pollard <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Eric A. Meyer <[email protected]> Co-authored-by: Barry Pollard <[email protected]>
HTTPArchive · Nov 10, 2021 · 0ae3d74 · 0ae3d74
1 parent 5df6282
commit 0ae3d74
Show file tree

Hide file tree

Showing 57 changed files with 1,103 additions and 0 deletions.
diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md
diff --git a/src/static/css/page.css b/src/static/css/page.css
@@ -612,6 +612,14 @@ td.numeric {
   text-align: right;
 }
 
+td .numeric-good {
+  color: #38761d;
+}
+
+td .numeric-bad {
+  color: #b60000;
+}
+
 tbody tr:nth-child(even) {
   background-color: #f2f2f280;
 }

diff --git a/src/static/images/2021/css/animation-name-categories.png b/src/static/images/2021/css/animation-name-categories.png
diff --git a/src/static/images/2021/css/border-box-declarations-per-page.png b/src/static/images/2021/css/border-box-declarations-per-page.png
diff --git a/src/static/images/2021/css/css-in-js-libraries.png b/src/static/images/2021/css/css-in-js-libraries.png
diff --git a/src/static/images/2021/css/css-initiated-image-formats.png b/src/static/images/2021/css/css-initiated-image-formats.png
diff --git a/src/static/images/2021/css/custom-property-depth.png b/src/static/images/2021/css/custom-property-depth.png
diff --git a/src/static/images/2021/css/custom-property-names.png b/src/static/images/2021/css/custom-property-names.png
diff --git a/src/static/images/2021/css/custom-property-properties.png b/src/static/images/2021/css/custom-property-properties.png
diff --git a/src/static/images/2021/css/custom-property-usage.png b/src/static/images/2021/css/custom-property-usage.png
diff --git a/src/static/images/2021/css/custom-property-value-types.png b/src/static/images/2021/css/custom-property-value-types.png
diff --git a/src/static/images/2021/css/declaration-repetition.png b/src/static/images/2021/css/declaration-repetition.png
diff --git a/src/static/images/2021/css/distribution-of-transition-delays.png b/src/static/images/2021/css/distribution-of-transition-delays.png
diff --git a/src/static/images/2021/css/distribution-of-transition-durations.png b/src/static/images/2021/css/distribution-of-transition-durations.png
diff --git a/src/static/images/2021/css/flexbox-grid-adoption.png b/src/static/images/2021/css/flexbox-grid-adoption.png
diff --git a/src/static/images/2021/css/global-keyword-adoption.png b/src/static/images/2021/css/global-keyword-adoption.png
diff --git a/src/static/images/2021/css/important-properties-per-page.png b/src/static/images/2021/css/important-properties-per-page.png
diff --git a/src/static/images/2021/css/logical-property-and-value-usage.png b/src/static/images/2021/css/logical-property-and-value-usage.png
diff --git a/src/static/images/2021/css/media-query-features.png b/src/static/images/2021/css/media-query-features.png
diff --git a/src/static/images/2021/css/most-color-stops.png b/src/static/images/2021/css/most-color-stops.png
diff --git a/src/static/images/2021/css/most-common-shorthands-after-longhands.png b/src/static/images/2021/css/most-common-shorthands-after-longhands.png
diff --git a/src/static/images/2021/css/most-popular-attribute-selectors.png b/src/static/images/2021/css/most-popular-attribute-selectors.png
diff --git a/src/static/images/2021/css/most-popular-breakpoints.png b/src/static/images/2021/css/most-popular-breakpoints.png
diff --git a/src/static/images/2021/css/most-popular-class-names.png b/src/static/images/2021/css/most-popular-class-names.png
diff --git a/src/static/images/2021/css/most-popular-color-formats.png b/src/static/images/2021/css/most-popular-color-formats.png
diff --git a/src/static/images/2021/css/most-popular-features-queried.png b/src/static/images/2021/css/most-popular-features-queried.png
diff --git a/src/static/images/2021/css/most-popular-font-relative-units-of-length.png b/src/static/images/2021/css/most-popular-font-relative-units-of-length.png
diff --git a/src/static/images/2021/css/most-popular-id-names.png b/src/static/images/2021/css/most-popular-id-names.png
diff --git a/src/static/images/2021/css/most-popular-length-units.png b/src/static/images/2021/css/most-popular-length-units.png
diff --git a/src/static/images/2021/css/most-popular-longhand-properties-after-shorthands.png b/src/static/images/2021/css/most-popular-longhand-properties-after-shorthands.png
diff --git a/src/static/images/2021/css/most-popular-operators-using-calc.png b/src/static/images/2021/css/most-popular-operators-using-calc.png
diff --git a/src/static/images/2021/css/most-popular-properties-used-in-media-queries.png b/src/static/images/2021/css/most-popular-properties-used-in-media-queries.png
diff --git a/src/static/images/2021/css/most-popular-properties-using-calc.png b/src/static/images/2021/css/most-popular-properties-using-calc.png
diff --git a/src/static/images/2021/css/most-popular-pseudo-classes.png b/src/static/images/2021/css/most-popular-pseudo-classes.png
diff --git a/src/static/images/2021/css/most-popular-sass-function-calls.png b/src/static/images/2021/css/most-popular-sass-function-calls.png
diff --git a/src/static/images/2021/css/most-popular-transition-properties.png b/src/static/images/2021/css/most-popular-transition-properties.png
diff --git a/src/static/images/2021/css/most-popular-units-using-calc.png b/src/static/images/2021/css/most-popular-units-using-calc.png
diff --git a/src/static/images/2021/css/most-popular-unknown-properties.png b/src/static/images/2021/css/most-popular-unknown-properties.png
diff --git a/src/static/images/2021/css/most-popular-unprefixed-gradient-functions.png b/src/static/images/2021/css/most-popular-unprefixed-gradient-functions.png
diff --git a/src/static/images/2021/css/most-popular-unprefixed-pseudo-elements.png b/src/static/images/2021/css/most-popular-unprefixed-pseudo-elements.png
diff --git a/src/static/images/2021/css/number-of-images-loaded.png b/src/static/images/2021/css/number-of-images-loaded.png
diff --git a/src/static/images/2021/css/rules-per-page.png b/src/static/images/2021/css/rules-per-page.png
diff --git a/src/static/images/2021/css/stylesheet-transfer-size.png b/src/static/images/2021/css/stylesheet-transfer-size.png
diff --git a/src/static/images/2021/css/stylesheets-per-page.png b/src/static/images/2021/css/stylesheets-per-page.png
diff --git a/src/static/images/2021/css/timing-functions.png b/src/static/images/2021/css/timing-functions.png
diff --git a/src/static/images/2021/css/top-important-properties.png b/src/static/images/2021/css/top-important-properties.png
diff --git a/src/static/images/2021/css/top-layout-methods.png b/src/static/images/2021/css/top-layout-methods.png
diff --git a/src/static/images/2021/css/total-image-weight.png b/src/static/images/2021/css/total-image-weight.png
diff --git a/src/static/images/2021/css/units-per-calc-occurence.png b/src/static/images/2021/css/units-per-calc-occurence.png
diff --git a/src/static/images/2021/css/usage-of-background-shorthand-vs-longhands.png b/src/static/images/2021/css/usage-of-background-shorthand-vs-longhands.png
diff --git a/src/static/images/2021/css/usage-of-control-flow-statements-in-scss.png b/src/static/images/2021/css/usage-of-control-flow-statements-in-scss.png
diff --git a/src/static/images/2021/css/usage-of-explicit-nesting-in-scss.png b/src/static/images/2021/css/usage-of-explicit-nesting-in-scss.png
diff --git a/src/static/images/2021/css/usage-of-flex-shorthands-vs-longhands.png b/src/static/images/2021/css/usage-of-flex-shorthands-vs-longhands.png
diff --git a/src/static/images/2021/css/usage-of-font-shorthand-vs-longhands.png b/src/static/images/2021/css/usage-of-font-shorthand-vs-longhands.png
diff --git a/src/static/images/2021/css/usage-of-grid-properties.png b/src/static/images/2021/css/usage-of-grid-properties.png
diff --git a/src/static/images/2021/css/usage-of-margin-padding-shorthands-vs-longhands.png b/src/static/images/2021/css/usage-of-margin-padding-shorthands-vs-longhands.png
diff --git a/src/static/images/2021/css/zero-lengths-by-unit.png b/src/static/images/2021/css/zero-lengths-by-unit.png