Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Deeper Browser Support

CodePen, the site, works in IE 9. That’s where we drew the line. As I’m sure you can guess, we don’t get too much IE traffic anyway. Plus, I don’t think it’s too much to ask of a front end dev to pop open a different browser to use a specific app. The things you build in CodePen you can test in any browser anyway (and we’re working on tools to make that even easier).

But for the embedded Pens, that’s not just our site anymore, that’s you’re site. And we need to be a bit more forgiving of your traffic. So, we put in a little blood sweat and tears and made them work in IE 8. We’ve managed to keep embeds nearly just as trim and fast.

Probably not going to go back to IE 7 unless there is some kind of crazy outpouring of desire.


Perhaps more notably, we’ve added the ability for you to have your embedded Pens not automatically stop animations. Generally, we do stop animations. Just like we do here on CodePen.io. The idea is that many animations are quite the memory hogs and CPU/GPU guzzlers. We want to get the point across about the animation but not slow down your pages.

Now, if you have a Pen that you want to embed but force it to not stop animating, you can adjust the data-safe="" attribute to true and it will play forever.

This is particularly useful for Pens-as-tutorials like this lovely step animation by Rachel Nahbors (CrowChick):

It worked nicely into her 24 ways article.

The way the defaults work is this: if you’re viewing your own Pen and you grab the embed code, it will default to true (plays forever). If you grab anybody else’s Pen or anybody else grabs yours, it defaults to false (stops). You can override in either case, but those seemed like sensible defaults (you know what you are doing with your own site and your own code).