Account services

Bad habits 5: Employing browser sniffers

Different browsers show tags slightly different. We have seen how the application developer has used browser sniffing to write different tags to fulfill a design requirement. In this case it was to fit within a column 130 pixels wide.

  <script type="text/javascript">
   if (navigator.appName.substring(0,5) == "Netsc")
      document.write("<th align='right'><input size='14' type='text' name='app_user'/></th>");
   else
      document.write("<th align='right'><input size='25' type='text' name='app_user'/></th>");
  </script>
  

This one distinguishes between Netscape (4 at the time) and everything else. But even Netscape Navigator displays differently on Windows, Macintosh and Linux. And consider: What will happen if the user has turned Javascript off? Solution: Use CSS to set a appropiate font and width of the <input> element.

It is possible to argue that the solution above was the only way in early browsers to layout properly. However, this particular code is lifted from a website that was developed in early 2003, so this clearly constitutes a bad habit we must break.