Skip to content

Commit 6496552

Browse files
Merge pull request #187 from AllThingsSmitty/feature_update
Add aspect-ratio tip
2 parents 5d7041d + 3eebdd0 commit 6496552

File tree

1 file changed

+33
-14
lines changed

1 file changed

+33
-14
lines changed

README.md

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ A collection of tips to help take your CSS skills pro.
2323
1. [Inherit `box-sizing`](#inherit-box-sizing)
2424
1. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties)
2525
1. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation)
26-
1. [Check If Font Is Installed Locally](#check-if-font-is-installed-locally)
26+
1. [Check if Font Is Installed Locally](#check-if-font-is-installed-locally)
2727
1. [Add `line-height` to `body`](#add-line-height-to-body)
2828
1. [Set `:focus` for Form Elements](#set-focus-for-form-elements)
2929
1. [Vertically-Center Anything](#vertically-center-anything)
30+
1. [Use `aspect-ratio` Instead of Height/Width](#use-aspect-ratio-instead-of-heightwidth)
3031
1. [Comma-Separated Lists](#comma-separated-lists)
3132
1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child)
3233
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
6667

6768
#### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL)
6869

69-
**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.
70+
⚠️ **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.
7071

7172
<sup>[back to table of contents](#table-of-contents)</sup>
7273

@@ -117,7 +118,7 @@ button {
117118
}
118119
```
119120

120-
**Note:** the `all` and `unset` shorthand isn't supported in IE11.
121+
⚠️ **Note:** the `all` and `unset` keywords aren't supported in IE11.
121122

122123
<sup>[back to table of contents](#table-of-contents)</sup>
123124

@@ -157,7 +158,7 @@ Here, the CSS selector is read as a human would describe it.
157158
<sup>[back to table of contents](#table-of-contents)</sup>
158159

159160

160-
### Check If Font Is Installed Locally
161+
### Check if Font Is Installed Locally
161162

162163
You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.
163164

@@ -249,13 +250,31 @@ body {
249250
}
250251
```
251252

252-
253253
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.
254254

255-
**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.
256-
257255
#### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ)
258256

257+
⚠️ **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.
258+
259+
<sup>[back to table of contents](#table-of-contents)</sup>
260+
261+
262+
### Use `aspect-ratio` Instead of Height/Width
263+
264+
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.
265+
266+
```css
267+
img {
268+
aspect-ratio: 16 / 9; /* width / height */
269+
}
270+
```
271+
272+
Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio).
273+
274+
#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/)
275+
276+
⚠️ **Note:** `aspect-ratio` isn't supported in IE11.
277+
259278
<sup>[back to table of contents](#table-of-contents)</sup>
260279

261280

@@ -271,7 +290,7 @@ ul > li:not(:last-child)::after {
271290

272291
Use the `:not()` pseudo-class and no comma will be added to the last item.
273292

274-
**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.
293+
⚠️ **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.
275294

276295
<sup>[back to table of contents](#table-of-contents)</sup>
277296

@@ -418,10 +437,10 @@ a[href^="http"]:empty::before {
418437

419438
That's pretty convenient.
420439

421-
**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.
422-
423440
#### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx)
424441

442+
⚠️ **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.
443+
425444
<sup>[back to table of contents](#table-of-contents)</sup>
426445

427446

@@ -448,7 +467,7 @@ nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
448467

449468
#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)
450469

451-
**Note:** The `:is()` pseudo-class isn't supported in IE11.
470+
⚠️ **Note:** The `:is()` pseudo-class isn't supported in IE11.
452471

453472
<sup>[back to table of contents](#table-of-contents)</sup>
454473

@@ -530,7 +549,7 @@ img::after {
530549
}
531550
```
532551

533-
Learn more about styling for this pattern in [Ire Aderinokun](https://github.com/ireade/)'s [original post](http://bitsofco.de/styling-broken-images/).
552+
Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).
534553

535554
<sup>[back to table of contents](#table-of-contents)</sup>
536555

@@ -661,7 +680,7 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei
661680
}
662681
```
663682

664-
**Note:** Keep in mind that elements with whitespace aren't considered empty, e.g., `<p class="error-message"> </p>`.
683+
⚠️ **Note:** Keep in mind that elements with whitespace aren't considered empty, e.g., `<p class="error-message"> </p>`.
665684

666685
<sup>[back to table of contents](#table-of-contents)</sup>
667686

@@ -675,7 +694,7 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
675694

676695
## Translations
677696

678-
**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.
697+
⚠️ **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.
679698

680699
* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
681700
* [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW)

0 commit comments

Comments
 (0)