Seamless iframes

HTML5 Logo by World Wide Web Consortium

One of the interesting additions of html5 is the the notion of seamless iframe, that is, an iframe that looks like it is part of the parent web-page, inheriting its styles and such. While this feature is not widely available, in fact the Webkit nightly only had it for a few days, I found some interesting use for it: testing new blog posts.

While WordPress offers some modicum of WYSIWIG editing, I tend to write the html myself, partly because I have heavily customise the CSS of the blog, partly because I tend to use features that are awkward to use in an editor, like tables, or are not supported at all, like using non-breaking thin spaces in front of punctuation in French texts, i.e. following the typographical rules.

More and more, I write the blog entry in a text-editor, which is more confortable and much faster than using a web-interface (I know, I’m old school). This also has the advantage of working offline, which in a country where trains tend to go through tunnels, is a nice advantage. Still it would be nice to be able to preview the general look of the page.

Now I can do this using a seamless iframe. To do this I wrote a minimal web-page that mimics the general structure of a WordPress blog, it basically loads the CSS, sets a few structural divs, and that’s it. This div in turn includes a minimal web page that contains the content of the blog entry, encapsulated in a single div that needs to be emulated.

You can have a look at the test frame, the actual blog-post snippet is here. Of course this will only work with a web-browser that supports seamless iframe.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.