Skip to main content

Chris Coyier

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

Link

Performance of CSS Selectors

Link

Cross-Browser HTML5 Video and Audio

Article

Linkage Returns

Way back when I used to do “Links of Interest” style posts. I’m happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I’m going to do it like it’s done currently on Digging Into WordPress, sort of Tumbr/Daring Fireball style. There will be no comments on this site for that style of post (comments should happen on the linked post). The title … Read article “Linkage Returns”

Snippet

Style Links Depending on Destination

a[href^="http://"] {
        /* fully valid URL, likely external link */
}

a[href="http://google.com"] {
        /* link to specific website */
}

a[href^="/"], a[href^=".."] {
        /* internal relative link */
}

a[href^="mailto:"] {
        /* email link */
}

a[href$=".pdf"] {
        /* PDF file */
}

a[href$=".doc"] {
        /* Microsoft Word document */
}

a[href$=".mp3"] {
        /* Music file */
}

a[href$=".zip"] {
        /* Archive file */
}
Read article “Style Links Depending on Destination”
Article

Expanding Images using HTML5’s contenteditable tabindex

HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, … Read article “Expanding Images using HTML5’s contenteditable tabindex”

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”