So, I’d love to hear from you!

1. What’s your favourite online responsive design article/tutorial?
2. Have you built a responsive design site recently? If so, what was the single most important lesson you learned during the process (plus a URL if you’re willing to share)?

For those like me, who had no idea what language Belorussian is…

The Belarusian language is the language of the Belarusian people. It is the official language of Belarus, along with Russian, and is spoken abroad, chiefly in Russia, Ukraine, and Poland.

Belarusian language

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

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:

• src
• srcdoc
• name
• sandbox
• seamless
• width
• height

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
seamless="seamless"
seamless='seamless'

EMPTY
seamless=""
seamless=''

MINIMISED
seamless

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

• Hands-on CSS3 with Russ Weakley
• Hands-on HTML5 with Craig Sharkie

CSS3, the newest version of the style sheet languages, is much more than cool effects. CSS3 allows us to create beautiful web designs more efficiently and with more flexibility. This workshop will give you a clear understanding of CSS3 – not just for the future but for today! Hands-on CSS3 will give you a clear overview of all the key aspects of CSS3.

HTML5 is the latest and most powerful of the HTML markup langauges. This workshop cuts through the complexities and demystify HTML5, making it easy to understand and apply. Hands-on HTML5 will give you a clear overview of all the key aspects of HTML5.

Find out more