Search code examples
cssgoogle-chromeinternet-explorerbyte-order-mark

Why is the first selector in my CSS file ignored by browsers?

I fought this issue for several hours today, and thought I would share the issue and solution. The solution could help for a few searches:

  • Why is the first selector in my CSS file ignored by browsers?
  • Why is the first line in my CSS file ignored by browsers?
  • Why is the universal selector ignored by browsers?

I didn't believe I had touched the CSS for my web project, however I had been making some updates, and changing some configurations. All of the sudden, the styling was way off. With the inspector in the browser, I found that my CSS reset wasn't applied.

My CSS file begins with:

* {box-sizing:border-box;font-size:100%;line-height:1.5em;font-family:'Open Sans', sans-serif;vertical-align:baseline;word-wrap:break-word;word-break:break-word;margin:0;padding:0;border:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}

I had already found that it was not the universal selector that was ignored... because if I add a line with html {}; above it, the universal selector becomes active again.

I thought it might be the first line that was ignored... so I changed html {}; to a commented line... and then the first selector on the following line no longer worked.

Solution

  • Somehow the CSS file had been saved beginning with a Byte Order Mark.

    This was not visible in Visual Studio Code or vim, but it was subtly visible in Chrome's inspector: Chrome Inspector, Showing BOM as first character of the first line.

    That red dot as the first character of the first line is a Byte Order Mark. Editing it out in the inspector resolved the issue (for that load instance).

    I'm not sure how it snuck into just one file... but it was simple to remove with vim:

    • Open the file in vim: vim <filename>
    • Remove the BOM with :set nobomb
    • Save and Exit: :w:q

    Hope this helps someone else save some time!

    Note: It may be possible that the way the file was served is the issue. It was output by Drupal using print file_get_contents();, and an extra newline may have been inserted before the BOM. Perhaps if the BOM were actually the first character, it would have been fine?