Special char added to css (​) where did this com

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.