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 calledsandbox
,seamless
, andsrcdoc
which allow for sandboxing content, e.g. blog comments.”
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).”
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“