I bet a lot of you front end developers know all about CSS injection (or "Style Injection"). It's a setup in which you author CSS while looking at a live preview of a page, and that preview updates as you change things. The injection part means that the page doesn't refresh when the styles change, which is cool because 1) it's fast and 2) the state of the page is maintained.

We're doing this on CodePen now! Everywhere, too. From the editor to the PRO views like Live View.

You might not even notice anything. You might love it. No big deal. Everything should still just work. But to elaborate...

Speed

Hopefully things feel a little faster. Refreshing the entire iframe (e.g. Boomerang) isn't nearly as fast as just ripping out some styles and plopping in new ones.

State

Click to open a modal. Change style of modal in CSS. Without CSS injection, in order to see those new styles you'd have to refresh the page, thus closing the modal (probably) and then you'd have to open click to open the modal again. With CSS injection, the styles are immediately reflected even in that open modal.

If you work with anything page that has states, but those states aren't maintained in page refreshes, this is super nice.

Play with this concept here.

Caveats

  • We ran into a weird issue with @keyframes. Basically no matter how we ripped out the old styles and put in new (we tried: ripping out entire <style> and replacing, as well as .innerHTML'ing it), the new animation wouldn't take hold. So, we detect if your Pen uses @keyframes or not, and if it does, we revert to refreshes.
  • If you use <svg> in your HTML and try to change backgrounds in CSS, we faced similar issues, and need to force a refresh.
  • Same thing with the CSS :target selector... we force full a full refresh.

Turning it off

If you don't want CSS injection on any particular Pen, for any reason, you can prevent it by putting the string CP_DoFullRefresh anywhere in your CSS. For example, in a comment:

/* CP_DoFullRefresh */

History

This idea of live editing styles isn't particularly new. That's how Dreamweaver used to roll - and why tools like CSSEdit were popular. But it turns out people like working in real browsers, so tools like LiveReload became popular, then CodeKit. CodeKit has evolved as well, making their CSS injection work just about anywhere without adding code or browser plugins.

We're now moving into a time where people like controlling their own build process, and tools like Grunt and Gulp are ruling the day, plugins for which (Grunt / Gulp) leverage LiveReload's browser plugins.

Future

There is still a lot happening in this arena. Tools like Ghostlab keep browsers in sync in more fine-grained ways, like scroll position. BrowserSync is an open source way to integrate that kind of thing. Amazingly enough, fb-flo can inject new JavaScript without refreshing the page (crazy, right?). Emmet LiveStyle keeps your code editor CSS and DevTools CSS in sync (also black magic).

Rest assured we'll keep an eye on all this stuff and integrate what we can into CodePen.