title: Best approach to handle JS for browser dependent system
body: <p>I'm developing a system, where the user is able to design their websites - either using ready-made templates or designing templates from scratch. I'm about to complete the system and it is compatible with Firefox. For this system, I have used  jQuery drag-and-drop plug-ins, TinyMCE, range object and stylesheet DOM object. As of now, it works properly with Firefox, but I need to make it work smoothly on IE8, IE7, Safari and Chrome. I'm a bit confused here about how to handle the whole JS section for all the browsers.</p>
  
  <p>I'm thinking of two options - </p>
  
  <ol>
  <li>Use single JS file for all the browsers. But, this will increase the file considerably.</li>
  <li>Check the browser and use browser specific JS file. In this case, the JS file size will be moderate, but synchronizing future changes will need changes in all the files.</li>
  </ol>
  
  <p>Kindly suggest which approach will be better to make the system consistent and stable.</p>