Merge pull request #187 from AllThingsSmitty/feature_update

Add aspect-ratio tip

Author: AllThingsSmitty

README.md

@@ -23,10 +23,11 @@ A collection of tips to help take your CSS skills pro.
 1. [Inherit `box-sizing`](#inherit-box-sizing)
 1. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties)
 1. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation)
-1. [Check If Font Is Installed Locally](#check-if-font-is-installed-locally)
+1. [Check if Font Is Installed Locally](#check-if-font-is-installed-locally)
 1. [Add `line-height` to `body`](#add-line-height-to-body)
 1. [Set `:focus` for Form Elements](#set-focus-for-form-elements)
 1. [Vertically-Center Anything](#vertically-center-anything)
+1. [Use `aspect-ratio` Instead of Height/Width](#use-aspect-ratio-instead-of-heightwidth)
 1. [Comma-Separated Lists](#comma-separated-lists)
 1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child)
 1. [Use SVG for Icons](#use-svg-for-icons)
@@ -66,7 +67,7 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you
 
 #### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL)
 
-**Note:** If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in  your CSS reset.
+⚠️ **Note:** If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in  your CSS reset.
 
 <sup>[back to table of contents](#table-of-contents)</sup>
 
@@ -117,7 +118,7 @@ button {
 }
 ```
 
-**Note:** the `all` and `unset` shorthand isn't supported in IE11.
+⚠️ **Note:** the `all` and `unset` keywords aren't supported in IE11.
 
 <sup>[back to table of contents](#table-of-contents)</sup>
 
@@ -157,7 +158,7 @@ Here, the CSS selector is read as a human would describe it.
 <sup>[back to table of contents](#table-of-contents)</sup>
 
 
-### Check If Font Is Installed Locally
+### Check if Font Is Installed Locally
 
 You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.
 
@@ -249,13 +250,31 @@ body {
 }
 ```
 
-
 Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.
 
-**Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11.
-
 #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ)
 
+⚠️ **Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11.
+
+<sup>[back to table of contents](#table-of-contents)</sup>
+
+
+### Use `aspect-ratio` Instead of Height/Width
+
+The `aspect-radio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift.
+
+```css
+img {
+  aspect-ratio: 16 / 9; /* width / height */
+}
+```
+
+Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio).
+
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/)
+
+⚠️ **Note:** `aspect-ratio` isn't supported in IE11.
+
 <sup>[back to table of contents](#table-of-contents)</sup>
 
 
@@ -271,7 +290,7 @@ ul > li:not(:last-child)::after {
 
 Use the `:not()` pseudo-class and no comma will be added to the last item.
 
-**Note:** This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
+⚠️ **Note:** This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
 
 <sup>[back to table of contents](#table-of-contents)</sup>
 
@@ -418,10 +437,10 @@ a[href^="http"]:empty::before {
 
 That's pretty convenient.
 
-**Note:** This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
-
 #### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx)
 
+⚠️ **Note:** This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
+
 <sup>[back to table of contents](#table-of-contents)</sup>
 
 
@@ -448,7 +467,7 @@ nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
 
 #### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)
 
-**Note:** The `:is()` pseudo-class isn't supported in IE11.
+⚠️ **Note:** The `:is()` pseudo-class isn't supported in IE11.
 
 <sup>[back to table of contents](#table-of-contents)</sup>
 
@@ -530,7 +549,7 @@ img::after {
 }
 ```
 
-Learn more about styling for this pattern in [Ire Aderinokun](https://github.com/ireade/)'s [original post](http://bitsofco.de/styling-broken-images/).
+Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).
 
 <sup>[back to table of contents](#table-of-contents)</sup>
 
@@ -661,7 +680,7 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei
 }
 ```
 
-**Note:** Keep in mind that elements with whitespace aren't considered empty, e.g., `<p class="error-message"> </p>`.
+⚠️ **Note:** Keep in mind that elements with whitespace aren't considered empty, e.g., `<p class="error-message"> </p>`.
 
 <sup>[back to table of contents](#table-of-contents)</sup>
 
@@ -675,7 +694,7 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
 
 ## Translations
 
-**Note:** I've had less time available to maintain the growing list of translated tips; adding a new tip requires including it with over a dozen translations. For that reason, translated README files may not include all the tips listed on the main README file.
+⚠️  **Note:** I've had less time available to maintain the growing list of translated tips; adding a new tip requires including it with over a dozen translations. For that reason, translated README files are likely to not include all the tips listed on the main README file.
 
 * [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
 * [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW)