Select Page

Category: scrollbars

The Current State of Styling Scrollbars

If you need to style your scrollbars right now, one option is to use a collection of ::webkit prefixed CSS properties. See the Pen CSS-Tricks Almanac: Scrollbars by Chris Coyier (@chriscoyier) on CodePen. Sadly, that doesn’t help out much for Firefox or Edge, or the ecosystem of browsers around those. But if that’s good enough for what you need, you can get rather classy with it: See the Pen Custom Scrollbar styling by Devstreak (@devstreak) on CodePen. There are loads of them on CodePen to browse. It’s a nice thing to abstract with a Sass @mixin as well. There is good news on this front! The standards bodies that be have moved toward a standardizing methods to style scrollbars, starting with the gutter (or width) of them. The main property will be scrollbar-gutter and Geoff has written it up here. Hopefully Autoprefixer will help us as the spec is finalized and browsers start to implement it so we can start writing the standardized version and get any prefixed versions from that. But what if we need cross-browser support? If styled scrollbars are a necessity (and I don’t blame you), then you’ll probably have to reach for a JavaScript solution. There must be dozens of libraries for that. I ran across simplebar and it looks like a pretty modern one with easy instantiation. Here’s a demo of that: See the...

Read More

What’s New In CSS?

Rachel hooks us up with what the CSS Working Group is talking about: Styling scrollbars. This would come with properties like scrollbar-width and scrollbar-color. The best we have right now is proprietary WebKit stuff. Aspect ratios. I imagine the CSS portion of this journey will be best handled if it plays nicely with the HTML intrinsicsize stuff. Matching without specificity. :where() is :matches() with no specificity, and :matches() may become :is(). Logical Properties shorthand. The team is discussing a shorthand syntax for Logical Properties and the possibility logical would be default over the current physical with a defined “mode” in the stylesheet. Direct Link to Article — Permalink The post What’s New In CSS? appeared first on CSS-Tricks....

Read More