Max Design

Exciting, engaging websites

  • Home
  • About
  • News
  • Articles
  • Training
  • CSS

Recent Posts

  • Links for light reading (13/10/15)
  • Links for light reading (5/10/15)
  • Links for light reading (21/8/15)
  • Links for light reading (10/8/15)
  • Links for light reading (27/7/15)

Follow

  • Twitter
  • Linkedin
  • Slideshare

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

March 10, 2011 by Russ Weakley

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“

Filed Under: Articles

Contact us

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter
© 2016 Max Design

Copyright © 2022 · Parallax Pro Theme on Genesis Framework · WordPress · Log in