Hello, users! 👋

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: 👇

➀ Disable selecting text of an element

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

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

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

➁ Change the text-selection background color

With the selector ::selection:

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

Remember using good contrast combinations.

➂ Breaking the text in lines without br

With the property white-space and the value pre-wrap or pre-line:

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

➃ Creating space between words

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 word-spacing property.

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

➄ Hiding ugly scrollbars in the browser

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

/* 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;
}

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.

Side note

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

🌼Sources🌼:

About hiding scrollbars
About disabling text selection for the user
About word spacing
About white-space
About text selection background color