Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Don't use custom CSS scrollbars

ericwbailey.website

Post reply on HN
Print view View original

221–230 of 250 posts

Re: Don't use custom CSS scrollbars

#221

Post by tsimionescu »

chiefalchemist wrote: post #198
tsimionescu wrote: post #118

Earlier quoted context omitted.

First of all, the OS does not style widgets, the browser does. And scrollbars are completely different in different browsers - they have different sizes, different behavior, different look-and-feels. So either you create versions of your app which match each browser individually, or you re-style the scrollbars to look the same as the rest of the app. Thirdly, there is an obvious counter to your arguments that shows t…

> And scrollbars are completely different in different browsers - they have different sizes, different behavior, different look-and-feels. So either you create versions of your app which match each browser individually, or you re-style the scrollbars to look the same as the rest of the app. Find me a user that sez "This experience sucks...that's the native scrollbar" and I'll give you $100. If you give me $1 for ever…

> p.s. Gaming is a different aesthetic, a different audience, etc. It's not what should be the user-centric internet.

I don't think that games are an entirely different world from web apps. There is some amount of gradation between pure document-like pages at one extreme and games at the other, and a whole spectrum in between (say, an app like Google Earth probably doesn't need regular scroll bars to implement most of its scrolling behavior, while not being a game).

Also, I think users are quite observant of color clashes, and will notice if you have system-styled scroll bars in the middle of a web page that is styled in a specific way. I don't even understand how this is a controversial opinion - especially when we have things like dark mode that was available in numerous apps long before any OS or browser supported it natively - thus requiring the app to re-style all controls.

Re: Don't use custom CSS scrollbars

#222

Post by tsimionescu »

Sophira wrote: post #210
tsimionescu wrote: post #118

Earlier quoted context omitted.

First of all, the OS does not style widgets, the browser does. And scrollbars are completely different in different browsers - they have different sizes, different behavior, different look-and-feels. So either you create versions of your app which match each browser individually, or you re-style the scrollbars to look the same as the rest of the app. Thirdly, there is an obvious counter to your arguments that shows t…

The difference is that games are a deliberate exercise in non-productivity. You are generally not trying to 'get something done' in a game except what the game itself is asking you to do. When using a webpage, you generally are trying to 'get something done'. Besides, games implementing their own widgets can be terrible for accessibility.

The majority of game menus are there to help you get something done. With some exceptions, games are not played inside their menus, and have the same kinds of UX concerns as any regular app.

The main difference between games and many other apps is that games are trying to sell you a fantasy, and look and feel are much more important to keeping you in the right mindset than in some other apps. But there are other apps and even web pages with similar goals which don't quite qualify as games.

Re: Don't use custom CSS scrollbars

#223

Post by tsimionescu »

zelphirkalt wrote: post #185
tsimionescu wrote: post #152

Earlier quoted context omitted.

My point was that a general "no app shall customize scrollbar look and feel" is wrong, as there are certain kinds of apps that do benefit from custom look and feel. Sure, not all games, but also games are not so entirely different from other kinds of apps. Also, I thought the specific points about CSS and how to achieve custom styling if desired are irrelevant. The arguments I was replying to were about UX, not about…

> My point was that a general "no app shall customize scrollbar look and feel" is wrong, as there are certain kinds of apps that do benefit from custom look and feel. Sure, not all games, but also games are not so entirely different from other kinds of apps. But the point is, that your website is not an app. At most it is a web app, and therefore governed by the browser and the user's preferences and choices for the…

I don't see why there should be any distinction between apps and web apps in terms of UX constraints, and I don't think one has ever existed even since the invention of the Web. After all, Flash is older than JS and much of what people loved on the earlier Web was in fact made with Flash. Similarly, many famous Geocities sites were heavily customized to illustrate their creators' preference.

The web is much more than productivity focused software, and limiting it to some specific notion of dull uniformity in the names of consistency is honestly sad.

If I want to create a site to represent a detailed exploration and appreciation of the Voynich manuscript, why should I not try to style similarly to the original manuscript? Why should utility trump aesthetics for nay document on the web?

Re: Don't use custom CSS scrollbars

#224

Post by derefr »

presentation wrote: post #92
derefr wrote: post #65

Earlier quoted context omitted.

That's not so much "styling the scroll bar"; that's "trying to tell the OS widget library's metrics-policy logic its business, because you know better than it does, because it's insufficiently smart." If you think about it, a "smarter" OS widget library would always "float" scrollbars at the edge of the visible part of the viewport that the overflowing surface occupies. No configurability needed — it's just always be…

That's cool and all, but until I have enough influence personally to dictate Microsoft's design, I don't really have a choice but to depend on web APIs to achieve the desired effect.

You can dictate GTK and Qt's design.

Also, I think for Chrome at least, it draws scrollbars using its own widget library — built on top of Skia, I think? Not sure what the widget-library part itself is called. You could definitely contribute to that.

Re: Don't use custom CSS scrollbars

#225

Post by stronglikedan »

karaterobot wrote: post #24

> Scrollbars are part of the area of the browser that is outside your scope of concern. No, they're actually in my scope of concern, that is the whole point of your article. The reason they were brought into my scope of concern is that a lot of people had a use case for styling custom scrollbars. I have a use case for it myself. If you're saying "don't abuse your ability as a developer and make inacessible websites"…

I've never met a styled scrollbar that was better than those native to my OS, and that includes the ones imposed by any app, not just web apps. Even Edge is guilty.

Re: Don't use custom CSS scrollbars

#226

Post by munk-a »

agos wrote: post #162
munk-a wrote: post #29

Earlier quoted context omitted.

> Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? Accessibility. Mention that blind users will be unable to utilize the site without a lot of additional work and you can usually kill it dead. Custom scrollbars are such a niche thing that usually nobody is married to the idea - I've found it quite easy in the past to kill off th…

are blind users impacted by styling scrollbars with css or even hiding/showing them?

I'm not certain. Are you willing to spend a week of your life testing every different screen reader to make sure your site doesn't break one?

Re: Don't use custom CSS scrollbars

#227

Post by JohnFen »

tsimionescu wrote: post #223
zelphirkalt wrote: post #185

Earlier quoted context omitted.

> My point was that a general "no app shall customize scrollbar look and feel" is wrong, as there are certain kinds of apps that do benefit from custom look and feel. Sure, not all games, but also games are not so entirely different from other kinds of apps. But the point is, that your website is not an app. At most it is a web app, and therefore governed by the browser and the user's preferences and choices for the…

I don't see why there should be any distinction between apps and web apps in terms of UX constraints, and I don't think one has ever existed even since the invention of the Web. After all, Flash is older than JS and much of what people loved on the earlier Web was in fact made with Flash. Similarly, many famous Geocities sites were heavily customized to illustrate their creators' preference. The web is much more than…

The real problem, in my opinion, is that too many websites do this sort of thing. Is there a place for it? Sure. But it should be something that is rarely done.

But I'm only talking about websites, not web apps. I don't use web apps, so have no opinion on them.

Re: Don't use custom CSS scrollbars

#228

Post by circuit10 »

madeofpalk wrote: post #19
circuit10 wrote: post #8

Earlier quoted context omitted.

https://user-images.githubusercontent.com/13787163/161954436... Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything? When I was developing that my main goal was to get the UI looking consistent and clean so it would feel good to use, which I think is an underappreciated thing; if your UI doesn’t “feel right” then people won’t enjoy using it no matter how…

Use CSS color-scheme: dark to indicate that system widgets, such as scroll bars, should be dark https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...

That would help, it wouldn’t look quite right though.

What’s the difference between styling a scroll bar and, say, a button in an application like this? If you want everything to look how the user prefers and fit into the OS then you shouldn’t really style anything at all

Re: Don't use custom CSS scrollbars

#229

Post by 5Qn8mNbc2FNCiVV »

munk-a wrote: post #226
agos wrote: post #162

Earlier quoted context omitted.

are blind users impacted by styling scrollbars with css or even hiding/showing them?

I'm not certain. Are you willing to spend a week of your life testing every different screen reader to make sure your site doesn't break one?

No need I can tell you the answer: No they are not affected. Feel free to make your scrollbars blue green with a red border and rounded edges. The content is still as accessible
Post reply on HN