HTML5 Please - Use the new and shiny responsibly. (Better) Tabs with Round Out Borders. The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno's approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements. A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup. The markup <ul class="tabrow"><li>Lorem</li><li>Ipsum</li><li class="selected">Sit amet</li><li>Consectetur adipisicing</li></ul> This would be about as basic as you can get.
Getting started To get started, let's get rid of the default <ul> and <li> styling and get these babies in line. LoremIpsumSit ametConsectetur adipisicing Share On. HTML5 Cross Browser Polyfills - GitHub. The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.
Looking to conditionally load these scripts (client-side), based on feature detects? See Modernizr.Looking for a guide to write your own polyfills? See Writing Cross-Browser JavaScript Polyfills.Looking for an alphabetical guide on HTML5, CSS3, etc. features, and how to use them? Svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas Web Storage (LocalStorage and SessionStorage) Video. HTML5 Rocks - A resource for open web HTML5 developers. Some CSS3/HTML5 demos.