From 29a06401fc90b8f3854323aaae8535dd90b73ebd Mon Sep 17 00:00:00 2001 From: Damon Bolesta Date: Fri, 29 Sep 2023 10:57:47 -0400 Subject: [PATCH 1/3] removes unused reference definiton --- docs/checks/img_width_and_height.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/checks/img_width_and_height.md b/docs/checks/img_width_and_height.md index fb4be633..c5d43bfa 100644 --- a/docs/checks/img_width_and_height.md +++ b/docs/checks/img_width_and_height.md @@ -74,6 +74,5 @@ This check has been introduced in Theme Check 0.6.0. [cls]: https://web.dev/cls/ [codepenshift]: https://codepen.io/charlespwd/pen/YzpxPEp?editors=1100 [codepenlazy]: https://codepen.io/charlespwd/pen/abZmqXJ?editors=0111 -[aspect-ratio]: https://caniuse.com/mdn-css_properties_aspect-ratio [codesource]: /lib/theme_check/checks/img_aspect_ratio.rb [docsource]: /docs/checks/img_aspect_ratio.md From 377fe4e4b441d71b6f0fb5c9dc82187c68f89bbf Mon Sep 17 00:00:00 2001 From: Damon Bolesta Date: Fri, 29 Sep 2023 11:10:31 -0400 Subject: [PATCH 2/3] adds reference for padding aspect ratio hack --- docs/checks/img_width_and_height.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/checks/img_width_and_height.md b/docs/checks/img_width_and_height.md index c5d43bfa..499426ff 100644 --- a/docs/checks/img_width_and_height.md +++ b/docs/checks/img_width_and_height.md @@ -52,7 +52,7 @@ ImgWidthAndHeight: There are some cases where you can avoid content-layout shift without needing the width and height attributes: -- When the aspect-ratio of the displayed image should be independent of the uploaded image. In those cases, the solution is still the padding-top hack with an `overflow: hidden container`. +- When the aspect-ratio of the displayed image should be independent of the uploaded image. In those cases, the solution is still the [padding-top hack][csstricks-ratio] with an `overflow: hidden container`. - When you are happy with the padding-top hack. In those cases, it is fine to disable this check with the comment. @@ -68,11 +68,13 @@ This check has been introduced in Theme Check 0.6.0. - [Cumulative Layout Shift Reference][cls] - [Codepen illustrating the impact of width and height on layout shift][codepenshift] - [Codepen illustrating the impact of width and height on lazy loading][codepenlazy] +- [Article detailing how padding can be used to "hack" aspect ratios][csstricks-ratio] - [Rule Source][codesource] - [Documentation Source][docsource] [cls]: https://web.dev/cls/ [codepenshift]: https://codepen.io/charlespwd/pen/YzpxPEp?editors=1100 [codepenlazy]: https://codepen.io/charlespwd/pen/abZmqXJ?editors=0111 +[csstricks-ratio]: https://css-tricks.com/aspect-ratio-boxes/ [codesource]: /lib/theme_check/checks/img_aspect_ratio.rb [docsource]: /docs/checks/img_aspect_ratio.md From de38cba8b5d6e7bd92d5ef312957f767db76a7fa Mon Sep 17 00:00:00 2001 From: Damon Bolesta Date: Fri, 29 Sep 2023 11:15:18 -0400 Subject: [PATCH 3/3] moves word outside of backticks --- docs/checks/img_width_and_height.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/checks/img_width_and_height.md b/docs/checks/img_width_and_height.md index 499426ff..044205d1 100644 --- a/docs/checks/img_width_and_height.md +++ b/docs/checks/img_width_and_height.md @@ -52,7 +52,7 @@ ImgWidthAndHeight: There are some cases where you can avoid content-layout shift without needing the width and height attributes: -- When the aspect-ratio of the displayed image should be independent of the uploaded image. In those cases, the solution is still the [padding-top hack][csstricks-ratio] with an `overflow: hidden container`. +- When the aspect-ratio of the displayed image should be independent of the uploaded image. In those cases, the solution is still the [padding-top hack][csstricks-ratio] with an `overflow: hidden` container. - When you are happy with the padding-top hack. In those cases, it is fine to disable this check with the comment.