What is your server-side language of choice?

Poll is on the site in the sidebar for your voting pleasure.

I know many of you probably know multiple languages. Some of you probably are forced to write in particular languages for you job. For this poll, choose the language that you actually like the most.

And yes, I know the are more choices than in the list, that’s what “Other” is for, and I’d love to hear what those others are and why you prefer that language. For example, I’ve been hearing more and more about server-side JavaScript. Also if it’s not obvious, this is sans-framework. If you like Rails, clearly that’s Ruby. Django is Python. CodeIgnitor is PHP. Etc, etc.

Should tags like em and strong go <em>(outside)</em> punctuation characters, or (<strong>inside them</strong>)?

Like many polls around here, the question was interesting and stirred up some great conversation, but the question itself was probably flawed. There were only two choices: outside and inside, referring to placement of the HTML tags. So if “outside”, in the example in the question above, the parentheses would be italicized by the <em> tags. If “inside”, in the same example above, the parentheses would be regular text and the text inside them would be bolded by the <strong> tags.

What I was expecting was someone to chime in with the “absolute official rules on the right way to do it according to the typographic gods of the land.” That didn’t really happen. Instead the general consensus was “it depends.”

As for the poll results, at the time of this writing, 6,261 people have voted and the results are 55% in favor of “inside”:

It depends…

The following examples are still debatable, but these feel like the most correct way to go, as agreeded upon by most commenters in the original poll article.

The punctuation is left outside of the tag because the word “today” alone is what is being emphasized.

The punctuation is inside, because the whole phrase “Holy Crap!” is what is being emphasized.

There is split evidence on this one. Some would say that because that whole phrase is an “injection” into the sentence is should be grouped with the tag (outside) and all emphasized. Other more official sources say parentheses should never be emphasized. Personally I’d go outside. Seems like there could be awkward typography tension with the last letter being italic butting up against and upright parentheses.

Punctuation in book titles always go inside the tags.

Again it’s the title alone being emphasized, so having the question mark outside is the general consensus. I feel weird on this one, for some reason I like the opposite when it ends a sentence like this and prefer seeing the question mark follow suite with the previous words. This is a case where actually <i> may be more appropriate…

HTML5 and <b> & <i>

Ever since I’ve been a web designer I’ve been scoffing at the use of the deprecated <b> and <i> tags and dutifully fixing them with the more semantic <strong> and <em> tags. This always made sense to me as we are applying emphasis with these tags, not any specific styling. For example, you might want to leave the text roman for a strong tag but apply a background behind it instead to call it out.

But now that we are pretty much ready to rock with HTML5, we see the <b> and <i> tags return. WTF, you ask? Well, that’s what I thought, until you read up and think on it a bit. HTML5 is not replacing strong and em, these are just coming back in addition to them, and all four will live in harmony. In general, you’ll still use em and strong to emphasize words in text, but you should use b and i when you are bolding for the sake of bolding or italicizing for the sake of italicizing.

For example, book titles in text should be italicized. Not emphasized, italicized. That is a case of italicizing for the sake of italicizing and makes more sense to use the <i> tag.

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.

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.

Tabs: a ubiquitous design pattern

:target pseudo class selector

The 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-boom

And 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 / CSS3

Normally 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. 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 or 8. These browsers are 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 HTML

Let’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.

CSS

The 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 Download

Use at will, just be aware of the IE 7 problem. All of the HTML and CSS are right on one page, so if you want to “download” it, just copy and paste the code into an html file and save it.

View Demo

Hash it out

You’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 resources

• Stay on Target – Awesome article from Think Vitamin, unfortunately missing it’s demos. It covers some uber clever techniques though.
• W3C spec on :target

The idea is that you can use unicode characters (read: fancy symbols) for class names in your HTML, and even use write CSS selectors with those same characters.

<div class="♫">
    A.A. Bondy
    <em>I Can See The Pines Are Dancing</em>
</div>

.♫ {
   display: block;
   background: #eee;
   padding: 5px;
 }

Pretty cool eh? I’d call my example above perfectly semantic as well, since the div with the music note class name is marking up a musician and song. Possibly even more semantic, as a music note symbolizes music moreso than any English word.

I put together a super simple demo page that shows it working. Oh, and yes-it-works-in-IE6™ & yes-it-validates™

But…

One funny thing? View the source on that page. I use PHP includes for the headers and footers of all my demos, and because of the character encoding (?) of that page the PHP doesn’t run it just sits there as text.

That ain’t right.

Coda does warn you first.

Weird eh? If you know how this could work both ways, let me know.

Other uses

Jonathan presented (in his original article) and idea for targeting the corners of a box.

<div class="□">
  <div class="┌">
    <div class="┐">
      <div class="└">
        <div class="┘">
          content
        </div>
      </div>
    </div>
</div>

Remember back a few years ago most of us were rocking rounded corners with nested divs and images like that! The corners symbols are clever, but I could see the <div class="□"> being used for like “container” or “box” style classes today, or, perhaps best of all, the clearfix.

I posted a little code clip of this over on Forrst (sorry I know most folks don’t have accounts there yet) and a guy named Aaron had a funny idea. Using upside down writing to be annoying! id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'

Roll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning.

View Screencast

With the mouse cursor inside the input box, you can use the mouse scroll wheel to increment the number up and down.

Hitesh worked up a technique for doing it using jQuery, which works great. Then later he found a plugin which has already been built for dealing with mousewheel events, which is really nice and simplifies things. Just for fun the demo will leave both versions in it.

HTML

This could literally work on any element, but text inputs make the most sense. Perhaps this could be used on a time-tracking form where you need to need to enter the number of hours/minutes spent on something. Or perhaps an order form for entering how many of something to order.

In our demo we’ll just have a label input pair like you’d find in just about any <form>:

<div>
    <label for="how-many">How Many? </label>
    <input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>

jQuery

If you want to check out the non-plugin version of this, just download the files below. We’ll cover using the plugin here, for brevity. You’ll need to include jQuery, the plugin, and your own JavaScript file:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>

When the DOM is ready, we’ll bind the new “mousewheel” event to the input. When that input fires, if it’s an “up” mousewheel scroll, we’ll increment the value upwards one, if “down”, it will be decremented by one (unless it’s already zero).

The appending of the image on the first line is so that non JavaScript users won’t see the graphic which indicates mousewheel scrollability.

$(function() {

    $("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');

    $("#how-many").bind("mousewheel", function(event, delta) {
        if (delta > 0) {
            this.value = parseInt(this.value) + 1;
        } else {
            if (parseInt(this.value) > 0) {
                this.value = parseInt(this.value) - 1;
            }
        }
        return false;
     });

});

What about non-numeric inputs?

You’ll have to deal with that as needed. Now that you have the “mousewheel” event that the plugin provides, the function you write when that event fires could be anything. In the demo I have a text input which cycles through a list of different kinds of whales…

$("#whale").bind("mousewheel", function(event, delta) {
    if (this.value == "Blue") {
        this.value = "Sperm";
    }
    else if (this.value == "Sperm") {
        this.value = "Orca";
    }
    else if (this.value == "Orca") {
        this.value = "Humpback";
    }
    else if (this.value == "Humpback") {
        this.value = "Blue";
    }
    return false;
 });

Killer whales are getting all the press lately, time for some Humpback love.

Degradation

This is pure progressive enhancement. Without JavaScript the inputs are still inputs which behave just as any other input would.

Enjoy

View Demo   Download Files

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

Huge thanks to Patrik Spathon for this idea and help with the demo page!

How it’s done

Cutting to the chase, here is how it’s done:

div {
            background-color: #1a82f7; /* fallback color */
            background-image: url(images/linear_bg_2.png); /* fallback image */
            background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

View Demo   Download Files

Different syntax for different rendering engines

Mozilla (Firefox, Flock, etc)

Mozilla’s syntax (more detail here) is like this:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

The simplest way to declare a gradient is to just list a comma separated list of colors. That will start at the top and gradient to the bottom with equidistant color stops for each color. In the demo code above, we use a point and an angle (90deg) to it go bottom-to-top instead. For radial gradients: -moz-radial-gradient

WebKit (Safari, Chrome, etc)

WebKit’s syntax (more detail here) is like this:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Trident (IE)

Trident’s syntax (not really CSS3… more detail here) is like this:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Unfortunately, we can’t invite IE to the party! Using these filter properties does indeed work, and it would allow us to programatically declare gradients which is cool. But, instead of using the filter first and the image as a fallback, declaring a background-image overrides the filter and it uses that. Since we definitely still need image fallbacks, we might as well not use this at all.

“Stops”

The WebKit and Mozilla syntax for gradients both incorporate “stops”. A stop is an optional additional declaration that includes a point and a color. This means the gradient wont just start at one color and end at the other, it will fade to the stop color first, and that stop color will fade to the end color. More than one stop can also be used.

Saving HTTP requests

Using Firebug and looking in the Net tab to see all the resources used by the page, we can see the advantage.

The above screenshot is Firefox 3.6. We can see that the gradient fallback images are NOT loaded, which saves an HTTP request.

However using Firefox 3.5.8, the fallbacks are loaded.

We don’t save any HTTP Requests in olders version of Firefox (This is 3.5.8 on Vista). The gradient fallback images are still being loaded (and used).

It gets a little more iffy in WebKit browsers.

WebKit browsers WILL use the CSS3 property to render the gradient, but at the same time, still load the fallback images, so no HTTP requests are saved. The only advantage is the programatic declaration of color.

Doing it by the numbers

The speed gained by losing an HTTP request, to me, is the biggest advantage. The more I learn about web performance it seems to me keeping those down is the #1 way to improve page load time. However there is another advantage to using CSS3 gradients, and that is that these gradients are created programatically through numbers. Need to adjust some colors? Just adjust some numbers. No need to bring a big image editing program into the picture. This makes maintaining the site easier, as well as opens up doors for adjusting values on-the-fly. I imagine JavaScript libraries will begin to get the ability to animate these values soon enough, which will be pretty darn cool.

Ooooh Stretchy

When using an image for a gradient, it is declared as a CSS background-image and then repeated (you can often get away with a 1px slice, which is very efficient, size wise). The result though is that a static portion of the background is gradientized, and any overflow to that is flat color. Sometimes that works perfectly. Sometimes though it would be cool if the gradient stretched the entire height or width of the box. That is another thing CSS3 gradients can possibly be useful for:

So the big question is…

Is it really worth doing right now? I’m thinking it’s pretty darn close. If the numeric representation is a big deal to you, then I say yes you should start using them. If the speed is the only reason you would, then just realize that the only browser that it will help in is Firefox 3.6+, so you might wanna wait a bit on that.

Additional Resources

• Robert Nyman: CSS gradients for all browsers
• CSS3 Gradient Generator v2.0
• Linear Gradients