freeCodeCamp: Erroneous behavior in "Specify How Fonts Should Degrade" challenge

Challenge Name

Challenge Link

Issue Description

The challenge aims to show how fonts degrade to the available one, if the specified fonts are not available. However, if you embed the h2 styles inside the stylesheet within HTML comment tags, like so -

  <!--h2 {
    font-family: Lobster, Monospace;
  }-->

The test passes.

This seems odd, because HTML comments <!--> --> should have no effect inside embedded style sheet. Newer browsers just ignore the HTML comment tags in the stylesheet, as per the spec, so placing comment tags in there shouldn’t make any difference. This behavior can be seen in this pen, where placing comment tags around the h2 in the stylesheet makes no difference to the Lobster font on h2. The same behavior is visible in the challenge page too.

Yet, it looks like placing the comment tags around h2 inside style tags seems to have acheived the desired result.

Browser Information

• Browser Name, Version: Google Chrome, Version 55.0.2883.87 m
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Desktop

Your Code

 
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  <!--h2 {
    font-family: Lobster, Monospace;
  }-->

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Screenshot