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
Top comments (41)
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.
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;
}
I prefer page up/down, home and end buttons for navigating a site. Quick and convenient than scrollbar.
Same!
I always use Up/Down buttons when reaching the ends specially if there is a lot of content.
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!
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.
These are some awesome, I had no idea about disabling the text selection. I'm wondering if hiding a scrollbar is an accessibility issue?
Same wonder about the disable of the text selection. It can be considered as a serious ux problem imho 🤔
Disabling text selection is useful for buttons. It's annoying to select text when trying to click.
Thought exactly the same. I hate double clicking and suddenly the whole page is selected...
Thank you for the clarification
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).
Ok, I get it, It all depend on the use case
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.
Is it possible to cancel scrollbar hiding on mouseover it? I think that would be a solution for Dmitrii Kartashev.
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.
Plese explain about selecting text and adding space between words. Why would it matter?
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.
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.
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 🤷
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... 🤔
🏳️
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!!!
Glad it can help! 🙌
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.
For Firefox your example of scrollbar styling is missing:
scrollbar-color: color1 color2You mean there's been a
word-spacingproperty this whole time?! 😭Right?!
Wow, is simple amazing. Thanks for this tips ☺️
Hope they're useful!
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…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.
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!
/* Remove Scrollbar Firefox Fix */
html {
overflow: auto;
scrollbar-width: none;
}
Cool! pre-wrap is awesome I didn't know that
I also was clueless about these properties. Pretty much concise explanation, thanks for it. Looking forward for further updates. 😊
Thank you, glad to help!
I add another one:
Some comments have been hidden by the post's author - find out more