You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**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.
70
71
71
72
<sup>[back to table of contents](#table-of-contents)</sup>
72
73
@@ -117,7 +118,7 @@ button {
117
118
}
118
119
```
119
120
120
-
**Note:** the `all` and `unset`shorthand isn't supported in IE11.
121
+
⚠️ **Note:** the `all` and `unset`keywords aren't supported in IE11.
121
122
122
123
<sup>[back to table of contents](#table-of-contents)</sup>
123
124
@@ -157,7 +158,7 @@ Here, the CSS selector is read as a human would describe it.
157
158
<sup>[back to table of contents](#table-of-contents)</sup>
158
159
159
160
160
-
### Check If Font Is Installed Locally
161
+
### Check if Font Is Installed Locally
161
162
162
163
You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.
163
164
@@ -249,13 +250,31 @@ body {
249
250
}
250
251
```
251
252
252
-
253
253
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.
254
254
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.
⚠️ **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).
⚠️ **Note:**`aspect-ratio` isn't supported in IE11.
277
+
259
278
<sup>[back to table of contents](#table-of-contents)</sup>
260
279
261
280
@@ -271,7 +290,7 @@ ul > li:not(:last-child)::after {
271
290
272
291
Use the `:not()` pseudo-class and no comma will be added to the last item.
273
292
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.
275
294
276
295
<sup>[back to table of contents](#table-of-contents)</sup>
**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.
443
+
425
444
<sup>[back to table of contents](#table-of-contents)</sup>
426
445
427
446
@@ -448,7 +467,7 @@ nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
**Note:** The `:is()` pseudo-class isn't supported in IE11.
470
+
⚠️ **Note:** The `:is()` pseudo-class isn't supported in IE11.
452
471
453
472
<sup>[back to table of contents](#table-of-contents)</sup>
454
473
@@ -530,7 +549,7 @@ img::after {
530
549
}
531
550
```
532
551
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/).
534
553
535
554
<sup>[back to table of contents](#table-of-contents)</sup>
536
555
@@ -661,7 +680,7 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei
661
680
}
662
681
```
663
682
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>`.
665
684
666
685
<sup>[back to table of contents](#table-of-contents)</sup>
667
686
@@ -675,7 +694,7 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
675
694
676
695
## Translations
677
696
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.
0 commit comments