I just finished up my HTML/CSS portion of the Online Developer Program. As a former Project Manager, it was eye-opening to see it from the development side. Since helping out with some QA in the last couple years, I’ve been interested in how you can get your site to render well across various browsers. So, I’ve collected some tips. These tips were compiled from my learnings in the Online Developer Program and various Google searches. Hopefully, I am not sharing outdated information (if so, tweet me).
- Declare your doctype
- Validate your HTML & CSS
- Use feature/behavior detection like Normalize or Modernizr in your code
- Test across multiple browsers with testing tools
- Check your site visitor’s browser preferences and prioritize the top browsers for manual testing and fixing (global stats can be found here)
- Use the CSS box model with the
box-sizingproperty - Understand CSS measurment options
- Use clearfix
- If you need to make tweaks for old versions of IE, try conditional comments