DEV Community

Cover image for 👉 5 CSS useful properties I TOTALLY ignored. 🤓
Desiré 👩‍🎓👩‍🏫
Desiré 👩‍🎓👩‍🏫

Posted on • Updated on

👉 5 CSS useful properties I TOTALLY ignored. 🤓

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 */
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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*/
}
Enter fullscreen mode Exit fullscreen mode

➃ 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 */
}
Enter fullscreen mode Exit fullscreen mode

➄ 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;
}

Enter fullscreen mode Exit fullscreen mode

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

Oldest comments (41)

Collapse
 
tfantina profile image
Travis Fantina

These are some awesome, I had no idea about disabling the text selection. I'm wondering if hiding a scrollbar is an accessibility issue?

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

I've read about it, and it mostly depends.

It may be that your whole content is all visible so hiding scrollbar is not a problem. Also, hiding the scrollbar doesn't mean disabling the functionality, so the scroll-navigation of the page will work normally.

Collapse
 
host510 profile image
Mikhail

Is it possible to cancel scrollbar hiding on mouseover it? I think that would be a solution for Dmitrii Kartashev.

Collapse
 
aurelmegn profile image
Aurel

Same wonder about the disable of the text selection. It can be considered as a serious ux problem imho 🤔

Collapse
 
bittnkr profile image
bittnkr

Disabling text selection is useful for buttons. It's annoying to select text when trying to click.

Thread Thread
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Thought exactly the same. I hate double clicking and suddenly the whole page is selected...

Thread Thread
 
aurelmegn profile image
Aurel

Thank you for the clarification

Collapse
 
rightdroid profile image
Toomas Jaska

I can give you an example case where this is a must: kiosk systems where the frontend is web tech. Been doing just that for several years, and disabling text-selection, right clicks, making elements click-through are some of the common used practices.

I understand that kiosks are edge cases in general web dev, but also consider Single Page Applications where the UX is more in line with how we use applications rather than how we use webpages (eg left and right clicks act more like in an OS rather than in browser).

Thread Thread
 
aurelmegn profile image
Aurel

Ok, I get it, It all depend on the use case

Collapse
 
lautarolobo profile image
Lautaro Lobo

Cool! pre-wrap is awesome I didn't know that

Collapse
 
thebuildguy profile image
Tulsi Prasad

I also was clueless about these properties. Pretty much concise explanation, thanks for it. Looking forward for further updates. 😊

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Thank you, glad to help!

Collapse
 
bugsysailor profile image
Bugsy Sailor

You mean there's been a word-spacing property this whole time?! 😭

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Right?!

Collapse
 
ericwbailey profile image
Eric Bailey

In addition to the accessibility concerns raised by Travis about hiding scrollbars, I'd also like to mention that it's probably best not to adjust selected text color. If a user has changed theirs from the operating system default, you're overriding their expressed preference, which isn't great.

If you do adjust the highlight color, make sure it passes Web Content Accessibility Guideline criteria for proper color contrast ratio, as too contrast may make the selection "invisible" to someone with low vision.

It's cool that CSS lets us manipulate this sort of stuff, but it's important to do so responsibly!

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

It's great what you're pointing out, I'm always assuming that someone who changes the default colors of a browser is doing it based on accessibility and contrast-color.

Collapse
 
whomahtab profile image
Mahtab

Thankyou +_______+ ;)

Collapse
 
nitin profile image
Nitin Bisht

Great tips, that user-select is good thou, it prevents from actually copying the content. because pointer-events doesn't. they are for a whole different purpose, now it all makes sense.

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Thought the same, Nitin!

I've been reading lots of blogs/magazines that have the text disabled for copying, I wanted to do the same for my own blog!

Collapse
 
faithfinder profile image
Info Comment hidden by post author - thread only accessible via permalink
Dmitrii Kartashev

I'm always extremely annoyed if a site messes with the scrollbar. For me dragging the scrollbar is one of the fastest ways to get around the page and if the bar is too thin or non-existent it's a big inconvenience.

Collapse
 
tobiastotz profile image
Tobias Totz

I agree that just not displaying the scrollbar isn't the best way from UX/UI view. But there are some other ways to change the scrollbar styling to match your site, for example:

::-webkit-scrollbar {
width: 15px;
}

::-webkit-scrollbar-track {
width: 15px;
background: rgba(0, 0, 0, 0.25);
border-radius: 20px;
}

::-webkit-scrollbar-thumb {
background: rgb(89, 31, 189);
border-radius: 20px;
min-height: 50px;
}

Collapse
 
am_rahuls profile image
Rahul

I prefer page up/down, home and end buttons for navigating a site. Quick and convenient than scrollbar.

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Same!

I always use Up/Down buttons when reaching the ends specially if there is a lot of content.

Collapse
 
cryptoquick profile image
Distributed Hunter Trujillo • Edited

I would also suggest box-sizing, and knowing the difference between the values, and when they're needed. Further, there's value in considering a border-sizing global reset. That said, as with JS, CSS is very fiddly, and there are dozens, if not hundreds, of different ways to achieve a visually similar result.

Collapse
 
jarednewnum profile image
Jared Newnam

/* Remove Scrollbar Firefox Fix */
html {
overflow: auto;
scrollbar-width: none;
}

Collapse
 
stephaniewalter profile image
Stéphanie Walter 🦊🌈

Hooo the user-select trick is going to be really useful on some heavy data tables I have, some users asked to be able to copy past the content so this way I can make sure it will copy paste the content and not the headings, thanks a lot!!!

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Glad it can help! 🙌

Collapse
 
sabberworm profile image
Raphael Schweikert

Another thing most people don’t know about is auto-hyphenation using hyphens: auto. Just make sure the document language is declared correctly and you get nicely-hyphenated text for free…

Collapse
 
gabo_martinez21 profile image
Gabriel Martinez

Wow, is simple amazing. Thanks for this tips ☺️

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Hope they're useful!

Collapse
 
assertnotnull profile image
Patrice Gauthier

For Firefox your example of scrollbar styling is missing:
scrollbar-color: color1 color2

Collapse
 
donghoon759 profile image
Donghoon Song

It helped me a lot. Thannks :)

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

So glad it did!

Some comments have been hidden by the post's author - find out more