I was telling everyone to check back Wednesday for CSS Off results. Well… #facepalm. Huge apologies, we still aren’t quite ready. As it turns out judging 136 entries is quite a huge task. The important bit: come hell or high water, results will be posted Monday. You’ll be able to browse all the entries and see how we scored each based on the criteria we chose. So between the organization, initial judging, top entries judging, and crafting the results page… it has been a long road. Not to mention we didn’t anticipate so many entries! Anyway, no more excuses, see you Monday with results.I got a nice card from Doctors Without Borders from the donation made based on the number of entries, so in the meantime we can all feel good about that =).

CSS3 is a big mess! 4+ rules for making a corner round or adding a drop shadow! Preposterous! Where are the standards?!I’ve been hearing a ton of that. There is something of a point here. We all like standards, no question they are a good thing for the industry. Seeing a bunch of messy/repeated code like CSS3 can produce doesn’t feel like the clean happy code that standards is supposed to be all about.But here is the deal.The specs for these things aren’t done yet. Standards move frigging slowly. Browser vendors know we want this stuff, so they don’t wait for the spec, the use vendor-specific CSS attributes so we can start using/testing them now. This is good. It means they aren’t sitting on their asses waiting for a slow train that answers to no one. When the spec does get finished, they can roll out support for it in the standard way much quicker.In my opinion, it would be worse for browsers to implement the new attributes without the vendor-specific prefixes, as that would actually be abandoning standards.

If you were interested in that CSS Tabs stuff from yesterday, check out the new demo. I got a little obsessed with it and tried out a bunch more things. Still nothing I’d call a 100% perfect replacement to using JavaScript for tabs, but getting a lot cleaner and closer.I’m sure most of you read these sites anyway, but just in case…I thought Nettuts ran a pretty sweet article about jQuery and it’s hidden features by James Padolsey. For example, I always forget how awesomely easy it is to serialize from inputs (like for AJAX submission). Serialize = find all the inputs in the form and build a query string with the name/value pairs, instead of doing all that yourself/hard coding it.Then Smashing Magazine ran a great one by Andy Rutledge answering common questions about design professionalism. Andy is an opinionated dude and I love how he dished out some hard facts here. For example, if you are asking questions like “I’m just staring freelancing and I’m wondering how I can get more clients…” then you probably shouldn’t be freelancing. Plus, a heaping helping of personal responsibility.Jeff Starr over on Digging Into WordPress wrote up a nice guide on getting a plugin into the official plugin repository. I’m a little disappointed in myself I’ve never done this before. I’m not much of a deep backend dude, but still, I have a few ideas that I think would make cool plugins.I’m gonna close comments here just because anything that needs to be said about any of these things is probably best said at that article.

When you think of “tabs”, your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there is a way to accomplish this same idea with “pure CSS”. Just as we did with the CSS Image Switcher, let’s tackle this traditionally JavaScript project with only CSS. Tabs: a ubiquitous design pattern:target pseudo class selectorThe major empowering concept here is the CSS pseudo selector :target. :target is used in conjunction with ID selectors. The selector will match when the current URL contains a hash-tag of that exact ID. So if the current URL is:http://css-tricks.com/#big-bam-boomAnd there was an element with that ID on the page:<h1 id="big-bam-boom">Kaplow!</h1>Then this selector will match:#big-bam-boom:target { color: red; }How does one get to a URL with such a hash tag? You have links that activate them:<a href="#big-bam-boom">Mission Control, we're a little parched up here.</a>Browser Support / CSS3Normally I might end a tutorial like this with a little section on browser support. But it’s rather important in this case so let’s get it out of the way now. :target is considered CSS3. It has wide support across all the major current browsers, including IE 8. Of course I’m all abut dropping support for IE 6, so who cares if it doesn’t work in that (it doesn’t), but :target is also not supported in IE 7. Unfortunately IE 7 is still very much on the radar, which puts this whole tutorial in a fun/educational category rather than a use-this-in-live-production category.Of course, if you wanted to use it in production, one option would be to use conditional comments to add JavaScript to make them to work. We won’t specifically cover that here.Clean HTMLLet’s start this out right with some nice and clean HTML markup for our soon-to-be tabbed area:<div class="tabbed-area">

<ul class="tabs group"> <li><a href="#box-one">Tab 1</a></li> <li><a href="#box-two">Tab 2</a></li> <li><a href="#box-three">Tab 3</a></li> </ul>

<div class="box-wrap">

<div id="box-one"> <!-- box two content --> </div>

<div id="box-two"> <!-- box two content --> </div>

<div id="box-three"> <!-- box two content --> </div>

</div>

</div>I’d call that perfectly clean. Even with CSS disabled, you would see a list of links each of which would jump down the page to the div with the content related to that link.CSSThe tabs themselves we’ll set up as a horizontal row of links..tabs { list-style: none; } .tabs li { display: inline; } .tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; } .tabs li a:hover { background: #ccc; }When you float all the links like that, the parent will collapse, so let’s chuck in the old clearfix class so we can use it on the parent ul so it has a natural height. No need for the IE 6 and 7 hacks here, since neither of those support this technique anyway..group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }Now let’s set up the very basic styling for the panels. There is a wrapping div for all the panels. The purpose of that is to set a relative positioning context so we can absolutely position panels inside of it. All the panels will be of equal height and width and positioned exactly on top of each other. Both panels and tabs share the same 1px border..box-wrap { position: relative; min-height: 250px; } .tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; } .tabbed-area div div, .tabs li a { border: 1px solid #ccc; }Now the magical part that makes it work is as simple as adjusting the z-index of the panels when they are “targeted”.#box-one:target, #box-two:target, #box-three:target { z-index: 1; }Ruh-Roh… What about current tab highlighting?What we have so far is a totally functional tabbed area. You click the tab, the corresponding content in that tab loads. Functional, but not the most helpful UI. There is no feedback at all which tab is the currently showing tab, either when the page loads or even when you click to view a different tab.This is a fairly major hurdle. I find a way to solve it, and we’ll go through that here, but it’s dirty. The root of the issue is that we can’t select back “up” the element tree. So if we need the panels to have ID’s, the only thing we can affect in CSS is decedents of that div when it is in :target. For example:#box-four:target a[href="#box-four"] { color: red; }That would be a cool way to select only that particular link when that panel is active, but as of now, we can’t do that because that link isn’t a descendant of the panel.The only way I’ve been able to solve this is to actually just make the navigation descendants of the panels. This is a bummer, because that means that each panel needs to repeat the tabs….<div class="box-wrap">

<div id="box-four"> <!-- content for panel -->

    <ul class="tabs group">
        <li class="cur"><a href="#box-four">Tab 4</a></li>
        <li><a href="#box-five">Tab 5</a></li>
        <li><a href="#box-six">Tab 6</a></li>
    </ul>

</div>

<div id="box-five"> <!-- content for panel -->

    <ul class="tabs group">
        <li><a href="#box-four">Tab 4</a></li>
        <li class="cur"><a href="#box-five">Tab 5</a></li>
        <li><a href="#box-six">Tab 6</a></li>
    </ul>

</div>

<div id="box-six"> <!-- content for panel -->

    <ul class="tabs group">
        <li><a href="#box-four">Tab 4</a></li>
        <li><a href="#box-five">Tab 5</a></li>
        <li class="cur"><a href="#box-six">Tab 6</a></li>
    </ul>

</div>

</div>Very much not ideal, I know. But now that the lists are inside the panels, we can just use a “current” class on the list item that is the correct corresponding link and style that. And we’ll make sure the current panels tab navigation is positioned above the panels and is “on top” when it’s panel is..cur-nav-fix .tabs { position: absolute; bottom: 100%; left: -1px; } .cur-nav-fix .tabs li a { background: -moz-linear-gradient(top, white, #eee); }

box-four { z-index: 1; }

box-four:target .tabs, #box-five:target .tabs, #box-six:target .tabs { z-index: 3; }

.cur-nav-fix .tabs li.cur a { border-bottom: 1px solid white; background: white; } Now with current tab highlighting!Demo and DownloadUse at will, just be aware of the IE 7 problem.View Demo   Download FilesHash it outYou’ll notice in the demo that if you click a tab in the one on the left and then click on a tab in the one on the right, the area on the left will revert back to it’s default slide rather than keep it’s current slide. That all goes back to :target and how it’s related to the hash in the URL. There is really no way around this without bringing in JavaScript, so if that’s not gonna work for you, you should probably just go JavaScript from the get-go.Also, hash tag links “jump down the page” when clicked, so also note that that when you click a tab your browser window will pop down to have that tab be the top-most element (if there is enough room to scroll down on the page). Again, no fighting that without JavaScript to my knowledge.Other resourcesStay on Target – Awesome article from Think Vitamin, unfortunately missing it’s demos. It covers some uber clever techniques though.W3C spec on :target