By David Stephens
On March 5, 2013

On February 26th 2013, Adobe launched version 4 of Adobe Muse which includes several improvements to the HTML/CSS that Muse generates for websites. These improvements continue the trend of improving Muse output with each release that I described in Code Improvements in Muse 1.0 and 2.0 and Have you looked at Muse lately. This post describes some Muse 4.0 improvements that improve rendering and performance in Internet Explorer and mobile browsers.

Internet Explorer Improvements

Internet Explorer is the problem child of desktop browsers, especially versions 8 and earlier. Most modern desktop and mobile browsers natively support the ‘border-radius’ CSS property to specify rounded corners, the use of ‘rgba’ to specify a transparent color as a background fill, drop shadow or gradient stop, and support the ‘opacity’ CSS property for specifying the opacity of an entire element and all of its children.

There are multiple strategies that can be employed for dealing with object opacity, transparent background fills, transparent shadows, rounded corners and other properties that IE does not support. An ‘-ms-filter’ can be used for object opacity and transparent gradients. A JavaScript libary, such as CSS PIE, can be used for a teransparent background color and for rounded corners. Generating a solid shadow color that closely matches the transparent color by tinting the shadow color by the alpha value and matting against a color that is behind the shadow can sometimes be effective. However, mixing these strategies can yield very undesirable results as libraries like PIE do not blend well with ms-filters. Let’s look at how Muse 4 deals with some of these issues.

Transparent Background Color (‘rgba’)

rgba solid fill with rounded cornersThe following CSS describes 3 different backgrounds for a rectangle with rounded corners. All browsers should recognize the first ‘background-color’ property as it simply specifies a 100% opaque ‘rgb’ value expressed as a hexadecimal value. The second ‘background-color’ property is recognized by most modern browsers, which will use this property instead of the first because it appears later. The third property, expressed as a ‘-pie-background’, is recognized by the CSS PIE JavaScript library which will use it to render an ‘rgba’ color in IE 7 and 8 but will ignore it for IE 9 and newer.

 

#rect1
{
    ...
    background-color: #7F7FFF;
    background-color: rgba(0, 0, 255, 0.5);
    border-radius: 10px;
    -pie-background: rgba(0, 0, 255, 0.5);
}

It is worth pointing out that the first background color is carefully chosen to be a 100% opaque version of the transparent color that closely resembles the ‘rgba’ color if it were on a white background. Muse tints the ‘rgb’ portion of the color by the alpha value and mattes the color with a white background. Early versions of Muse would have simply dropped the alpha value and used the ‘rgb’ portion unchanged. Unfortunately, if the desired opacity is quite small such as 5 or 10%, you would instead get a very vivid 100% version of the color.

The difference between a 50% tinted blue matted against white compared to 100% blue.

A 50% tinted blue matted against white compared to 100% blue. Muse 4 outputs the 50% tinted blue as a fallback for browsers that do not support ‘rgba’ nor PIE.

 

Transparent Gradient

Simple rectangle with transparent gradient fill.There are at least three approaches to representing this gradient fill in our CSS. Muse chooses the optimal approach depending how other effects, such as rounded corners, will be represented.

 

Approach 1: Image Slicing As A Fallback

The first approach, which early versions of Muse adopted, takes advantage of the fact that every horizontal slice of the gradient is identical and simply creates a 1 pixel tall image and sets it as the background and repeats it vertically. This approach works well except for cases where the width of the rectangle might change and except for the fact the image must first be downloaded to the client machine before it can be rendered in the browser.

rect2
{
    ...
    background: url("../images/u84-grad.png") repeat-y left top;
    background: linear-gradient(to right,rgba(255, 255, 0, 0.5) ,rgba(0, 0, 255, 0.5) 100%);
}

Approach 2: Use PIE for IE 7 and 8

The second approach is to use a JavaScript library, such as CSS PIE, to render the gradient in IE and native support for a ‘linear-gradient’ set as a ‘background’ CSS property for all other browsers. This approach works well for opaque gradients and for all browsers except IE 8 and earlier because PIE does not support transparent color stops.

rect2
{
    ...
    background: linear-gradient(to right,rgba(255, 255, 0, 0.5) ,rgba(0, 0, 255, 0.5) 100%);
    -pie-background: linear-gradient(left,rgba(255, 255, 0, 0.5) ,rgba(0, 0, 255, 0.5) 100%);
}

Approach 3: Use -ms-filter For IE 7 and 8

The third approach is to use a ‘linear-gradient’ set as a ‘background’ CSS property for all browsers that support it and use -ms-filter for IE 8 and earlier. This approach works well as long as PIE is not used to render some other IE deficiency such as rounded corners. This approach is the most preferable because it avoids having to load the PIE JavaScript and there is no delay while PIE renders the fill.

rect2
{
    ...
    background: linear-gradient(to right,rgba(255, 255, 0, 0.5) ,rgba(0, 0, 255, 0.5) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFFFF00', endColorstr='#7F0000FF', GradientType=1)";
}

Muse 4 prefers the third approach but will fall back to using one of the other approaches if JavaScript is needed to render another effect and that JavaScript conflicts with the -ms-filter.

Browser Rotation Via CSS 2D Transforms

CSS 3 introduced two dimensional transform properties that allow you to simply specify a rotation amount, for example, and let the browser rotate the object for you. Rotation in older browsers like IE 8 is typically accomplished by creating an image of the rotated object. The advantages of using 2D transforms are numerous including avoiding the costly expense of downloading an image of the rotated object, preserving the high quality rendering of vectors such as text and borders, and maintaining the ability to select text that has been rotated. In general, the rendering and performance is substantially better. IE 7 and 8 support rotation via an -ms-filter. Unfortunately, they do not rotate about the center point like modern browsers do forcing the adjustment of the objects margins. Doubly unfortunate, the effect of adjusting the margins causes different behaviors between IE 7 and IE 8. These problems are solvable using a polyfill and we’ve laid a lot of the groundwork to support rotation in IE 7 and 8. For Muse 4, you can take advantage of CSS 2D transforms in phone and tablet layouts and we expect to support 2D transforms in desktop layouts in the near future.

Rotated text using CSS.

Above is an example of a rectangle that has been rotated using CSS. Try zooming in or selecting the text.
u101-4

Above is an example of a rotated rectangle that has been rasterized. Try zooming in to see the pixelation compared to the CSS rotated version and note you cannot select the text.

Muse 4 includes several other improvements and we are actively working on improvements for future releases.

 

COMMENTS

  • By Tayaout-Nicolas | Formateur agréé - 7:19 AM on March 6, 2013  

    Nice !

    Thank you

    Tayaout-Nicolas | Formateur agréé
    info@tnformation.com

  • By Karim Ardalan - 11:40 AM on March 13, 2013  

    I was wondering why you don’t support modern browsers by default and then have a preference setting for people who want to support older browsers? Seems like a much better approach than outputting extra code just in case someone cares about supporting an old version of IE?

    I would even be OK with having the ability to turn off support for older browsers if you wanted to leave it on by default as long as I get cleaner code.

    • By David Stephens - 3:47 PM on March 15, 2013  

      It is an interesting question. Depending on whose market research you trust, IE 8 still commands somewhere between 10 and 20% of global browser usage. For this particular feature, it is less effort to write the polyfill for IE than it is to add a feature that allows you to specify how to export. That is not to say that we have ruled out the possibility of adding additional controls in a future release.

      Thanks for the feedback.

  • By Scott Carrey - 1:41 PM on March 13, 2013  

    Thank You, these are some nice improvements. Keep up the great work, I love Muse!

  • By Sean Boone - 2:32 PM on March 13, 2013  

    Cool improvements team. Muse is getting better and better, and easier / faster to use as you guys are updating… thank you.

    When will you guys add support for working off of a network? Muse currently still runs very slow for me when working on a file that lives on a server and not my local hd.

  • By Kathryn Hayden - 6:24 AM on March 15, 2013  

    interesting to see approach taking. I concur with Karim — having option to turn on/off support for older browsers.