User Tools

Site Tools


ce4_legacy_browser_simulation

Legacy Browser Simulation

The CE4 plugins include CSS3-based features which are partially or entirely unsupported in older web-browsers, such as Internet Explorer 8 and 9. This document addresses these “legacy” browsers, and includes information on how to best accommodate these browsers using features built into the CE4 plugins.

Using the Legacy Browser Simulation control group in CE4, it is possible to simulate what you design might look like in IE9 or IE8. To enable these views, enable the appropriate checkbox.

By enabling the Simulate IE9 and Simulate IE8 features before exporting your gallery, you can easily identity existing usability features for these less capable browsers, and make design adjustments to accommodate them. Read through the scenario below as an example.


Consider this:

Here we have white text in our masthead, sitting on a translucent white background.

We can easily see the text because:

  • the applied text-shadow offsets the text from the background
  • the background's translucence allows the page background color to show through, further offsetting the text-color.

But what happens when we lose our CSS3 effects in older browsers? Well, we're left with solid white text on a solid white background, making our masthead titles invisible:

In this case, we should use the Masthead Fallback Color to create a safety net:

Which gives us this in our legacy browsers:

So, to give an idea of how this plays out as we fallback to sequentially older browser versions, let's look at screen captures from the last several Internet Explorer versions.

in IE 10 :

In IE10, we have support for the border-radius, box-shadow, linear-gradient, and text-shadow properties, and for RGBA colors with alpha transparency, and so we suffer no compromises.

in IE 9 :

In IE9, we have support for the border-radius and box-shadow properties, and for RGBA colors. But we've lost support for the linear-gradient and text-shadow properties. We've lost a lot of pop, but our design is still perfectly functional, the white masthead text is nicely offset from the translucent white background, thanks to the page background-color coming through.

in IE 8 :

By the time we fall back to IE8, we've lost all CSS3 support. Border-radius and box-shadow are gone, and so is our alpha transparency. Here, white text on a white background would be completely invisible, and so it's good that we've used our Masthead Fallback Color to setup (nearly) black text for this scenario.

Legacy Browser Simulation and the Mobile Layout

You can switch on the Legacy Browser Simulation, then resize the LR Web preview to go into the collapsed, mobile layout. I wouldn't worry about this, though. Modern mobile devices are all very capable in terms of CSS3 support, and the legacy browser simulations are really intended for old desktop browsers. Mobile Safari (iPhone, iPad) and Mobile Chrome (Android) are great, and the most recent generations of the Windows phone platform (Windows Phone 7 and Windows Phone 8) run IE10 and IE11, respectively.

To wit, you don't need to worry about the legacy browser view for the mobile layout.

ce4_legacy_browser_simulation.txt · Last modified: 2014/01/08 05:21 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.