title: unexpected css behaviour when an invalid character invalidates a declaration
body: <p>I recently had an issue where a font-face declaration didn't work, my custom font was defaulting to arial for some reason. When I investigated it turned out that there was a stray invalid character before the font-face declaration</p>
  
  <p>like this:</p>
  
  <pre><code> v
   @font-face {
      font-family: 'Somefont';
      src: url('somefont.eot?') format('eot'), 
           url('somefont.woff') format('woff'), 
           url('somefont.ttf') format('truetype');
  }
  </code></pre>
  
  <p>So in this example the 'v' stops the font-face declaration from working, which makes sense. All the style declarations after this one work correctly, again as you'd expect.</p>
  
  <p>MY question though relates to the fact that there was a valid comment in-between my invalid character and my style declarations, like this:</p>
  
  <pre><code>v
  /* 
   * FONTS
   * ------------------------------------
   */
  
  @font-face {
      font-family: 'Somefont';
      src: url('somefont.eot?') format('eot'), 
           url('somefont.woff') format('woff'), 
           url('somefont.ttf') format('truetype');
  }
  </code></pre>
  
  <p>So here is what I'm a little stuck on:</p>
  
  <p>I would have expected the invalid 'v' character to do nothing, and for the comment (which is formatted correctly) to kind of reset the invalidity of the css and allow the first font-face to work as normal, much like in the first example where the first font-face declaration 'took the hit' and allowed the remaining css to work as normal.</p>
  
  <p>its straight up css so there is no pre processor involvement.</p>
  
  <p>Anyone with better css knowledge then me care to explain it?</p>
  
  <p><strong>N.B. I am looking for the technical explanation as to why it allows a style declaration to reset/offset the invalid characters but not a comment, not how to avoid css errors/bugs</strong></p>