Adobe

decor

Web Platform Team Blog

Making the web awesome

iframeflow.js

The CSS Regions specification is currently supported by Internet Explorer 10+ and Safari (OSX and iOS). Though generally very close, the IE implementation was based on an earlier draft and works differently. In particular, the source of a named flow – the elements you apply the -ms-flow-into property to – must be iframe elements. This approach has some benefits: it allows the use of content from any source, including cross-domain content, with all the security benefits of an iframe. The standard specification, however, chose to limit named flow content to the current document using any element type.

This makes using CSS Regions in both environments slightly challenging. Since the WebKit implementation is easier to use – no iframes needed – and reflects more recent spec drafts, we attempted to write a JavaScript library that would let a region chain authored for Safari work in IE. The result is iframeflow.js.

How It Works

iframeflow simply generates the iframe required by IE and copies named flow content to the iframe document. It can either do so automatically by scanning the page’s stylesheets for named flows; or it can create an IE named flow from an arbitrary selector.

Caveats

Of course, this library only helps in IE. To emulate CSS Regions across browsers, you should use the CSS Regions polyfill. But if your iOS app uses Regions in a WebView, iframeflow.js could help you produce a Windows 8 app with the same content.

Other known limitations include cross-domain stylesheets (their object model is off-limits). If the style of elements in your named flow depends on their ancestry – e.g. because they match child or descendant selectors – this styling may no longer apply in the iframe document. Other constraints are listed on the project page.

Tinkering

The source code is available on GitHub. Please let us know if you have any feedback. You can do so through GitHub issues, on this blog, or via twitter @adobeweb.

Comments are closed.