We created a CSS file using lessc Site.less Site.css. When we viewed the file in Firefox > Developer > Style Editor, the file started with ÿþ and had a red dot between each character.
What are these characters? How do we remove them?
Guessing that these characters might be related to UTF-8 with Byte Order Mark, we ran the CSS file thru this PowerShell script.
$path = "site.css";
$content = Get-Content $path;
$Utf8NoBom = New-Object System.Text.UTF8Encoding $False;
[IO.File]::WriteAllLines($path, $content, $Utf8NoBom)
That removed the funny characters, which supports the notion that they are related to the UTF-8 with Byte Order Mark encoding.
Note: We also checked that the HTML page has <meta charset="utf-8"> as the first line in its <head>.
We're not sure why these characters occurred in the first place. Does the lessc tool generate files encoded as UTF-8 with Byte Order Mark? We're also not sure why the Firefox Developer Tools rendered the red dots and ÿþ, whereas the Chrome Developer Tools did not.
It becomes more complex after reading from Wikipedia:
if the 16-bit units use little-endian order, the sequence of bytes will have 0xFF followed by 0xFE. This sequence appears as the ISO-8859-1 characters ÿþ in a text display that expects the text to be ISO-8859-1.
That quote from Wikipedia indicates that the file was encoded in UTF-16 little-endian order (whatever that means), and that Firefox was expecting ISO-8859-1 encoding (whatever that is). Why, if at all, was Firefox expecting that encoding when our <head> said <meta charset="utf-8">?
If you know the answer, please ket me know on Twitter @dicshaunary.