Today I Learned - Rocky Kev

TIL about adding Styling to scrollbars

POSTED ON:

TAGS: css webdev codepen scrollbar

You can design your scrollbars to give them a nice attractive look to it!

Yoinked the CSS-Tricks template and tested.
Direct Link: https://codepen.io/rockykev/pen/yLJLEaq

See the Pen CSS-Tricks Almanac: Scrollbars by rockykev (@rockykev) on CodePen. 

body::-webkit-scrollbar {
    width: 3em;
    background-color: lightgreen;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: orange;
  border-radius: 4rem;
}

Excellent coverage too on Can I Use

More info:
https://css-tricks.com/the-current-state-of-styling-scrollbars/

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')