title: Quoted font 'sans-serif' not working properly in CSS
body: <p>I’m writing a small static site (HTML and CSS) and stumbled about a behavior in the property <code>font-family</code>, which I don’t understand. I like to write my code consistent with a nice and clean look, that’s why always quote fonts in CSS.</p>
  
  <p>As far as I understand the <a href="https://www.w3.org/TR/CSS22/fonts.html#propdef-font-family" rel="nofollow noreferrer">CSS2.2 specification</a> correct, quoted fonts are allowed:</p>
  
  <blockquote>
    <p>Font family names must either be given quoted as strings, or unquoted
    as a sequence of one or more identifiers.</p>
  </blockquote>
  
  <p>Unfortunately, it’s not working properly in my case. I attached an example below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test1
  {
      font-family: 'sans-serif';
  }
  
  .test2
  {
      font-family: 'arial';
  }
  
  .test3
  {
      font-family: sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="test1"&gt;Test&lt;/h1&gt;
  &lt;h1 class="test2"&gt;Test&lt;/h1&gt;
  &lt;h1 class="test3"&gt;Test&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tested the property with Google Chrome 54.0.2840.99 and Internet Explorer 11.0.9600.18450. Why is the quoted font for <code>arial</code> working but not for <code>sans-serif</code>?</p>