If you are a WordPress developer, you have surely fought with WordPress cross-browser compatibility issues. In this tutorial, I will show you how to overcome many of the common issues that arise with some of the more common web browsers and devices while working with WordPress. This tutorial is aimed at more advanced WordPress users. Common users are not likely to run into nearly as many cross-browser compatibility issues due to the fact that these issues are dealt with in the WordPress core. More advanced WordPress users who develop custom themes, templates and/or plugins are very likely to run into many cross-browser compatibility issues however because they work within the core to develop more customized WordPress sites.
There you have it! Not too difficult even for the novice, learning WordPress guru. Just replace the alert with whatever code you need to implement for each device and you are all set.
In the above example we grab a variable number of table elements from within the WordPress loop using their class name. We then loop through the array of tables and dynamically change the width of each. This is just one example of browser or device specific changes you might need to implement while customizing a WordPress blog to suit you or your client’s needs. The same strategy can be used for an array of divs or any other element that has a class name and more than one instance on the page.
Using Separate Style Sheets for Different Browsers or Devices:
Start by copying your theme’s style.css file and altering it for devices and other browsers. Then you can include them as necessary for each device and browser you are having issues with. Have fun working out your cross-browser compatibility issues and I hope this tutorial has helped you figure out your unique issues. Also, start with Firefox as it is a standards-compliant browser. Then you can tweak your styles for the other browsers out there. Of course, I know some of you have strong opinions about what browser is best, so I’ll leave that up to you.