CSS Tabs 2.0
Almost four years ago I thought it might be fun to experiment with CSS and create CSS Tabs — simple, cross-browser tabs that developers could just drop onto a page and they would work. Almost four years later, CSS Tabs is by far the most popular page on unraveled and perhaps the most popular css tabs on the web. But like many HTML/CSS techniques, it had aged and was no longer one of the best methods for creating cross-browser tabs.
Now I’m no longer purely a developer, but I wasn’t about to just sit there and watch CSS Tabs go out of date. So a few weeks ago I started looking around to see what folks were doing and how they could be done better. The result is CSS Tabs 2.0. They’re the same, simple cross-browser tabs, but they use a different CSS technique that allows them to work in 17 browsers across Windows, Mac and Linux. And they no longer have the ugly alignment bug that was caused when the text size was changed.
Since I released CSS Tabs, I’ve received a ton of questions from people building sites who (no offense) had no clue what they were doing. So this time around, I’ve tried to make them even easier to use for the unprofessional developer by including lots of comments in the CSS.
So feel free to try them out and experiment on your own, but please provide attribution according to their Creative Commons license. And please let me know if you have any feedback or find the browser compatibility list to be inaccurate. Enjoy.