Skip to content

Add aspect-ratio tip #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 3, 2024
Merged

Add aspect-ratio tip #187

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 33 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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>


Expand All @@ -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>

Expand Down Expand Up @@ -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>


Expand All @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand All @@ -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)
Expand Down