7 ms·
> Don't use custom CSS scrollbars Alright, I guess I'll go back to using js scrollbars instead /s I hate articles like this because they present highly opinio
by preommr 3y ago
> Don't use custom CSS scrollbars
Alright, I guess I'll go back to using js scrollbars instead /s
I hate articles like this because they present highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about.
Web apps can be incredibly powerful and convenient, sometimes a scrollbar is in the middle of the page like with that codepen. In those situations, being able to style and control the width of the scrollbar is useful.
How about we hold developers accountable for their work instead of trying to ruin it for the rest of us because a minority do something badly.
- abhibeckert 3y ago> being able to style and control the width of the scrollbar is useful No it's not. I have operating system wide settings for how scroll bars should work and the rules are complex with visibility and size of the scroll bar changing from one second to the next. I expect my scroll bar settings to apply to all websites and they are significantly better than what codepen does. Codepen also doesn't allow me to scroll past the beginning/end of the file, which feels jarring and just wrong with a touch scroll device. And I'd bet it also falls apart with assistive technology for people who can't physically operate a mouse or trackpad, which in most countries is illegal. Why open yourself up to those issues?
- fbrchps 3y ago> highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about Most users either don't have such strong opinions about their scroll bars, or would prefer it looks coherent with the application, or OS-native (your preference). But I can almost guarantee the larger group of non-technical users will have never thought about the styling of their scrollbars for more than a few seconds. Also in terms of accessibility, so long as they're doing CSS-only changes, and the bar is sized compliant and has proper focus states, assistive technology won't care.
- pessimizer 3y agoThey won't care as long as it's consistent. The only way for it to be consistent is for people not to touch it.
- ccooffee 3y ago> Also in terms of accessibility, so long as they're doing CSS-only changes, and the bar is sized compliant and has proper focus states, assistive technology won't care. Eh, it depends on your audience. My father has very poor eyesight. He doesn't use any assistive tools (e.g. screen readers or magnifiers), but he does need his computer-reading glasses. Accessibility isn't just ADA compliance and/or screen reader support.
- toastal 3y agoSame argument for why we should use tabs over space when accessibility seems squarely focused on the blind and screen readers when visual impairment is a broad spectrum. My eyesight isn’t ‘bad’, but it isn’t what it used to be and with so many code bases using 2-space indentation, I wonder why this isn’t configurable as I have a lot of difficulty discerning the contrast when it’s so shallow.
- Dalewyn 3y agoConsidering the trend now is to straight up remove scroll bars (why the fuck...), I expect conversations like this will become moot in the not so distant future.
- 3y ago
- MereInterest 3y agoOr to phrase it a different way: Being able to style and control the width of the scrollbar is so incredibly useful that it must be in the hands of users, and not designers.
- jojobas 3y agoWould you extend that to buttons, text fields and all other components in general? I'd say default should be whatever the web designer wanted, if you're not agree you can always use one of the overrider plugins.
- donkeybeer 3y agoYes 100%, apps should follow the theme for components set by the user.
- jojobas 3y agoWell, that's a super minority opinion. Also, websites are not apps.
- donkeybeer 3y agoThe same applies to most websites too
- ryandrake 3y agoI would go even further: websites should not be the ultimate decider on any style-related decision. Including colors, font faces, text size, margins, padding, content width, and any other UI elements. Website should be able to suggest these things, but browsers should default to the user’s preference or the system’s configuration. The user should have the final say on how the User Agent displays HTML content. Browsers have ceded far too much control over these things to websites, to the point where we are even debating whether they should style such fundamental OS controls as scroll bars!
- 3y ago
- afavour 3y ago> Codepen also doesn't allow me to scroll past the beginning/end of the file, which feels jarring and just wrong with a touch scroll device. Stuff like this often happens because of a lack of native styling options. Can’t change the appearance of the scroll bar (for, yes, often dumb reasons)? OK then we’ll use a giant JS library that poorly replicates every aspect of scrolling. At least with native scroll styling, ugly as it may be, you get native behaviours.
- eyelidlessness 3y agoThis doesn’t make any sense. The native behavior is what OP wants. No one needs to recreate the native behavior, it is already available
- The_Colonel 3y agoThe person you're reacting to is making a distinction between a native (in the context of browser) scrollbar with the ability to change its presentational style (but not behavior) and a completely custom JS driven scrollbar with likely different behavior from the native experience.
- eviks 3y agoInteresting setup, do you have a link to it?
- kelnos 3y ago> I hate articles like this because they present highly opinionated solutions as something definite The first paragraph says "I feel this is a mistake". The author is very clearly expressing an opinion, not a fact. They go on to attempt to justify their opinion. I feel like you're railing against something that... isn't really happening here. I will grant you that there are some very narrowly-defined situations where styling a scrollbar is useful and actually gives a better experience. But in general, leave them alone. They are browser chrome, and should not be touched by webpages themselves.
- arp242 3y ago> being able to style and control the width of the scrollbar is useful. Useful for who? I set my scrollbar width fairly wide intentionally so I can actually click on the thing and use it without too much effort. Some developers thing it's "useful" if I'm not able to do that by setting a significantly smaller width, which is not useful at all for me because every single time it makes the experience worse. In some fairness, the fault is also with Firefox and Chrome for not being able to just say "never style scrollbars" like you could with Opera in 2000. Sigh...
- pwdisswordfishc 3y agoFor control-freaks who think they are the second coming of WinAmp and like to micromanage every single aspect of user experience so that it conform to THE BRAND®™.
- nikau 3y agoSure let's just reenable blink and marquee in that case
- jbverschoor 3y agofwiw, I have enabled "always show scrollbars" on macOS, and I frequently use them on my iPhone too. One of the most frustrating thing on the web is capturing any scrolling behavior, or catching conflicting keystrokes (such as cmd-f on some fora).
- jchw 3y agoMy kneejerk response to articles with these sorts of titles is nearly always just, "No thanks." I know "considered harmful" has become a cliche, but I almost miss that format now.
- leokennis 3y agoThere should be simple OS level overrides on CSS. Not a user stylesheets or extensions or hard to find a browser flag, just a preferences window where even my mother could indicate “always show scrollbars in Windows style” or “all text should be at minimum 14 points”.
- tsimionescu 3y agoI don't understand why people keep bringing up the OS in this discussion. The OS doesn't have anythign to do with the look and feel of a web page, it's the browser that decides on a default look. And even for native apps, there is no "OS look and feel" - at least not on Linux or Windows. A Win32 button doesn't look exactly like a XAML button not like an MFC button, and definitely not like a UWP button. A Gnome button doesn't look like an XFce button, nor like a Plasma button. Also, people like it this way! The OS is just a dumb layer that my hardware vendor is forcing on me. I care much more that Word works the same when I switch from a Dell laptop to an Apple one than some OS preference.
- leokennis 3y agoSo to be sure, you’d like your Word on Mac to also have a “close window” button as a square “X” on the top right instead of a red circle on the top left? OS’s are not always 100% internally consistent but every OS vendor is striving towards that. Finally I agree that the OS should not natively style a web page (although as I said I’m in favor of user overrides). A scroll bar is not a web page. It’s an OS level interface element.
- tsimionescu 3y agoWell, probably not, though even that is debatable (think of the game example). Still, I think the window control elements are pretty close to something the OS should fully control. On the other hand, I would expect it to use the Ribbon for interaction, and mostly ignore the MacOS global menu bar, so I can still find things where I'm used to them. Having said all that, scrollbars appear all the time inside other elements of an app, so I don't see why they should be compared to the window close button. If they're smack dab in the middle of my screen, they should look like the rest of the app.
- SPBS 3y ago> I hate articles like this because they present highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about. Whatever the author says about custom scrollbars isn't going to stop CSS-Tricks from styling their scrollbar. The article is perfectly fine because programmers are free to ignore it, and if this article convinces even one programmer to switch from a custom scrollbar to a non-customized scrollbar it's likely they never needed it anyway.
- mfru 3y agoit convinced me, i am going to stop styling the scrollbar in my projects unless the designer throws a tantrum (and i cannot convince them not to)
- theobr 3y agoIn the article, he has a CodePen embedded that would be UNUSABLE if it didn't have decent custom scroll bars. This post is so egregiously bad.
- pmontra 3y agoI beg to disagree. Actually at first, as I'm using my phone, I must say that Codepen mobile UX is great. There are three buttons on top that act as tabs. There are no visible scrollbars on phones, there are no visible scrollbars in Codepen. They either programmed that or conformed to the OS, the result is OK. I switched to desktop mode to get the HTML and result views side by side. I have to horizontally scroll the page but that's to be expected on a narrow screen. There is no visible scrollbar but again, that could be because of the mobile OS. If I were on my laptop with a full screen window I wouldn't mind to have an always visible OS scrollbar at the right of the HTML editor. It's in the middle of the screen but I've got OS scrollbars in the middle of the screen any time I place an editor window to the left of my screen, so what's the problem?
- pmontra 3y agoI don't want to sound to harsh, but my desktop environment and I know how we want our scrollbars to be and why. Web designers from thousands miles away do not. Furthermore having the need to style scrollbars to make a UX work smells of bad UX design. Given a full screen page, is there really no space for the standard OS scrollbar (or my custom one,) which users see all day long every day they use their computer? Is the OS's UX really so bad that must be improved by a web app? It's wasted designer and developer time.
- pyrale 3y ago> Alright, I guess I'll go back to using js scrollbars instead /s That'd be much better if you actually need a different behaviour. Trying to bend the native scrollbar to your will is an exercise in pain.