A friend of mine was getting started in web development by building a page on Codepen. I sent him a quick tip through Google Hangouts, namely to set his images max-width to 100% for an easy step toward a more readable page on mobile:

  img {
  max-width: 100%;
}

It didn't work, and he began to wonder whether Codepen automatically applied CSS or whether he had to do something to make it happen.

I looked into it and I was flummoxed. The results were the same in both Codepen and Devtools: the rule looked right, but didn't work. And recreating the rule on a new line triggered the expected behavior.

I wrote to Codepen with a suspicion:

I suspect it's something to do with a copy-paste issue having to do with some unseen formatting, because even typing over the existing text in both Codepen and devtools fails.

They wrote back and confirmed the issue:   just before max-width.

Within the editor, the non-breaking space appears as a space and not as code. Behind the scenes, Codepen properly identifies and wraps the property, max-value, for styling, but the non-breaking space is present and affects the attempt to apply the rule.

Screen grab of the rendered code for the editor interface showing the non-breaking space.

In DevTools, the rule is flagged for "unknown property name," and there, too, the non-breaking space renders as a space rather than as code:

A screen grab of DevTools showing the 'unknown property name' error.

Deleting the space does not work in DevTools as it simply reappears. Deleting the space does work in the Codepen editor.

The issue is that a beginner, like my friend, would assume he or she was doing something wrong and might give up in frustration.

It's tempting to suggest that there should be some effort on the other side to help aspiring developers by adding a visual cue or more detailed error reporting, but that's not practical.

The best solution is to reiterate a simple rule early and often:

Write your own code.

This doesn't mean you need to reinvent the wheel, but when you copy code, do so with your fingers and not your mouse.


423 0 0