iframe scrollbars and borders in HTML5 – working with “seamless”

Are you trying to use an <iframe> in your HTML5 document and finding that there are some attributes that are not valid?

Chances are, you are using the frameborder and/or scrolling attributes.

<iframe src="" scrolling="no" frameborder="0"> </iframe>

In HTML5, these two attributes are considered obsolete. It is recommended that authors use a combination of CSS (to style the <iframe> as needed) and the new HTML5 seamless attribute.

For those that are not aware of the seamless attribute, here is some quick info.

The <iframe> element and allowed attributes

The HTML5 spec states under “new attributes”

“The <iframe> element has three new attributes called sandbox, seamless, and srcdoc which allow for sandboxing content, e.g. blog comments.”

Source

The <iframe> element now allows the following specific attributes:

<iframe 
	src=""
	srcdoc=""
	name=""
	sandbox=""
	seamless=""
	width=""
	height=""
	> 

</iframe>

You can also use global HTML5 attributes.

The seamless attribute

The seamless attribute is designed to make the <iframe> “seamlessly” look like it is part of the parent document. The HTML5 spec states this in a more formal way:

“it indicates that the iframe element’s browsing context is to be rendered in a manner that makes it appear to be part of the containing document (seamlessly included in the parent document).”

Source

Support for seamless

Here is a test page. Using various local browsers and Browserlabs for testing, it looks like the seamless attribute has little to no support at this time:

• IE6 – Windows: no support
• IE7 – Windows: no support
• IE8 – Windows – Windows: no support
• IE9 beta – Windows: no support
• Firefox 3.6 – Windows: no support
• Firefox 3.6 – OSX: no support
• Firefox 4.0 – beta Windows: no support
• Firefox 4.0 – beta OSX: no support
• Safari OSX: no support
• Chrome 7 – Windows: no support
• Chrome 7 – Windows: no support
• Chrome 9 – OSX: no support
• Opera 11 – OSX: no support

So, what is the solution? In most browsers, you can use CSS to remove the <iframe> borders. However, if the scrollbars are considered an issue, you may have to consider a JavaScript solution or using the obsolete scrolling attribute for the short term.

A note on Boollean attributes

The seamless attribute is a boolean attribute. A Boolean attribute is where the there can only be either a “true” or “false” value. The presence of the value means that it as “true” (such as the “checked” attribute on a form element), and the absence of the value means it is “false”.

If Boolean attributes are used, they must be written using one of these methods:

<!-- quoted -->
<iframe src="" seamless="seamless"> </iframe>
<iframe src="" seamless='seamless'> </iframe>

<!-- quoted and empty -->
<iframe src="" seamless=""> </iframe>
<iframe src="" seamless=''> </iframe>

<!-- minimised -->
<iframe src="" seamless> </iframe>

I’d recommend using mimimised attributes – along the lines of “My Preferred Syntax Style for HTML5 Markup“