Share some easily overlooked CSS properties that no one had told me existed before.

Maybe you, unlike me, already know these properties, so let’s take a look.

Without further ado, let’s get down to business:

1. Disable user selection of an element’s text

Using the attribute user-select and setting its value to None, we can set the text of an element to be unselected by the user.

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

Use this attribute when you do not want the original content of an element to be copied.

2. Change the background color of the selected text

You can change the background color of the selected text using the :: Selection:

::selection {
  color: #ececec;
  background: #222831;
}
Copy the code

When you use this property, take care to use a good color contrast combination.

Wrap the text without using BR

Use the property white-space and set its value to pre-wrap or pre-line:

element { white-space: pre-wrap; /*pre-wrap*/ white-space: pre-line; / * or pre - line * /}Copy the code

4. Set the spacing between words

This might be a little simple for you. But I didn’t know it existed until I searched for it. You can use the word-spacing property to set spacing between words in text.

element { word-spacing: 6px; /* word-spacing increases or decreases the spacing between words */ letter-spacing: 6px; /*or letter-spacing increases or decreases the spacing between characters */}Copy the code
  • Word-spacing increases or decreases the amount of white space between words, known as word spacing

  • Letter-spacing increases or decreases the spacing between characters

5. Hide ugly scroll bars in your browser

I didn’t even know it was possible. To do this, you must prepare different code for different browsers:

/* Hide scrollbar for Chrome, Safari, and Opera */ html::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE and Edge */ html { -ms-overflow-style: none; } -webkit-scrollbar {width: 1px; } ::-webkit-scrollbar-track { border-radius: 0; } // Scrollbar ::-webkit-scrollbar-thumb {border-radius: 0; }Copy the code

If you disable scroll bars, make sure you provide up/down buttons and other convenient navigation options. Note that Firefox discontinues support for scrollbar hiding issues, and the code above seems to be a trick that performs the same functionality as the other code I’ve included.

The position – sticky suction

Explore the position-sticky failure problem

Original excerpt from [front-end Q]