Custom scrollbars in Safari part 1

<p> Part 2 of this tutorial is now up, <a href="http://chrisjdavis.org/custom-scrollbars-in-safari-part-2" title="Part 2">give it a gander why don't ya</a>? </p> <p> I have, as others around the interwebs, added a bit of awesomeness to the Sillyness by leveraging the scrollbar specific CSS that is in the newer builds of WebKit. </p> <p> The two downfalls of using these rules are that they are only supported by WebKit based browsers (no love from the Fox), and that it kills your up and down arrow keys. This is a fairly serious usability issue. Can you imagine if you couldn't play <a href="http://www.pokerblog.com/" title="online poker">online poker</a> on certain browsers? It would be frustrating and would make you think twice about using it. Last night I set about working out how to fix this sticky wicket. The results are todays tutorial. </p> <h3>Targeting ftw</h3> <p> The simple answer here is to do some user agent sniffing, and only load the files needed for this tom foolery if a webkit enabled browser is found. A quick snippet of PHP and we are on our way: </p> <pre class="prettyprint"> <?php if(preg_match('%AppleWebKit%', $_SERVER['HTTP_USER_AGENT'])) { ?> <script src="/js/backbone.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="/safari.css"> <?php } ?> </pre> <p> At this point we should only have the CSS and JS to power this little diddy loaded when a browser that can use it is accessing our site. Rawk. Now lets take a look at the CSS. It is pretty lengthy, so lets look at it in chunks. </p> <pre class="prettyprint"> /* http://almaer.com/scrollbar/debug.html */ #wrapper { overflow: hidden; background: #090f13 url('images/background.jpg') repeat top left; background-attachment: fixed; font-family: helvetica; margin: 0px; padding: 0px; line-height: 1.5em; color: #fff; text-shadow: 1px 1px 2px #000; } </pre> <p> Okay, so here we are setting up the whole shebang. Basically we are wrapping the entire site in a div (#wrapper), and setting the overflow to hidden. You might be wondering why we aren't just applying this to html or body. I will get into why we aren't doing this later, but just trust me, it doesn't work properly. </p> <p> The rest of the CSS there is just setting up 2010 my theme so lets skip on to the good stuff. Setting up the custom scrollbar. </p> <pre class="prettyprint"> ::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track-piece { background-color: #333; -webkit-border-radius: 3px; margin-top: 10px; margin-bottom: 10px; } ::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #666; -webkit-border-radius: 3px; } </pre>

<p> This isn't really all that complicated either. A scrollbar is made up of a specific set of UI elements, but we are only going to focus on a few of them. The full list can be found on the <a href="http://webkit.org/blog/363/styling-scrollbars/" title="Surfin Safari">Surfin Safari Blog</a>. </p> <p> So lets look at the CSS we have to play with. Right now we are just concerned with the scrollbar thumb and the track. The above CSS says to create a vertical scrollbar that is 6 pixels wide, that has a background color of #333 and should have a top and bottom margin of 10px. Round it off with some rounded corner action and you are set. Should be just like creating the CSS for any div. </p> <p> Next we setup the scrollbar thumb, you know the bit you click on and drag to scroll. This should be pretty straightforward as well. Make the thumb piece 50px at the smallest, color it #666 and give it some rounded corners to make it purty. At this point we should now have a functioning scrollbar. </p> <p> The next section of code adds in exceptions for Mobile Safari. </p> <pre class="prettyprint"> @media only screen and (max-device-width:480px) { #wrapper { overflow: auto; } }

#wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 10px; overflow-y: scroll; overflow-x: hidden; }

@media only screen and (max-device-width:480px) { #wrapper { position: relative; top: auto; right: auto; bottom: auto; left: auto; overflow: auto; } } </pre>

<p> Lastly we need to add in a rule that won't make much sense now, but will be absolutely necessary as we get into part two of this tutorial. </p> <pre class="prettyprint"> a:focus { outline:0px;} </pre> <p> Alright that is it for part 1. By this time you should have a nifty scrollbar, but dead arrow keys. Tomorrow I will go through how to reactivate the arrow keys ensuring a great experience on your site, no matter the means an individual employs to access it. </p> <p> As always, questions and comments are welcome. </p>