HTML5 Shim in functions.php

Might as well keep your header.php clean and insert the shim from the functions.php file.

// add ie conditional html5 shim to header
function add_ie_html5_shim () {
    echo '<!--[if lt IE 9]>';
    echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
    echo '<![endif]-->';
}
add_action('wp_head', 'add_ie_html5_shim');
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Hash Tag Links That Don’t Headbutt The Browser Window

Using hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this...
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Exploring Markup for Breadcrumbs

What is the most appropriate possible markup for breadcrumbs? We'll take a look at a bunch of different possibilities of various complexities and semantic success. Then also see what Google has to recommend as well as what HTML5 has in store for them.
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Better Broken Image Handling

Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead, you may want to replace that with a “missing image” graphic that you are sure exists so there …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Associative Array Syntax

Simple
$carParts = array( 
   'Tires'=>100, 
   'Window'=>1042, 
   'DoorHandle'=>917 
);
Array of Associative Arrays
public $notifyPartners = array(
			array(
				'name' => 'Twitter', 
				'tag'  => 'Social Network', 
				'url'  => ''),
			array(
				'name' => 'Campaign Monitor', 
				'tag'  => 'Email Marketing', 
				'url'  => ''),
			array(
				
Avatar of Chris Coyier
Chris Coyier on

#93: CSS3 Slideup Boxes

Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

New Screencast: CSS3 Slideup Boxes

Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized

Avatar of Chris Coyier
Chris Coyier on

Multiple Columns

Here is an example of a simple three-column class:

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}

Of which you would apply to a block of text like so:

<p class="three-col">Pellentesque habitant morbi tristique senectus et netus 
Avatar of Chris Coyier
Chris Coyier on