diff --git a/CODE-OF-CONDUCT.md b/CODE-OF-CONDUCT.md
index 1dca52b9..456fae5b 100644
--- a/CODE-OF-CONDUCT.md
+++ b/CODE-OF-CONDUCT.md
@@ -19,6 +19,6 @@ By adopting this Code of Conduct, project maintainers commit themselves to fairl
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting a project maintainer at mjsmithme@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project maintainer at mjsmithme@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident.
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.3.0, available at [http://contributor-covenant.org/version/1/3/0/](http://contributor-covenant.org/version/1/3/0/).
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e8c51f8e..7e011f42 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,43 +2,32 @@
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)
-
## Adding to This List
Please ensure your pull request adheres to the following guidelines:
-* Search open and closed PR's to avoid duplicate suggestions.
-* Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful.
-* Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents.
-* Use [title-casing](http://titlecapitalization.com).
-* Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including:
- * Indent with two spaces
- * Use shorthand, e.g., `margin: 10px 10px 5px;`
- * Use double quotes, e.g., `background: url("logo.svg");`
- * Sort properties alphabetically
-* Make sure your text editor is set to remove trailing whitespace.
-* Check your spelling and grammar.
-* The PR should have a useful title.
+- Search open and closed PRs to avoid duplicate suggestions.
+- Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful.
+- Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents.
+- Use [title-case](https://titlecaseconverter.com/).
+- Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including:
+ - Indent with two spaces
+ - Use shorthand, e.g., `margin: 10px 10px 0.5rem;`
+ - Use double quotes, e.g., `background: url("logo.svg");`
+ - Use leading zeros with numberic values, e.g., `padding: 0.75rem;`
+ - Sort properties alphabetically
+ - **Avoid letting your code formatter format other section of the README file.**
+- Make sure your text editor is set to remove trailing whitespace.
+- Check your spelling and grammar.
+- The PR should have a useful title.
Thank you for your suggestions!
-
-### Language Translations
-
-If you fluently speak another language and want to contribute by translating this list into that language, please submit a PR using the following guidelines:
-
-* Add a new folder to the `translations` folder
-* The new folder should be labeled the language culture name, e.g, `es-ES`, `ru-RU`, `zh-CN`, etc.
-
-Additionally, feel free to review already translated content for accuracy.
-
-
## Updating Your Pull Request
-Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidlines guidelines. [This write-up](https://github.com/RichardLitt/docs/blob/master/amending-a-commit-guide.md) covers the different ways you can change a pull request.
\ No newline at end of file
+Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request.
diff --git a/README.md b/README.md
index f366d304..514038b3 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,122 @@
-
-
-
+
+
+
-# CSS Protips [](https://github.com/sindresorhus/awesome)
+# CSS Protips [](https://awesome.re)
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/).
+## Contents
-## Table of Contents
-
-* [Protips](#protips)
-* [Support](#support)
-* [Translations](#translations)
-* [Contribution Guidelines](CONTRIBUTING.md)
-
+- [Protips](#protips)
+- [Support](#support)
+- [Translations](#translations)
+- [Contribution Guidelines](CONTRIBUTING.md)
## Protips
+1. [Use a CSS Reset](#use-a-css-reset)
+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. [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)
1. [Use the "Lobotomized Owl" Selector](#use-the-lobotomized-owl-selector)
1. [Use `max-height` for Pure CSS Sliders](#use-max-height-for-pure-css-sliders)
-1. [Inherit `box-sizing`](#inherit-box-sizing)
-1. [Equal Width Table Cells](#equal-width-table-cells)
+1. [Equal-Width Table Cells](#equal-width-table-cells)
1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)
1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)
+1. [Control Specificity Better With `:is()`](#control-specificity-better-with-is)
1. [Style "Default" Links](#style-default-links)
-1. [Consistent Vertical Rhythm](#consistent-vertical-rhythm)
1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes)
1. [Style Broken Images](#style-broken-images)
1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing)
1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted)
1. [Use `:root` for Flexible Type](#use-root-for-flexible-type)
1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience)
+1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
+1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
+1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
+1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin)
+
+### Use a CSS Reset
+
+CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, or you can use a more simplified reset approach:
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+```
+
+Now elements will be stripped of margins and padding, and `box-sizing` lets you manage layouts with the CSS box model.
+
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL)
+
+> [!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.
+
+[Back to top](#contents)
+
+### Inherit `box-sizing`
+
+Let `box-sizing` be inherited from `html`:
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+```
+
+This makes it easier to change `box-sizing` in plugins or other components that leverage other behavior.
+
+#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
+
+[Back to top](#contents)
+
+### Use `unset` Instead of Resetting All Properties
+
+When resetting an element's properties, it's not necessary to reset each individual property:
+
+```css
+button {
+ background: none;
+ border: none;
+ color: inherit;
+ font: inherit;
+ outline: none;
+ padding: 0;
+}
+```
+
+You can specify all of an element's properties using the `all` shorthand. Setting the value to `unset` changes an element's properties to their initial values:
+
+```css
+button {
+ all: unset;
+}
+```
+
+[Back to top](#contents)
### Use `:not()` to Apply/Unapply Borders on Navigation
@@ -69,10 +146,32 @@ Instead of putting on the border...
}
```
-Sure, you can use `.nav li + li` or even `.nav li:first-child ~ li`, but with `:not()` the intent is very clear and the CSS selector defines the border the way a human would describe it.
+Here, the CSS selector is read as a human would describe it.
+
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO)
+
+[Back to top](#contents)
+
+### 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.
+
+```css
+@font-face {
+ font-family: "Dank Mono";
+ src:
+ /* Full name */ local("Dank Mono"), /* Postscript name */ local("Dank Mono"),
+ /* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff");
+}
+
+code {
+ font-family: "Dank Mono", system-ui-monospace;
+}
+```
-[back to table of contents](#table-of-contents)
+H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR).
+[Back to top](#contents)
### Add `line-height` to `body`
@@ -86,34 +185,80 @@ body {
This way textual elements can inherit from `body` easily.
-[back to table of contents](#table-of-contents)
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd)
+
+[Back to top](#contents)
+
+### Set `:focus` for Form Elements
+
+Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent than a browser's default implementation:
+
+```css
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+ box-shadow: none;
+ outline: #000 dotted 2px;
+ outline-offset: 0.05em;
+}
+```
+
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)
+[Back to top](#contents)
### Vertically-Center Anything
-No, it's not black magic, you really can center elements vertically:
+No, it's not black magic, you really can center elements vertically. You can do this with flexbox...
```css
-html, body {
+html,
+body {
height: 100%;
- margin: 0;
}
body {
- -webkit-align-items: center;
- -ms-flex-align: center;
align-items: center;
- display: -webkit-flex;
display: flex;
+ justify-content: center;
+}
+```
+
+...and also with CSS Grid:
+
+```css
+body {
+ display: grid;
+ height: 100vh;
+ place-items: center;
}
```
-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.
+> [!TIP]
+> 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.
+
+#### [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.
+[Back to top](#contents)
-[back to table of contents](#table-of-contents)
+### Use `aspect-ratio` Instead of Height/Width
+The `aspect-ratio` 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. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes.
+
+```css
+img {
+ aspect-ratio: 16 / 9; /* width / height */
+ object-fit: cover;
+}
+```
+
+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/)
+
+[Back to top](#contents)
### Comma-Separated Lists
@@ -125,12 +270,12 @@ ul > li:not(:last-child)::after {
}
```
-Use the `:not()` pseudo-class so no comma is added to the last item.
+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.
-
-[back to table of contents](#table-of-contents)
+> [!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.
+[Back to top](#contents)
### Select Items Using Negative `nth-child`
@@ -142,7 +287,7 @@ li {
}
/* select items 1 through 3 and display them */
-li:nth-child(-n+3) {
+li:nth-child(-n + 3) {
display: block;
}
```
@@ -150,16 +295,15 @@ li:nth-child(-n+3) {
Or, since you've already learned a little about [using `:not()`](#use-not-to-applyunapply-borders-on-navigation), try:
```css
-/* select items 1 through 3 and display them */
-li:not(:nth-child(-n+3)) {
- display: none;
+/* select all items except the first 3 and display them */
+li:not(:nth-child(-n + 3)) {
+ display: block;
}
```
-Well that was pretty easy.
-
-[back to table of contents](#table-of-contents)
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/WxjKZp)
+[Back to top](#contents)
### Use SVG for Icons
@@ -171,18 +315,18 @@ There's no reason not to use SVG for icons:
}
```
-SVG scales well for all resolution types and is supported in all browsers [back to IE9](http://caniuse.com/#search=svg). So ditch your .png, .jpg, or .gif-jif-whatev files.
+SVG scales well for all resolution types and is supported in all browsers [back to IE9](http://caniuse.com/#search=svg). Ditch your .png, .jpg, or .gif-jif-whatev files.
-**Note:** If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:
+> [!NOTE]
+> If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:
```css
-.no-svg .icon-only:after {
+.no-svg .icon-only::after {
content: attr(aria-label);
}
```
-[back to table of contents](#table-of-contents)
-
+[Back to top](#contents)
### Use the "Lobotomized Owl" Selector
@@ -196,10 +340,12 @@ It may have a strange name but using the universal selector (`*`) with the adjac
In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`.
-For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*.
+> [!TIP]
+> For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on _A List Apart_.
-[back to table of contents](#table-of-contents)
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq)
+[Back to top](#contents)
### Use `max-height` for Pure CSS Sliders
@@ -220,31 +366,11 @@ 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.
-[back to table of contents](#table-of-contents)
-
-
-### Inherit `box-sizing`
-
-Let `box-sizing` be inherited from `html`:
-
-```css
-html {
- box-sizing: border-box;
-}
-
-*, *:before, *:after {
- box-sizing: inherit;
-}
-```
-
-This makes it easier to change `box-sizing` in plugins or other components that leverage other behavior.
-
-[back to table of contents](#table-of-contents)
-
+[Back to top](#contents)
-### Equal Width Table Cells
+### Equal-Width Table Cells
-Tables can be a pain to work with so try using `table-layout: fixed` to keep cells at equal width:
+Tables can be a pain to work with. Try using `table-layout: fixed` to keep cells at equal width:
```css
.calendar {
@@ -254,8 +380,9 @@ Tables can be a pain to work with so try using `table-layout: fixed` to keep cel
Pain-free table layouts.
-[back to table of contents](#table-of-contents)
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm)
+[Back to top](#contents)
### Get Rid of Margin Hacks With Flexbox
@@ -274,8 +401,7 @@ When working with column gutters you can get rid of `nth-`, `first-`, and `last-
Now column gutters always appear evenly-spaced.
-[back to table of contents](#table-of-contents)
-
+[Back to top](#contents)
### Use Attribute Selectors with Empty Links
@@ -287,41 +413,74 @@ a[href^="http"]:empty::before {
}
```
-That's pretty convenient.
+That's really convenient.
-[back to table of contents](#table-of-contents)
+#### [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.
-### Style "Default" Links
+[Back to top](#contents)
-Add a style for "default" links:
+### Control Specificity Better with `:is()`
+
+The `:is()` pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form.
```css
-a[href]:not([class]) {
- color: #008000;
- text-decoration: underline;
+:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
+ color: green;
}
```
-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.
+The above ruleset is equivalent to the following number selector rules...
-[back to table of contents](#table-of-contents)
+```css
+section h1,
+section h2,
+section h3,
+section h4,
+section h5,
+section h6,
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6,
+aside h1,
+aside h2,
+aside h3,
+aside h4,
+aside h5,
+aside h6,
+nav h1,
+nav h2,
+nav h3,
+nav h4,
+nav h5,
+nav h6 {
+ color: green;
+}
+```
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)
-### Consistent Vertical Rhythm
+[Back to top](#contents)
+
+### Style "Default" Links
-Use a universal selector (`*`) within an element to create a consistent vertical rhythm:
+Add a style for "default" links:
```css
-.intro > * {
- margin-bottom: 1.25rem;
+a[href]:not([class]) {
+ color: #008000;
+ text-decoration: underline;
}
```
-Consistent vertical rhythm provides a visual aesthetic that makes content far more readable.
-
-[back to table of contents](#table-of-contents)
+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.
+[Back to top](#contents)
### Intrinsic Ratio Boxes
@@ -346,8 +505,9 @@ To create a box with an intrinsic ratio, all you need to do is apply top or bott
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).
-[back to table of contents](#table-of-contents)
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALZvE)
+[Back to top](#contents)
### Style Broken Images
@@ -356,7 +516,7 @@ Make broken images more aesthetically-pleasing with a little bit of CSS:
```css
img {
display: block;
- font-family: Helvetica, Arial, sans-serif;
+ font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
@@ -369,27 +529,27 @@ img {
Now add pseudo-elements rules to display a user message and URL reference of the broken image:
```css
-img:before {
+img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
-img:after {
+img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
```
-Learn more about styling for this pattern in [Ire Aderinokun](https://github.com/ireade/)'s [original post](http://bitsofco.de/styling-broken-images/).
-
-[back to table of contents](#table-of-contents)
+> [!TIP]
+> Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/).
+[Back to top](#contents)
### Use `rem` for Global Sizing; Use `em` for Local Sizing
-After setting the base font size at the root (`html { font-size: 16px; }`), set the font size for textual elements to `em`:
+After setting the base font size at the root (`html { font-size: 100%; }`), set the font size for textual elements to `em`:
```css
h2 {
@@ -409,14 +569,13 @@ article {
}
aside .module {
- font-size: .9rem;
+ font-size: 0.9rem;
}
```
Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.
-[back to table of contents](#table-of-contents)
-
+[Back to top](#contents)
### Hide Autoplay Videos That Aren't Muted
@@ -430,8 +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.
-[back to table of contents](#table-of-contents)
-
+[Back to top](#contents)
### Use `:root` for Flexible Type
@@ -439,7 +597,7 @@ The type font size in a responsive layout should be able to adjust with each vie
```css
:root {
- font-size: calc(1vw + 1vh + .5vmin);
+ font-size: calc(1vw + 1vh + 0.5vmin);
}
```
@@ -447,12 +605,13 @@ Now you can utilize the `root em` unit based on the value calculated by `:root`:
```css
body {
- font: 1em/1.6 sans-serif;
+ font: 1rem/1.6 sans-serif;
}
```
-[back to table of contents](#table-of-contents)
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR)
+[Back to top](#contents)
### Set `font-size` on Form Elements for a Better Mobile Experience
@@ -467,20 +626,97 @@ textarea {
}
```
-:dancer:
+[Back to top](#contents)
+
+### Use Pointer Events to Control Mouse Events
+
+[Pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) allow you to specify how the mouse interacts with the element it's touching. To disable the default pointer event on a button, for instance:
+
+```css
+button:disabled {
+ opacity: 0.5;
+ pointer-events: none;
+}
+```
+
+It's that simple.
+
+[Back to top](#contents)
+
+### Set `display: none` on Line Breaks Used as Spacing
+
+As [Harry Roberts pointed out](https://twitter.com/csswizardry/status/1170835532584235008), this can help prevent CMS users from using extra line breaks for spacing:
+
+```css
+br + br {
+ display: none;
+}
+```
+
+[Back to top](#contents)
-[back to table of contents](#table-of-contents)
+### Use `:empty` to Hide Empty HTML Elements
+If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., ``) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout.
+
+```css
+:empty {
+ display: none;
+}
+```
+
+> [!NOTE]
+> Keep in mind that elements with whitespace aren't considered empty, e.g., `
`.
+
+[Back to top](#contents)
## Support
-Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
+Current versions of Chrome, Firefox, Safari, and Edge.
+
+[Back to top](#contents)
+
+### Use `margin-inline` instead of `margin`
+
+`margin-inline` defines the inline start and end margins of an element. So instead of using `margin-left` and `margin-right` we can use the inline property to define both.
+
+```css
+.div {
+ margin-inline: auto;
+}
+```
+
+The same can be done for `margin-block` with defines the block start and end margins, i.e., `margin-top` and `margin-bottom`.
+
+```css
+.div {
+ margin-block: auto;
+}
+```
+
+#### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB)
+[Back to top](#contents)
## Translations
-* [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)
-* [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)
-* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
-* [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
-* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
+> [!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)
+- [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE)
+- [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)
+- [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)
+- [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR)
+- [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND)
+- [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT)
+- [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP)
+- [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR)
+- [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL)
+- [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
+- [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT)
+- [Русский](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)
+
+[Back to top](#contents)
diff --git a/media/logo.svg b/assets/img/bulb.svg
similarity index 98%
rename from media/logo.svg
rename to assets/img/bulb.svg
index 5ac5732e..7ea82da2 100644
--- a/media/logo.svg
+++ b/assets/img/bulb.svg
@@ -1,7 +1,7 @@
-
+