Cross-browser Testing: Best Practices and Useful Resources

Cross-browser testing: it’s one part of the process that many front end developers hate, but it’s also an extremely essential part of the process for any site or application. From vendor prefix solutions to cross-browser testing resources, this article will provide some useful information that might just help your headache. I’ll list some of the best practices to use in your coding, along with some JavaScript and Sass library essentials. Lastly, I’ll recommend a few of my favorite tools for testing across every browser and device.

A great way to save hours of time is to always keep cross-browser best practices in mind throughout the process of developing a new site. Here’s a list of the 6 best cross-browser practices that I would recommend for everyday use. You should implement these from start to finish:

1. Choose Your Components Wisely

Whether you’re using Foundation, Bootstrap, or another front end framework, it’s always good to keep an eye out for which components you’re using in your projects, and whether they are compatible throughout. Foundation components allow you to quickly prototype or customize every aspect of your app in the most efficient way in order to build what you need. Components are used in almost all of our projects, so after experimenting with most of the Foundation core components, I know which ones are most useful and reliable.

Now, when I’m using any Foundation component that involves the implementation of another JavaScript component, I always take extra time out of my day to do a quick cross-browser check to make sure everything works properly. By making a habit of checking each component as you code them when it’s fresh in your mind, this will save tons of time and frustration later on.

2. Include Vendor Prefixes

Luckily, with most up-to-date front end frameworks, there are global vendor prefixes included in their default style sheets. It’s always still important to know the best ways to implement vendor prefixes if this is not the case. For flex properties and other CSS3 properties, it’s smart to check the overall browser support so you can stick those vendor prefixes in your style sheet right then, without having to go back and do it later.

A handy site to bookmark for this topic, caniuse, might be the answer to a lot of your problems. It shows compatibility tables for numerous technologies in every browser.

Autoprefixer is another great resource for de-cluttering your style sheets with any unnecessary vendor prefixes. This site will generate the needed prefixes in your CSS or let you know what can be removed.

3. Add your app to the home screen on your iOS device

An important feature to lend your attention to is the ability to add your site as a home page icon on any mobile or tablet device. This gets tricky, because a lot of new bugs can come into play. You’ll need to test in both the browser and from the homepage screen on your phone. I’ve caught a few bugs that have only come to light on the full-screen version of an app, whereas everything looks fine in the browser.

One example of a major bug that I found was an issue with form inputs on their focus state and fixed navs combined on the same page on iOS devices on the home screen app only. When the input is focused for the user to type, the fixed nav doesn’t stay docked to the top (or bottom) of the screen. Instead, it floats in the middle of the screen as you navigate to the next form input. This is an iOS bug that I took much time to look into, and I wouldn’t have caught it without adding the app to the home screen.

In addition to this topic, it’s also important to upload your favicon and app icon sizes. There are a ton of decent favicon generators out there to use, like favicomatic or favicon generator. Just make sure you are generating all of the needed sizes for your icons. It may compile into a long list, but you want to ensure that all sizes on every type of device is covered.

4. Write a Hack in your doctype for IE9 and below

Internet Explorer is pretty much the Grim Reaper of any beautiful, complex site. In some lucky cases, IE is not an important browser to worry about for the site you’re working on. But in many circumstances, the client will want IE to always function just as well as the other browsers do.

If this is the case, I will offer you a great solution for sites that won’t work well in IE9 and below. You can make style sheets to overwrite styles that need to be fixed for IE only, which is the easiest way to fix IE issues.

In your main header file, add this line where your fonts are imported and above where your main style sheets are imported:

<!--[if IE 9]><link rel="stylesheet" href="{{ "/css/ie9.css" | prepend: site.baseurl }}"><![endif]-->

The above code targets IE9 only. Please note that this is commented out.

In your main header file, you want this line as the last line (if you included Google Analytics in your head, this line should go ABOVE that):

<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="https://revelrylabs.wpenginepowered.com/css/ie8.css" /><![endif]-->

The above code targets IE8 and below. Please note that this is also commented out.

Then you can make ie9.scss and ie8.scssstyle sheets that target just those browsers. You would use the same classes as your other style sheets but those styles will only show up for whatever IE versions you targeted. CSS Tricks wrote a good post that breaks down how to create an IE style sheet for each version.

If you’re trying to trigger IE10 and above, unfortunately, the conditional commenting method no longer works because it’s been depreciated by Microsoft. If you want to learn how to trigger styling issues found in IE10 and above, check out this article for an explanation.

5. Use the right JavaScript Library or Task Runner

It’s also very important to use the right JavaScript resources that will fit your site’s needs and provide good browser support. Here’s a list of libraries or task runners that I compiled which provide the best browser support.

React

React is a JavaScript library for creating user interfaces. React is great because it allows you to create reusable components. By cutting down on component count, it de-clutters code, leads to easier navigation within the file tree, cleaner organization of file structure, and requires only a slight tweaking of styles for each component. React provides good browser support, including IE9 and above. Learn more on the official React website.

Grunt & Gulp

Using a task runner like Grunt or Gulp will run automated, repetitive tasks that will in turn allow you to do less work. They improve performance by providing compilation, minification, linting, and other tasks that only better your code when it’s compiled. I personally like using these task runners because they will notify me when there’s an issue in my style sheets. This helps with minimizing cross-browser issues in the long run.

Grunt and Gulp provide great plugins and they use the package manager of node.js, called npm. They can both be easily installed via the command line using their documentation on their sites.

6. Test on the Most Useful Cross-browser Resources

Xcode iOS Simulator

I find the Xcode iOS Apple Simulator to be a quick, but not so reliable reference while testing apple products in Safari. The simulator is great because it’s quick loading, while having the ability to change to any iOS device, and you can also inspect your code.

The Simulator is a great tool, but you also need to be aware that not all iOS problems will arise while inspecting your code. If an app has a large issue, it usually won’t appear in your simulator. Aside from that issue, users do tend to use Safari on their iOS devices moreso than on a desktop. Having the ability to cover MOST of your Safari bugs using one resource is a great plus.

To inspect your code using the simulator, simply open up Safari on your desktop, and choose Develop > Simulator > Select your simulator. This will open up the Safari code inspector, which works the same way as expected. To learn more about the Simulator’s useful tools, you can check out this Apple Developer article.

BrowserStack

BrowserStack is a great resource to use for cross-browser testing because it provides the widest range of iOS and Android devices, along with almost every browser type for different versions of Windows and OS X. In my experience, I’ve found their emulators to be pretty accurate. This is great for testing those insane IE bugs. It also has pre-installed de-bugging tools, and a new addition to BrowserStack is their “Recommended” toolbar, which recommends other devices to test on, based on market research. I generally like to test on these devices as I go along, to make sure you don’t miss anything.

The only downfall I find with BrowserStack is that the load time is insanely long. But if you have the time and patience, it’s an extremely useful tool to have.

The Chrome iOS Simulator

The Chrome Simulator is a good tool to use when you’re doing some quick iOS fixes while designing in-browser. It’s fast, convenient, and still provides a number of the essential iOS devices that need testing. Instead of wasting tons of time waiting for your Chrome browser to load in BrowserStack, give the Chrome Simulator for iOS a try.

The Most Important Cross-browser Testing Resource

By far, the most important cross-browser resource you MUST check is right in front of you: your phone, tablet, or any device you can get your hands on. Once you get your localhost up and running on your device, you’ll be set to test away. Check your testing thoroughly. There may be a major bug that only appears when using the actual product on the intended device(s).

If you would like to also set up remote debugging on Safari, all you need is your device and a USB cable. By following these steps, you can easily check DOM elements from your device and check the debugger on your desktop.

So there you have it! These are my 6 best cross-browser practices for everyday use. Make a timeline with these practices in mind, and keep up with the testing throughout each sprint. In the end, it will save you tons of time before your big launch date. Throwing in a little cross-browser testing here and there will have a huge return in the end. Happy testing!

---

JavaScript React Testing