Skip to content

Minor update #209

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
Mar 18, 2025
Merged

Minor update #209

Show file tree
Hide file tree
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
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Please note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms.

## Table of Contents
## Contents

- [Adding to This List](#adding-to-this-list)
- [Updating Your Pull Request](#updating-your-pull-request)
Expand Down
64 changes: 32 additions & 32 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ A collection of tips to help take your CSS skills pro.
> [!TIP]
> For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/).

## Table of Contents
## Contents

- [Protips](#protips)
- [Support](#support)
Expand Down Expand Up @@ -69,7 +69,7 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you
> [!TIP]
> 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 top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Inherit `box-sizing`

Expand All @@ -91,7 +91,7 @@ This makes it easier to change `box-sizing` in plugins or other components that

#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `unset` Instead of Resetting All Properties

Expand All @@ -116,7 +116,7 @@ button {
}
```

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `:not()` to Apply/Unapply Borders on Navigation

Expand Down Expand Up @@ -150,7 +150,7 @@ Here, the CSS selector is read as a human would describe it.

#### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Check if Font Is Installed Locally

Expand All @@ -171,7 +171,7 @@ code {

H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR).

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Add `line-height` to `body`

Expand All @@ -187,7 +187,7 @@ This way textual elements can inherit from `body` easily.

#### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Set `:focus` for Form Elements

Expand All @@ -207,7 +207,7 @@ textarea:focus {

#### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Vertically-Center Anything

Expand Down Expand Up @@ -241,7 +241,7 @@ body {

#### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `aspect-ratio` Instead of Height/Width

Expand All @@ -258,7 +258,7 @@ Learn more about the `aspect-ratio` property in this [web.dev post](https://web.

#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Comma-Separated Lists

Expand All @@ -275,7 +275,7 @@ 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.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Select Items Using Negative `nth-child`

Expand Down Expand Up @@ -303,7 +303,7 @@ li:not(:nth-child(-n + 3)) {

#### [Demo](https://codepen.io/AllThingsSmitty/pen/WxjKZp)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use SVG for Icons

Expand All @@ -326,7 +326,7 @@ SVG scales well for all resolution types and is supported in all browsers [back
}
```

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use the "Lobotomized Owl" Selector

Expand All @@ -345,7 +345,7 @@ In this example, all elements in the flow of the document that follow other elem

#### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `max-height` for Pure CSS Sliders

Expand All @@ -366,7 +366,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden:

The element expands to the `max-height` value on hover and the slider displays as a result of the overflow.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Equal-Width Table Cells

Expand All @@ -382,7 +382,7 @@ Pain-free table layouts.

#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Get Rid of Margin Hacks With Flexbox

Expand All @@ -401,7 +401,7 @@ When working with column gutters you can get rid of `nth-`, `first-`, and `last-

Now column gutters always appear evenly-spaced.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use Attribute Selectors with Empty Links

Expand All @@ -420,7 +420,7 @@ That's really 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.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Control Specificity Better with `:is()`

Expand Down Expand Up @@ -465,7 +465,7 @@ nav h6 {

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

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Style "Default" Links

Expand All @@ -480,7 +480,7 @@ a[href]:not([class]) {

Now links that are inserted via a CMS, which don't usually have a `class` attribute, will have a distinction without generically affecting the cascade.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Intrinsic Ratio Boxes

Expand All @@ -507,7 +507,7 @@ Using 20% for padding makes the height of the box equal to 20% of its width. No

#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALZvE)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Style Broken Images

Expand Down Expand Up @@ -545,7 +545,7 @@ img::after {
> [!TIP]
> Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `rem` for Global Sizing; Use `em` for Local Sizing

Expand Down Expand Up @@ -575,7 +575,7 @@ aside .module {

Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Hide Autoplay Videos That Aren't Muted

Expand All @@ -589,7 +589,7 @@ video[autoplay]:not([muted]) {

Once again, we're taking advantage of using the [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-class.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `:root` for Flexible Type

Expand All @@ -611,7 +611,7 @@ body {

#### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Set `font-size` on Form Elements for a Better Mobile Experience

Expand All @@ -626,7 +626,7 @@ textarea {
}
```

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use Pointer Events to Control Mouse Events

Expand All @@ -641,7 +641,7 @@ button:disabled {

It's that simple.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Set `display: none` on Line Breaks Used as Spacing

Expand All @@ -653,7 +653,7 @@ br + br {
}
```

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `:empty` to Hide Empty HTML Elements

Expand All @@ -668,13 +668,13 @@ 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>`.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

## Support

Current versions of Chrome, Firefox, Safari, and Edge.

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

### Use `margin-inline` instead of `margin`

Expand All @@ -696,7 +696,7 @@ The same can be done for `margin-block` with defines the block start and end mar

#### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>

## Translations

Expand All @@ -719,4 +719,4 @@ The same can be done for `margin-block` with defines the block start and end mar
- [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
- [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN)

<sup>[Back to top](#table-of-contents)</sup>
<sup>[Back to top](#contents)</sup>