Skip to main content

Chris Coyier

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


Performance of CSS Selectors


Cross-Browser HTML5 Video and Audio


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”


Style Links Depending on Destination

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

a[href=""] {
        /* 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”

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”


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 and enter this. Enter it as many times as you want spaces. Error on too many, they are easy to remove.

defaults write 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”


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="//"></script>

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”


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”