As we might expect, this project is not fully supported on all browsers because it implements HTML5 and CSS3 features that, of course, aren't included in old browsers. Many techniques exist to find a way around this issue; the one we'll look at now is called graceful degradation. It basically focuses on making the core functionalities of the project as widely supported as possible while accepting that everything else might be unsupported and thus not displayed.

Our project is a good example of graceful degradation: when a browser does not support a specific property, its effects are simply ignored without affecting the basic functionality of the form.

To prove this, let's try the project on IE8, which basically has no CSS3 support:

To achieve the best possible browser support, we may also want to hide footer elements and radio buttons on IE9 because, otherwise, they'll be displayed but they won't behave as expected. To do so, we need to add a conditional comment in our index.html file, just before the end of the head section. We'll see in the later chapters how conditional comments work, but for now let's say that they allow us to specify some markup that needs to be interpreted only by chosen browsers.

<!--[if IE 9]>
  <style>
    footer, input[name=beers], input[name=chips]{
      display: none;
    }
  </style>
<![endif]-->