Skip to Content

12% Dead

Microsoft, via Twitter:

It’s not often that we encourage you to stop using one of our products, but for IE6, we’ll make an exception: http://ie6countdown.com

IE6 is drawing his last few breaths. It’s over, people. Time to move forward.

50 and 50. So much talent, it’s stunning.

Quick tip: if you need to be able to quickly tell the difference between 8-bit and 24-bit .png images in a project, add a little note to the file extension:

my-pic.png // 24-bit png
my-pic.8bit.png // 8-bit png

This is especially useful when you have to support IE6 (which doesn’t support png-24 transparency) using either alternate image formats or a png-fix script:

nav.png // normal 24-bit navigation image
nav.8bit.png // matted 8-bit version for IE6 sans shadows

Creating a refractive glass effect in the web browser is a problem that has been kicking around in my head for a while now. While I have been busy thinking about it, this guy has gone and done it.

Looks like Tumblog functionality is set to drop in WordPress 3.1. Called “post formats“, the feature will provide an admin interface as well as an API for plugin and theme authors to hook in and add templates.

Nothing Tumblr hasn’t had for 3 years, but a solid addition to WordPress nonetheless.

Robbie Manson gives reasons to avoid single-line CSS. I used to be a strong believer in single-line CSS, but time and experience (plus lots of collaboration with other developers) have completely changed my coding style.

A clever trick for kerning type: turn it upside-down.

…Star Wars wasn’t a mystical, muse-favored event; an all-powerful force of unbridled inspiration. It puts its pants on one leg at a time, just like everyone else.

But where it differs, is in having the talent, the vision and more importantly, the willingness to say: “This isn’t good enough. This isn’t what I’m looking for”, while keeping the larger picture in mind. It happened with Chewbacca, the Millennium Falcon (a story for another time) and even the scripts themselves. All one has to do is take bushbaby chewie, green-skinned Han, Cantwell’s first Millennium Falcon and the first drafts, and Star Wars would be all but forgotten today.

– Binary Bonsai, George Lucas Stole Chewbacca, But It’s Okay

365psd posts a free .psd file every day. Most of them are gorgeous casualties of the design process, given a new home. Digging through someone else’s .psd file is a great way to learn technique.

So it happens: you want to incorporate a texture into a site design: wood grain, or perhaps the patina of a fine leather-bound book. No problem, you say, I’ll just find a stock photo of some leather, repeat-x, repeat-y, and… uh-oh. Look at those ugly seams! If only someone would create free, tillable patterns, providing both the .psd and .pat files!

If only.

SENTINELLA by Bertelli Bicycles

The Bike Stylist is a fine blog about building bicycles (complete with lovely diagrams), by the guy who builds these.

Delicious CSS with PIE, Pt 1

Us Crowd Favorite folks have just released a premium WordPress theme called Carrington Business. It’s quite probably the most advanced WordPress theme available today. All told, it has been more than a year in the making, so there’s quite a bit packed into it I won’t mention here.

Let’s just talk about the CSS3 we use in the theme.

“Wait, CSS3?”, you say, “I thought I couldn’t use that for like another ten years? What about IE?!

Whoops, I got ahead of myself there. What I meant was, let’s talk about the cross-browser CSS3 we use. It turns out solid cross-browser CSS3 is no longer a thing of the future. Here’s how we used the Internet Explorer library CSS3 PIE to deliver Carrington Business’ fancy CSS to all modern browsers.

PIE is an IE behavior that enables lots of CSS3 goodies for Internet Explorer 6-8. It’s easy to use (just one line of CSS), smoking fast and works beautifully.

Integrating PIE with WordPress Themes

First things first. All WordPress themes should be self-contained so you can move them from place to place. So, we’ll want to add the latest PIE release to the theme folder. I like to keep it in a js/ directory, with all my other Javascripts, but you can put it anywhere in the theme.

Here comes the trick: PIE is attached via a proprietary IE behavior, and the IE team, as usual, got a bit “creative” with the feature. Here’s how you might think you would attach PIE:

.cherry-pie {
    /* Attach PIE behavior. Wooo! */
    behavior: url(../js/PIE/PIE.htc);
}

It turns out the code above will not work. That’s because behaviors calculate relative URLs based on the HTML document the CSS file is applied to. This as opposed to the scheme of calculating based off of the location of the CSS file. You tell me which makes more sense. Anyway, this leaves us with two options

  • Link PIE with a hard-coded relative URL, maybe something like this: behavior: url(/js/PIE/PIE.htc);
  • Have WordPress and PHP insert the absolute URL to PIE.htc

But! Remember that bit about WordPress themes being self-contained? That means we can’t use the hard-coded URL, since the PIE files would be separate from the main theme files. We really only have one option: PHP, baby.

Enter functions.php

Using WordPress functions we can dynamically insert the absolute path to the PIE file. Adding something like this to functions.php should do the trick: 

/**
 * Attach CSS3PIE behavior to elements
 * Add elements here that need PIE applied
 */
function my_render_css3_pie() {
   echo '
<!--[if lte IE 8]>
<style type="text/css" media="screen">
   #cherry-pie,
   .apple-pie,
   .pumpkin-pie {
      behavior: url('.get_bloginfo('template_url').'/js/PIE/PIE.php');
      zoom: 1;
   }
</style>
<![endif]-->
';
}
add_action('wp_head', 'my_render_css3_pie', 8);

The snippet above will add the chunk of code to your theme’s <head> tag using the plugin Action API. get_bloginfo('template_url') is replaced with the full URL to your theme. The “8″ I’ve used for the priority argument means the snippet will be placed below CSS, but above Javascript added through the plugin API. The zoom: 1 is a neat little trick to prevent jumps in the layout while PIE executes. Since PIE always triggers hasLayout on elements, you might as well do it up front. It will save you a little pain.

In my CSS, I add little notes to myself wherever I’ve enabled PIE for a selector:

/**
 * Uses CSS3 PIE
 * See my_render_css3_pie in functions.php
 */
#cherry-pie { ... }

And that’s the gist of it. More practical PIE tips to come.

In front-end development, the question
“what is the fewest possible number of <div>s I need for this?”
is not always equivalent to
“what is the most intuitive and maintainable approach here?”.
It’s also not always the same as
“what is the most meaningful and semantic approach?”.

PIE in the Sky

If you’re a front-end developer, you’ve probably been waiting with misty eyes for that far-off day when CSS3 is roundly supported. I’ll bet you didn’t expect it to be today.

CSS3 PIE (Progressive Internet Explorer) is an open source script that gives IE6-IE8 the ability to render the best parts of CSS3. Drop behavior: url(PIE.htc) into a group of styles and a metric ton of CSS3 properties suddenly work:

Jason was kind enough to let me beta-test PIE. I’ve used it in several projects now, and my first-blush reaction is this is way too good to be true. It’s light, fast, easier to implement than a PNGfix, and it just works with standard CSS properties. It’s now a standard part of my development toolkit.

Designed Behavior

Volkswagen has some cleverly designed interactions for their Fun Theory ad campaign.

It’s a bit like the broken windows theory in reverse.