👉 5 CSS useful properties I TOTALLY ignored. 🤓
Tags: css, design, webdev, beginners
Published: 2020-04-16 13:21:26

<h4>Hello, users! 👋</h4>

Today I'm sharing with you some **CSS properties** I discovered too late and that nobody told me about their existence before.

Maybe you already know them, that was not *my case*.

I'm not making this boring, scroll to check'em: 👇

<h2>➀ Disable selecting text of an element</h2>

With the property <code>user-select</code> and the value <code>none</code>, we'll disable the text selection of a text for the user.

```css
element {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
```

{% codepen https://codepen.io/helleworld_/pen/PoPZrPo %}

Useful when you don't want your original content to be copied.

<h2>➁ Change the text-selection background color</h2>

With the selector <code>::selection</code>:

```css
::selection {
  color: #ececec;
  background: #222831;
}
```

{% codepen https://codepen.io/helleworld_/pen/MWaKMev %}

Remember using good contrast combinations.

<h2>➂ Breaking the text in lines without br</h2>

With the property <code>white-space</code> and the value <code>pre-wrap</code> or <code>pre-line</code>:

```css
element {
  white-space: pre-wrap; /*pre-wrap*/
  white-space: pre-line; /*pre-line*/
}
```

{% codepen https://codepen.io/helleworld_/pen/KKdVjvq %}

<h2>➃ Creating space between words</h2>

This may be a bit obvious to you. It wasn't for me until I searched for it.
You can separate words of a text using the <code>word-spacing</code> property.

```css
element {
  word-spacing: 6px; /* word spacing wow such */
}
```

{% codepen https://codepen.io/helleworld_/pen/LYpGKro %}

<h2>➄ Hiding ugly scrollbars in the browser</h2>

I didn't even know back then that this was a possibility.
You must use different code depending on the browser you're using:

```css
/* Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
html {
  -ms-overflow-style: none;
}

/* Remove Scrollbar Firefox Fix, suggested in the comments */
html {
overflow: auto;
scrollbar-width: none;
}

```

{% codepen https://codepen.io/helleworld_/pen/GRpoVqW %}

If you disable scrollbars make sure to add UP/DOWN buttons and other handy navigation options. Please **note** Firefox stopped giving support to the scrollbar hiding issue, the above code seem to be a trick to perform the same functionality as the others I included.

<h1>Side note</h1>

I guess I'll be updating this post from time to time with other interesting features that I discover.

🌼Sources🌼:

<a href="https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp">About hiding scrollbars</a>
<a href="https://www.arungudelli.com/tutorial/css/disable-text-selection-in-html-using-user-select-css-property/">About disabling text selection for the user</a>
<a href="https://www.w3schools.com/cssref/pr_text_word-spacing.asp">About word spacing</a>
<a href="https://css-tricks.com/almanac/properties/w/whitespace/">About white-space</a>
<a href="https://css-tricks.com/almanac/selectors/s/selection/">About text selection background color</a>