DEV Community

loading...
Cover image for πŸ‘‰ 5 CSS useful properties I TOTALLY ignored. πŸ€“

πŸ‘‰ 5 CSS useful properties I TOTALLY ignored. πŸ€“

helleworld_ profile image DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« ・Updated on ・2 min read

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

Discussion (41)

pic
Editor guide
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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

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
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
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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

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
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

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
ΠœΠΈΡ…Π°ΠΈΠ» ГостищСв

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

Collapse
alexfriedl profile image
Alexander Friedl

From the expectation perspective of your users, from the perspective of usability, readability and ux in general, I would not recommend to hide scrollbars, to disable selecting text and to add space between words.

Collapse
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author • Edited

Plese explain about selecting text and adding space between words. Why would it matter?

Collapse
alexfriedl profile image
Alexander Friedl • Edited

Adding space between words can easily lead to readability issues. One might think some space between words is unique. It is! Unique and not functional. You would need to track eye movements in a labor to learn about this unnecessary kind of distraction and frustration in the long run.

Disabling to select text might be useful for buttons. But why would you disallow your users to copy text as a certain percentage of users might want to share, save,... relevant content. If your user absolutely wants to copy your published content, he will find a way. From a ux perspective this does nothing but lead to frustration, because you influence your users expectations, as you dont offer what he expects.

Thread Thread
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

To the spacing words, sorry I don't get it. Most fonts used online actually are "not good" because they don't have enough space, and this is a way. Also, I've been struggling because some times I can't space words in flashing titles and the words seem condensed when they shouldn't - now I can change that. And it's not at all an issue to readability, actually it can improve it.

To the disabling text, still don't get it. What kind of argument is "if they want to copy your content, they'll find a way"? Who's frustrated because he/she can't copy a text from a button, or text from a post? How exactly you loose sharing content because you can't copy it?

I find your arguments not so heavy in this. I think this is again the 'elitist-ux-phenomenon' above us, where EVERYTHING that means touching SOMETHING in the interfaces -> leads to ux issues.

Well, not really.

Thread Thread
alexfriedl profile image
Alexander Friedl

This is not a battle. You do not have to apologize if you dont get it. I am also not interested in your personal opinion about "most" fonts used online. It is not about offending you, but about my experience as ux designer. Anyways, thanks for sharing some info, which can lead to problems, if you do not have a usability background 🀷

Thread Thread
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

Actually, if you've read the article I'm pretty sure you've also read the UX recommendations I add after every trick, to make sure those without a UX background won't mess up... πŸ€”

Thread Thread
alexfriedl profile image
Alexander Friedl

🏳️

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
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
bugsysailor profile image
Bugsy Sailor

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

Collapse
helleworld_ profile image
Collapse
assertnotnull profile image
Patrice Gauthier

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

Collapse
gabo_martinez21 profile image
Gabriel Martinez

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

Collapse
helleworld_ profile image
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
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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Author

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
jarednewnum profile image
Jared Newnam

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

Collapse
lautarolobo profile image
Lautaro Lobo

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

Collapse
heytulsiprasad 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
Collapse
mkal1375 profile image
Mahdi Kalhor

I add another one:

text-overflow: ellipsis;
Collapse
donghoon759 profile image
Donghoon Song

It helped me a lot. Thannks :)

Collapse
helleworld_ profile image
Collapse
whomahtab profile image
Mahtab

Thankyou +_______+ ;)

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