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.
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…
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.
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.
- 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
@keyframesor 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
:targetselector… 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 */
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.
Rest assured we’ll keep an eye on all this stuff and integrate what we can into CodePen.