Special char added to css (​) where did this come from? - css

Question

I was doing a bunch of search-replace operations in notepad++ to effectively minify my css - mostly removing whitespace/tabs etc...) This ended up breaking much of my css.
Apparently a strange character (​) was inserted all over the place) Using notepad++ in UTF-8 without BOM, I cannot see these, but they appeared in a view-source.
I was able to remove these by doing a search replace in ANSI encoding, but my question is, what is this character, and why might it have appeared?

Answer 1

The string “​” is the UTF-8 encoded form of ZWSP when misinterpreted as windows-1252 encoded data. (Checked this using a nice UTF-8 decoder.) This explains why you don’t see it in Notepad++ in UTF-8 mode; ZWSP (zero-width space) is an invisible character with no width.
Apparently browsers are interpreting the style sheet as windows-1252 encoded. Saving the file with BOM might help, since then browsers would probably guess the encoding better. The real fix is to make sure (in a server-dependent manner) that the server sends appropriate Content-Type header for the CSS file.
But if this is the only non-Ascii character in your CSS file, it does not matter in practice, after you have removed the offending data.
I don’t know of any simple way to make Notepad++ insert ZWSP (you could of course use general character insertion utilities in the system), so it’s a bit of mystery where it came from. Perhaps via copy and paste from somewhere.

Answer 2

Using the web developer plug in or ext in Firefox you can see the problem character in the css document.
In Visual Studio all I could see was:
}
.t
Web developer showed an unwanted hidden character, an "a" with a caret on top:
}
â.t
The utf encoder link above revealed this
} (the encoded character for ampersand)
.t
and this
but simply fix the problem by deleting and retyping.