CSS Scrollbars with out served icons -- SVG data URIs FTFW!
I posted a CodePen a few days back for defining a default set of Chrome scrollbars, after finding one too many sites messing with them.
One shortcoming was that the first solution I'd arrived at required me to serve a set of icons from a known place -- which means that either I'd be hitting some third-party website (say, Imgur) for serving gifs, or I'd have to have a local webserver (which I generally do, but not always). I was hoping there might be a way to do inline images or SVG.
Mucking with Ello's stylesheets over the past few days, I've noticed that almost all the graphics and icons used on the site are SVG graphics -- another really neat thing, and, by the way, really fucking smart in a world of highly variable device sizes and display pitches (pixel densities). Scalable Vector Graphics, unlike bitmaps, well, scale. Without blur or jaggies. So you can use the same icon at 8px or 80px.
Anyhow, I figured out what I needed, and have a set of icons which can be encoded as inline CSS entities as a data URI, for which, it turns out, SVG is directly supported. Yay!
So the style has four instances of something like this for the top, bottom, left, and right scrollbar end buttons:
border-right: solid 2px;
url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' > <polygon points='0,50 100,100 100,0' fill='<a href="/search?terms=%23888" data-href="/search?terms=%23888" data-capture="hashtagClick" class="hashtag-link">#888</a>' stroke='<a href="/search?terms=%23000" data-href="/search?terms=%23000" data-capture="hashtagClick" class="hashtag-link">#000</a>' stroke-width='1' /> </svg>");
background-position: 50% 50%;
background-size: 8px 8px;
The meat here is the "background-image" bit. I laid out a 100px by 100px nominal graphic, but it's scaled to 8px as it's used. This is a left-pointing triangle with its point (0,50) and base (100,00 and 100,0) tipping it on the side.
Silly stuff, but I've learned something. And like the result.