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 .