DEV Community

Cover image for ๐Ÿ‘‰ 5 CSS useful properties I TOTALLY ignored. ๐Ÿค“

๐Ÿ‘‰ 5 CSS useful properties I TOTALLY ignored. ๐Ÿค“

Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ on April 16, 2020

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 ...
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
 
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
 
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รฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

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รฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

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
 
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รฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ • 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รฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

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รฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

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
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

Glad it can help! ๐Ÿ™Œ

Collapse
 
assertnotnull profile image
Patrice Gauthier

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

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
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

Right?!

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
 
gabo_martinez21 profile image
Gabriel Martinez

Wow, is simple amazing. Thanks for this tips โ˜บ๏ธ

Collapse
 
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

Hope they're useful!

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
 
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
 
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
 
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
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ

So glad it did!

Collapse
 
whomahtab profile image
Mahtab

Thankyou +_______+ ;)

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