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
Oldest comments (41)
These are some awesome, I had no idea about disabling the text selection. I'm wondering if hiding a scrollbar is an accessibility issue?
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.
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
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!
You mean there's been a
word-spacing
property this whole time?! 😭Right?!
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.
Thankyou +_______+ ;)
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!
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.
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.
/* Remove Scrollbar Firefox Fix */
html {
overflow: auto;
scrollbar-width: none;
}
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! 🙌
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…Wow, is simple amazing. Thanks for this tips ☺️
Hope they're useful!
For Firefox your example of scrollbar styling is missing:
scrollbar-color: color1 color2
It helped me a lot. Thannks :)
So glad it did!
Some comments have been hidden by the post's author - find out more