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

131–140 of 250 posts

Re: Don't use custom CSS scrollbars

#131

Post by tsimionescu »

hoherd wrote: post #34
willio58 wrote: post #6

On pages, I fully agree. 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? It can be difficult to visually say "Hey, you! There's more to see if you scroll down in this area" You can try to use gradients with fade-outs, you can try to make it so the top of the last item in a scroll area is just visible enough to make it clear som…

Can you give an example of when a design calls for stylized scrollbars and there is no alternative.

Say your app is satirizing flashy magazines with a funky magenta-and-yellow color theme. Would you like a gray scrollbar in the middle of the page? Or, if your app is a medieval role playing game with a wooden theme for the UI, would you expect flat gray scrollbars to work well?

Re: Don't use custom CSS scrollbars

#132

Post by jojobas »

ryandrake wrote: post #114
donkeybeer wrote: post #100

Earlier quoted context omitted.

Yes 100%, apps should follow the theme for components set by the user.

I 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. Browser…

1991 called, they want their Gopher back.

Overriding all css is so popular a concept that no Firefox plugin to do that has more than 100k downloads (and firefox users are probably the most likely to fidget with things like that).

A radical idea - people should be able to create whatever they want in whatever colours and fonts they want and have it shown to viewers the way they want, at least unless the viewer explicitly objects.

Re: Don't use custom CSS scrollbars

#133

Post by tsimionescu »

leokennis wrote: post #127
tsimionescu wrote: post #124

Earlier quoted context omitted.

I 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…

So 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 interf…

Well, 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.

Re: Don't use custom CSS scrollbars

#134

Post by pmontra »

theobr wrote: post #121
preommr wrote: post #21

> 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…

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

I 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?

Re: Don't use custom CSS scrollbars

#135

Post by layer8 »

Drew_ wrote: post #73
kelnos wrote: post #52

Earlier quoted context omitted.

Taking all the flexibility away would be fantastic. I wish all webapps looked as close as possible to native apps, and couldn't style things like buttons.

Safari, Edge and Chrome don't style any HTML elements like their native counter parts.

Which is part of what is being criticized. Say about Internet Explorer what you will, but it used native controls.

Re: Don't use custom CSS scrollbars

#136

Post by pprotas »

tsimionescu wrote: post #118
jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

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…

MacOS and iOS scrollbars are the same in every app and browser. They are styled by the OS, even in iOS games.

Re: Don't use custom CSS scrollbars

#137

Post by pyrale »

tsimionescu wrote: post #118
jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

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…

I believe the point is that if you're unhappy with the default scrollbar, you should get rid of it altogether rather than torture it into doing something it's not meant to do.

Having done e.g. an endless scroll application, the scrollbar was unfit for our use, no matter what we did. The right solution was to remove scrollbar and implement our own scrolling mechanism.

Re: Don't use custom CSS scrollbars

#138

Post by LinAGKar »

What's going on in that Finder video?

>There’s no visual indication that there’s more content present in this window

Not only that. There is a clear indicator that there isn't more content, since the last row isn't filled. Only, there is, but one of the rows has randomly been truncated for some reason?

Re: Don't use custom CSS scrollbars

#139

Post by not1ormore »

tsimionescu wrote: post #118
jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

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…

[dead]

Re: Don't use custom CSS scrollbars

#140

Post by creshal »

tsimionescu wrote: post #118
jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

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.

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 game itself.

1. Not everything is a game.

2. Depending on the game, system look&feel can be perfectly fine: SimCity 2000, Aurora, the Rule the Waves series, and probably loads of other simulation games all use it, because their art style doesn't require to re-invent the wheel poorly.

3. Games whose art style do need custom look&feel will most likely be using a fullscreen canvas/WebG(L|PU) widget anyway and will be able to use it regardless of CSS support of the feature.

Post reply on HN