Skip to main content

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Snippet

Add Spaces to Dock in OS X

This is absolutely not HTML related, but by sheer demand, I needed to add it somewhere. To add a “space” to the dock in OS X, open up Terminal.app and enter this. Enter it as many times as you want spaces. Error on too many, they are easy to remove.

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'

They won’t show up until you force restart the Dock with:

killall Dock

To remove them, just drag them up and out of the … Read article “Add Spaces to Dock in OS X”

Article

Fix Inserted HTML5 Content with HTML5 innerShiv

When working with HTML5 today, many of you know that you’ll need to include the “HTML5 shiv” to ensure that CSS will recognize and be able to style those elements in browsers that aren’t yet hip to HTML5.

<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Credit for that to Remy Sharp, Jon Neal, John Resig and anybody else who contributed to that idea. Also for the benefit of those non-hip browsers, it’s best to reset many of the HTML5 elements to block-level … Read article “Fix Inserted HTML5 Content with HTML5 innerShiv”

Snippet

iPad-Specific CSS

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}
Read article “iPad-Specific CSS”
Article

CSS Run-in Display Value

CSS has a value for the display attribute called run-in. It’s like this:

h3 {
  display: run-in;
}

The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques.

Let’s take a closer look.… Read article “CSS Run-in Display Value”

Snippet

Multiple File Input

File inputs can have an attribute of “multiple” which then allows multiple files to be selected in the file section dialog box. Firefox 3.6+ and WebKit browsers only are supporting it so far. Unfortunately the “multiple files” need to be within the same folder, as there is no interface for selecting one, moving folders, and selecting another.

<form method="post" action="upload.php" enctype="multipart/form-data">
  <input name='uploads[]' type="file" multiple>
  <input type="submit" value="Send">
</form>

Note that the “name” of the file input has brackets at … Read article “Multiple File Input”

Snippet

Detect First Visible Element of Certain Class

Adds a class of “first” to the first element that has a class of “activity” that is visible in the browser window.

$(window).scroll(function(){
	var scrollTop = $(window).scrollTop();
	var windowHeight = $(window).height();		
	var first = false;
	$(".activity").each( function() {
		var offset = $(this).offset();
		if (scrollTop <= offset.top && ($(this).height() + offset.top) < (scrollTop + windowHeight) && first == false) {
			$(this).addClass("first");
			first=true;
		} else {
			$(this).removeClass("first");
			first=false;
		}
	});
});
Read article “Detect First Visible Element of Certain Class”
Article

Dude, you browse with JavaScript on?

Dude, you browse with JavaScript on?

Uhm, yeah, why wouldn’t I?

It’s totally insecure. Hackers could destroy your computer.

Hackers? What is this 1995? And, no they can’t.

They can definitely steal information about you without you knowing.

Like what?

Like you’re address book information or your browsing history, depending on your browser and settings.… Read article “Dude, you browse with JavaScript on?”

Video

#90: Simple TextMate Tips

TextMate is a mac-only code editor. Sorry to all the PC users this time around. If you’ve been watching these screencasts for a long time, you know I used to mostly use Coda. Since I’ve been working a lot more locally, I’ve been using much more TextMate, which I’ve always considered to be superior as a code editor but just wasn’t as convenient as Coda being all-in-one. I’ll cover some things I find cool and useful in TextMate, like vertical … Read article “#90: Simple TextMate Tips”