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.