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.
We do a special type of refreshing of your demo when you are just making CSS changes. It’s called CSS injection. Rather than refreshing the entire page with your changes, we just kinda rip out the old CSS and put in the new CSS. Not only is it faster, it can be mighty convenient when you’re trying to style the demo in a particular state or scroll position and not have it reset those things every change you make.
But… sometimes you don’t want CSS injection. You want the page to refresh on purpose. We’ve seen some very specific cases where this is necessary. So, we made a way for you to turn off CSS injection right from your code. Just put the string
CP_DoFullRefresh anywhere in your CSS. Like:
/* CP_DoFullRefresh */
If that string is anywhere in your CSS, you’ll get a full refresh when you change CSS.
Worth noting here: we already do this in certain other situations. For example, you’re using
@keyframe animation in your Pen. We found keyframes don’t get re-evaluated properly with CSS injection, so a full refresh was necessary already.