Dear CodePen user

If there is one website I check more often than my email, it definitely is CodePen. It shows the most awesome stuff possible in HTML, CSS, JavaScript and all of its varieties. I absolutely love it. But it has one major flaw: the users.

Quite often I have to edit another user’s pen to be able to see what kind of awesomeness he or she has created. The common problem is that the CSS for the pen is only prefixed for webkit browsers. And the unprefixed property is nowhere to be seen, so I can’t use the prefix free option in the CSS options tab. And that is a real shame, because that is exactly where the prefix free option is for. Let me show an example by Andy Dust (please don’t take this personal):

A CodePen with just webkit prefixed properties

I mean, this looks pretty rad, right? But to be able to see what Andy made, I had to remove all the -webkit- prefixes and that just doesn’t feel right. We live in a time where cross browser compatibility is easier than ever to pull off because everyone is confirming to the same standards more and more. So why don’t we all just prefix all the things or let it be handled by the excellent prefix free plugin? Save yourself the hassle of typing all the prefixes and let something else handle it for you.

Yes there is an obvious performance impact when using prefix free, but if that’s your concern, just type all the prefixes yourself, but do not ever limit yourself to webkit browsers. Although I am a no–one in our wonderful community, I stick to a policy to not heart any CodePens that I have to edit before I can experience them in full glory.

I have never seen CodePen statistics, but I bet that the majority of users use Chrome. I am more a Firefox person (I can’t remember why, except for the fact that I can use CMD + alt + m to toggle mobile view and not having to resize my browser window). Nothing is wrong with people using different browsers. In fact, it’s one of those things that make our job as web developers more interesting. To a certain degree, that is. But somehow Chrome users seem to struggle to make cross browser pens. And that bothers me. Because CodePen rocks, big time!

Dear CodePen user, I do not actually hate you. You rock! But please respect my choice to not use a webkit browser and let’s make CodePen that much more awesome together!

Top CodePen image by Mark Santiago

Other posts

  1. CodePen based Pattern Library

  2. Working with a styleguide

  3. Z-index management with SASS

  4. A logo wireframe

  5. An imageless web