Chapter 9. Solving Cross-Browser Issues

In the previous chapter, you learned all about testing the custom responsive visualizations in different browsers. We have to do this because, across different devices, operating systems, and browsers, the appearance and functionality of our application can vary. In this chapter, we will tackle these cross-browser issues. You will learn the following:

• Understanding the main challenges of cross-browser compatible visualizations

• Using Modernizr to detect the feature support of the user's browser

• Learning about Polyfills, Shims, and Wrappers

• Understanding the compatibility of D3

• Implementing a cross-browser responsive design

• Understanding the matchMedia polyfill

• Polyfill min-width and max-width with Respond.js

• Implementing your Media Queries in JavaScript using Enquire.js

• Learning about the compatibility of SVG features

• Understanding compatibility for mouse and touch events

• Understanding the execution chain of touch events

• Building touch-friendly visualizations...

A solution to cross-browser compatibility issues

The real challenge of developing web applications is not about implementing awesome features, animations, or transitions, but it is about providing a first-class user experience and compatibility for all target devices, operating systems, and browsers. In this chapter, we will try to solve the most common compatibility issues and make your visualization cross-browser compatible.

Conditional comments for Internet Explorer

A great tool in every web developer's toolbox for solving compatibility issues is conditional comments for HTML. These are the HTML comments that can contain valid HTML code, which are interpreted and executed by Internet Explorer. Wait a second, a cool feature that is only available in Internet Explorer? Well, it turns out that these conditional HTML comments are not necessary in modern web browsers as these browser rather implement the proper standard than proprietary features.

Hence, conditional comments are a great way for...

Cross-browser Media Queries

When creating cross-browser responsive visualizations, you will most likely have to deal with the Media Query support, measurement, and unit issues. The last two can be easily detected and fixed using Modernizr (cssvhunit, cssvmaxunit, cssvminunit, cssvwunit, and more) and fallback solutions.

However, fixing the Media Query support once it is not available is quite tricky. Why is that? If detecting the availability of Media Queries is quite easy (using Modernizr), polyfilling it is a big hassle. The main reason is that Media Queries usually occur in your CSS styles and not in your JavaScript code. Until now, you only learned that JavaScript functions and APIs can be polyfilled using JavaScript. So, if we would want a polyfill for CSS (it has to be written in JavaScript), it always has to parse the complete CSS document to extend its functionality. This means instead of the native styling performance, we will have to parse the CSS using JavaScript, apply all known...

Cross-browser SVG features

We already saw in the previous chapters that SVG is only supported by Internet Explorer 9 and higher versions. Providing a complete cross-browser compatibility for the previous versions of Internet Explorer is not impossible but challenging. Theoretically, you can use a wrapper (for example, Raphael.js) to convert D3's output into the valid VML; however, this is tricky, difficult, and not a good solution performance wise. In this case, it would be even better to not use D3 at all for this problem as it will not give you additional benefits.

Whenever we spoke about SVG support, we were speaking about the basic SVG support and hence the SVG 1.1 specification. However, there are more interesting features that you can use in your application, where some of them have a different compatibility. Let's look at these features.

SVG animations

We have already talked about SMIL animations in the previous chapters; however, we want to bring it up again. Although compatibility...

Handle touch and mouse events with ease

Until now, we have always tried to provide both touch and mouse events for users on a mobile device and on PC or television screens. With D3, we treated a touch event exactly as a mouse click event but only with a different interaction radius. However, it can easily happen that a user has both touch (or multi-touch) and a mouse as input devices. In this section, we solve caveats for developers when providing both input types for the user.

Mouse and touch events

Why could we use a mouse click event to also detect finger touches on a touch screen? To answer this question, we will take a look at the execution chains of events on a target DOM element mouse and go into touch-enabled device. We combine them into one execution chain for touching a target element on a touch device with the finger. Here is the list of events that will be propagated:

• touchstart: The fingertip touches the screen

• touchmove: The fingertip moves on the screen

• touchend: The fingertip...

Summary

In this chapter, you learned how to solve the most common cross-browser issues with the best tools. With Modernizr, we can build a lightweight script that detects supported browser features in CSS and JavaScript. We can provide polyfills or use a wrapper whenever it is necessary.

For creating an SVG visualization using D3, we need to be aware of the restrictions from the supported SVG specification. Hence, we need to take special care when dealing with filters, animations, and clipping paths.

You learned how to create responsive visualizations that work across all browsers. One key thing to remember when using Media Queries is the matchMedia polyfill, which is commonly used by other tools to polyfill the native JavaScript function. Respond.js is a great polyfill for simple CSS Media Queries, and Enquire.JS motivates you to move your Media Queries to JavaScript.

Finally, we discussed different mouse- and touch-related problems and a solution for building cross-browser compatible applications...