Paul Irish

Making the www great

Surefire DOM Element Insertion

So you’ve got an element. You need to add it to the DOM. Somewhere, anywhere, just be sure that it works.

In Modernizr, we need to do this all the time. In order to adequately do our feature detection we need to try out some elements in the DOM. But how exactly to add it? Steve Souders dug into appendChild vs insertBefore and the comments meandered through the sea of possibilities. Here’s the best way to add yourElem:

1
2

var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(yourElem, ref);

But you prefer a good old document.body.appendChild(elem); Awww! I know, man. I used to, too. Well, you can’t always trust this.. Especially if you’re writing library, widget or third-party code.

Here’s why you can trust this insertBefore method, and why all the other techniques are not wise:

  • appendChild can throw Operation Aborted
  • <head> doesn’t always exist in old opera, not-so-old safari, and others
  • if your script runs in the <head>, the <body> doesnt exist yet.
  • appending to document.documentElement can lead to an uncertain parentNode.
  • document.documentElement.firstChild (or .childNodes[0]) may be an html comment.
    • and as of FF4, insertBefore doesnt work with an html comment node

Okay okay okay, there is actually one case where the above method poses a problem:

  1. You are inserting a <link>, <script>, or <img> (sumpthin’ referencing another asset).
  2. Said asset has a relative URL. (Yours has an absolute URL? You’re A-OK, bud)
  3. The page has a <base> element, changing the base URL used to resolve all relative URLs used.
  4. The first <script> element of the page is after said <base> element.
  5. You don’t want your element’s asset path to be affected by the <base> element.

Wow. So if this scenario is a concern for you.. Then you need a small addition to the earlier code:

1
2

var ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(yourElem, ref);

But anyway that’s a pretty narrow edge case so most people will be fine with the earlier snippet.

And if you have a hard time remembering the signature for insertBefore like I do, just think that your parent wants you to insert yourself before your younger brother. That’s totally parentNode.insertBefore(you, sibling), right? :)

Thx souders, alex sexton, miketaylr, ben alman, jdalton & everyone else who cares about these small details

11 More Things I Learned From the jQuery Source

I recently dove back into the jQuery source code to pull out some more JavaScript goodness. If you haven’t seen the original 10 Things I Learned from the jQuery Source video, definitely check that out.

But now.. some newness:

youtube link for flash-less HTML5 player

In this video:

Tune in for 29 minutes and soak it up.

Chrome’s Inset Box-shadow Bug: Fixed!

If you’ve ever had inset box-shadow styles, perhaps for a button, looking like this:

1
2
3
4

.omg {
  -webkit-box-shadow: inset 5px 5px 5px red;
  border-radius: 40px;
}

You might have noticed it comes out looking pretty bad in Windows and Linux in Chrome. Why not on Mac? The Mac port uses CoreGraphics, while the others use Skia for system graphics which is where the root issue resided.

I’m happy to report the latest dev channel shipping now (10.0.628.0) has fixed this bug! Woohoo! Over 338 people starred the issue at http://crbug.com/29427. But lucky for us, Hajime Morita on the Tokyo Chrome team dug deep into the Skia code and secured a fix.

Demo link at plexode

And I should probably take this moment to remind you…

Reporting bugs is a web developer’s responsibility

If you’re doing heavy HTML5/CSS3/WebGL/whatever experimentation and you run into bugs in the dev channel Chrome, please report them at http://new.crbug.com.

Provide a reduced test case and your ticket will quickly be triaged and attended to. And of course, search to see if it’s already been reported. ☆ any issue you’d like to vote for and monitor progress on, though don’t add any “me too” or +1 comments… or I’ll come after you! :)