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

181–190 of 250 posts

Re: Don't use custom CSS scrollbars

#181

Post by SilverBirch »

I agree with the overall point, but there's some bits here that are a little bit silly

>You might be scoffing at the kilobytes this removal represents, but when it comes to web performance, every little bit counts

Go to Apple.com. Do you think that they value minimizing site size or do they prioritize the design first and then figure out how to make it performant? What this argument is really saying is that you should make the value judgement that performance vs quality should be somewhere towards the performance side, but I think plenty of people would make a different decision. You can argue that the scrollbar is extremely low value and therefore performance should be the priority but then... why are you writing an article about scrollbars?

Re: Don't use custom CSS scrollbars

#182

Post by circuit10 »

Karellen wrote: post #26
circuit10 wrote: post #12

Earlier quoted context omitted.

It’s an Electron app for me so it’s only going to be on Chromium on desktop But if scroll bars can be themed with CSS now, that should still give the browser control over things like whether they take up space or not and the actual scrolling behaviour, right? It would just allow the developer to give some styling hints so it doesn’t look completely disconnected from the rest of the page

But it will look disconnected from every other app on the user's system . Whatever style the user currently has installed on their system, if the scrollbars on your app look the same as all the other scrollbars they ever use, they'll recognise them instantly and know how to use them instantly, with zero additional cognitive load. You users might be using enough of their brain to figure out your app (maybe because the…

I’m not really going for a native OS theme, if I wanted that then I’d probably have to use a native GUI toolkit

Re: Don't use custom CSS scrollbars

#183

Post by denton-scratch »

graycat wrote: post #50

Several billion people understand and make good use of the standard HTML scroll bars. For any change, on the first day, only the programmer understands the new scroll bars. For an Internet user who each month or so goes to dozens, maybe hundreds, of Web sites, all the new scroll bars are something new to learn likely particular to that site. So, for that user, a significant part of the Internet becomes dozens or even…

> Same for standard HTML push buttons, links, check boxes

Interesting that you mention checkboxes. For a long time native checkboxes on Linux (distro?) would come up impossibly tiny if you had a decent-sized screen. They were hard to hit accurately with a mouse, and impossible with a trackpad. That seems to have been cured now, but I don't know when it was fixed.

Re: Don't use custom CSS scrollbars

#185

Post by zelphirkalt »

tsimionescu wrote: post #152
creshal wrote: post #140

Earlier quoted context omitted.

> And scrollbars are completely different in different browsers - they have different sizes, different behavior, different look-and-feels. Yes, and? No matter what it is, it's what the users of said platform are used to. Is there really a benefit to forcing users to re-learn such a critical component? > You wouldn't expect a game to use the system look-and-feel, it rightfully uses a look-and-feel that matches the gam…

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 browser.

A website (or website that is a "web app") should fundamentally be a different degree of commitment than installing an application into the user's system. There is a reason for browser sandboxes and for the browser to have its configuration. The browser itself is the actual app and the user should be in control of that, to govern a at least partially unified UX throughout the websites the user visits.

Re: Don't use custom CSS scrollbars

#187

Post by zelphirkalt »

noduerme wrote: post #172
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…

It's very hard to actually write good UX from scratch, particularly stuff like scrollbars that require all sorts of relative resizing, drag listeners, velocity methods, second and tertiary controls (keyboards, drag-selection of text) and often need to handle those things after a variety of user interactions without redrawing their content or slowing anything down by constantly remeasuring the rest of the UI. Because…

I think in games reimplementing controls is done because of game engines having their own gaming-specific widgets or parts, which are not using the system's widgets themselves. Game creators will make use of the things available in the game engines.

Re: Don't use custom CSS scrollbars

#188

Post by asutekku »

post-it wrote: post #72
Izkata wrote: post #60

Earlier quoted context omitted.

> Really I think we just need better APIs from the browsers to customize when a scroll bar is shown (again, not on the page level but within scrollable elements) What do you have in mind beyond "always show", "show if needed", and "always hide"? Those have all existed for decades as "overflow: scroll", "overflow: auto", and "overflow: hidden".

`overflow: hidden` hides the actual content. GP wants the element to be scrollable with a hidden scrollbar.

You can do that already with: section::-webkit-scrollbar{ display: none; }

Re: Don't use custom CSS scrollbars

#189

Post by jmaker »

Fwiw, that huge font size doesn’t invite me to actually read the text. I’d rather have custom scroll bars than try to read when there literally are just three sentences that fit on my iPhone viewport.

Re: Don't use custom CSS scrollbars

#190

Post by zelphirkalt »

MrPatan wrote: post #173

Custom scrollbars, as in "I'll hijack the scroll events and draw custom stuff on the side of the element" kind of custom, yeah, that's bad and buggy and annoying. Being able to style native scrollbars is a godsend which satisfies designers and brand people and prevents the first kind of custom scrollbars.

What is the point of satisfying a designer? If they design a product for a customer, then the focus should be on satisfying the customer. If they design a product for themselves to use, OK fine, go ahead. But their expectations should not be pushed onto everyone else.

A website is not a playground to try out ones figma crayons making ever more complex figma designs. One of the lessons in about every design course or degree is, that the medium plays an important role. Web design should care about being design for websites. By not caring about the actual website and merely caring about ones figma design, one neglects the medium. The result is a bad design. Instead the design needs to carefully weigh what is easily possible with the medium, functionality, and look and feel.

Post reply on HN