I am reading my HTML book and it states that iframe's scrolling and frameborder attributes are not supported in HTML5. The following code is declared in the book:
<iframe
src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed"
width="450"
height="350"
frameborder="0"
scrolling="no">
</iframe>
How comes the frameborder still works, if HTML5 does not support frameborder? If I don't put in that frameborder="0" line, the browsers load it with a frame around the image, while the frameborder="0" line takes out the frame. I thought this attribute is not supported in HTML5?
At the same time, scrolling seems to obey the rule of it not being supported in HTML5, as that line makes no difference at all (whether i set it to 0 or 1). The scrollbar is not shown either.
I am learning HTML at the moment, but this is so bizarre to me. Can someone help clarify this for me by any chance? I tested this in both Firefox and Chrome.
The book has got it wrong. Specifications (or, in this case, draft specifications) do not “support” elements or attributes; browsers do. Specifications define elements and attributes, and they present conformance clauses that say that conforming browsers must support elements and attributes so-and-so. This generally does not exclude the possibility that conforming browsers support other elements and attributes as well. Besides, browsers may be non-conforming; in fact, there is probably no browser that conforms to any HTML specification or draft, strictly speaking (though the conformance might be “good enough”).
In the case of frameborder and HTML5, the HTML5 Proposed Recommendation specifies that browsers are expected to support the attribute. Clause 10.4.3 Attributes for embedded content and images says that certain CSS rules “ are expected to apply as presentational hints”, and they include the following:
iframe[frameborder=0], iframe[frameborder=no i] { border: none; }
This means that if an iframe element has the frameborder attribute with the value 0 or no (case insensitively), this corresponds to the CSS setting border: none on that element (defined to have specificity 0, so any explicit CSS setting of border on the element overrides it).
If this sounds odd, see section Conformance requirements. HTML5 has double standards, in the sense that it prohibits authors/document from using some constructs and yet requires or recommends browsers (and other user agents) to support them. So if you use frameborder, your document is non-conforming. Yet it is “expected” to be supported in a specific way.
The situation is in principle similar with the scrolling attribute. Its expected effect is that values on, scroll, and yes cause scrolling bars (like overflow: scroll), values off, noscroll, and no prevent scroll bars; and value auto causes scrollbars when content does not fit (the default). However, none of Firefox, Chrome, IE seems to support the values that cause scrolling bars unconditionally, and only Firefox supports all of the values that prevent them, whereas Chrome and IE support just no.
This is understandable in the sense that scrolling=no is the attribute that browsers have traditionally supported. The other values are more or less an invention in the HTML5 draft, probably supposed to cover some values actually in use or supported.
The bottom line with this is that scrolling=no works. To cause scrollbars even when not needed for the content, scrolling=yes is not useful in practice (the corresponding CSS setting works).
The frameborder attribute is not supported in HTML5. Use CSS
instead.
The frameborder attribute specifies whether or not to display a border
around an .
Tip: It may be better to NOT specify a frameborder, and use CSS to
apply borders instead.
http://www.w3schools.com/tags/att_iframe_frameborder.asp
HTML5 and frameborder
HTML5 : Iframe No scrolling?
http://www.maxdesign.com.au/2011/03/10/iframe-scrollbars-and-html5/
How comes the frameborder still works, if HTML5 does not support frameborder?
Because HTML 4 defines frameborder and browsers haven't stopped supporting it.
You should still use CSS instead though.
Related
<!DOCTYPE html> specifies the page as html 5. But, when I used <center>, it can still center the content. Why <center> can still work in html 5 as I read from http://www.w3schools.com/tags/ that <center> is supposed to not work?
The tag is obsolete since HTML4. But it is still supported in some browsers even now. MDN advices to not use it
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
Use css text-align: center instead.
It's not part of the specs anymore but it's up to the browser whether or not they still support the tag. Most browsers will to make sure older code still works.
But, since it is deprecated you should not use it in new code. Go with CSS to get your stuff centered.
Browsers may still support it and at some point they will not. Take at look at this page to see if you can use or should use an html element, css property and more: http://caniuse.com/#search=center
Since HTML4, <center>, and other presentation tags (such as <blink>) has been deprecated from HTML specs, and removed in HTML5 specs.
Those tags should be replaced by other content tags (the most abstract one being <div>) in addition to CSS for the styling they did provide.
But since those tags don't lead to any security issue, (contrary to <frame>) they may still be supported by browsers for compatibility issues.
Even if today, google's main page still uses it, you should prefer to use an other content tag with proper CSS styling.
Should I still use "seamless" attribute inside <iframe> tag in html or is it dead in html5 (at least I saw one page that told this). So should I still learn it or its not worthy? Thanks for answers.
According to Can I Use, there are no current browsers that support the seamless attribute for iframes.
The seamless attribute makes an iframe's contents actually part of a
page, and adopts the styles from its hosting page. The attribute has
been removed from both the WHATWG and the W3C HTML5 specifications.
<!DOCTYPE html> specifies the page as html 5. But, when I used <center>, it can still center the content. Why <center> can still work in html 5 as I read from http://www.w3schools.com/tags/ that <center> is supposed to not work?
The tag is obsolete since HTML4. But it is still supported in some browsers even now. MDN advices to not use it
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
Use css text-align: center instead.
It's not part of the specs anymore but it's up to the browser whether or not they still support the tag. Most browsers will to make sure older code still works.
But, since it is deprecated you should not use it in new code. Go with CSS to get your stuff centered.
Browsers may still support it and at some point they will not. Take at look at this page to see if you can use or should use an html element, css property and more: http://caniuse.com/#search=center
Since HTML4, <center>, and other presentation tags (such as <blink>) has been deprecated from HTML specs, and removed in HTML5 specs.
Those tags should be replaced by other content tags (the most abstract one being <div>) in addition to CSS for the styling they did provide.
But since those tags don't lead to any security issue, (contrary to <frame>) they may still be supported by browsers for compatibility issues.
Even if today, google's main page still uses it, you should prefer to use an other content tag with proper CSS styling.
Padding is never the same in Firefox and IE, while IE adds padding to the height and width, Firefox just ignores it. what is the correct interpretation and what is the nest way to achieve the same look in all the browsers. Does firefox and Ie differ in margin a well?
In modern browsers, you can use the box-sizing CSS property to instruct the browser about the exact box model you want. If such property is missing, all browsers built since year 2000 (aprox.) will default to the good old W3c box model. In such model, neither margin nor padding are part of the content dimensions (width and height), as this figure illustrates.
In practice, I'd dare say that 99% of web sites rely on the latter, and the rest are legacy sites that were designed for Netscape and Internet Explorer 4 and have been abandoned since then.
If you need to support very old versions of Internet Explorer, make sure you have valid HTML with an appropriate DOCTYPE. Otherwise, IE will render under quirks mode and might revert to old box sizing model.
You need to use a reset CSS to ensure the different defaults the different browsers have chosen are neutralized.
The differences you see are due to different default values for margin and padding that each browser has for different elements.
One additional wrinkle is that some browsers require some content to be in a container (say table cell or div) before applying width/height to it. This can easily be done by adding a non-break-space - .
All browsers from the last 10 years render the box model correctly IF you are not running in compatibility or quirks mode. That means you have to have a valid doctype, it must be on the first line (anything before the doctype throws IE into quirksmode) and you can't do illegal things that also throw it into quicksmode.
If you have valid content, with a valid doctype, content will render the same.. although different browsers may have different default values for some styles, which is where a good html reset file comes in handy. This levels the playing field so all browsers have the same default styles.
in HTML5 the iframe has new attributes like 'seamless' that should remove borders and scrollbars. I've tried it but doesn't seem to work, I still can see scrollbars and borders (I'm using Google Chrome as browser), Here's my code:
<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>
Any idea why it's not working?
One more question, is it possible to target a specific section of the page inside the iframe?
Updated: October 2016
The seamless attribute no longer exists. It was originally pitched to be included in the first HTML5 spec, but subsequently dropped. An unrelated attribute of the same name made a brief cameo in the HTML5.1 draft, but that too was ditched mid-2016:
So I think the gist of it all both from the implementor side and the web-dev side is that seamless as-specced doesn’t seem to be what anybody wanted to begin with. Or at least it’s more than anybody actually wanted. And anyway like #annevk says, it’s seems a lot of it’s since been “overcome by events” in light of Shadow DOM.
In other words: purge the seamless attribute from your memory, and pretend it never existed.
For posterity's sake, here's my original answer from five years ago:
Original answer: April 2011
The attribute is in draft mode at the moment. For that reason, none of the current browsers are supporting it yet (as the implementation is subject to change). In the meantime, it's best just to use CSS to strip the borders/scrollbars from the iframe:
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
There's more to the seamless attribute than what can be added with CSS: part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe (acting as though the embedded document was one big nested inside the element, for example).
Lastly, versions of Internet Explorer (8 and earlier) require additional attributes in order to remove the borders, scrollbars and background colour:
<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>
Naturally, this doesn't validate. So it's up to you how to handle it. My (picky) approach would be to sniff the agent string and add the attributes for IE versions earlier than 9.
According to the latest W3C HTML5 recommendation (which is likely to be the final HTML5 standard) published today, there is no seamless attribute in the iframe element anymore. It seems to have been removed somewhere in the standardization process.
According to caniuse.com no major browser does support this attribute (anymore), so you probably shouldn't use it.
It's not supported correctly yet.
Chrome 31 (and possibly an earlier version) supports some parts of the attribute, but it is not fully supported.
It is possible to use the semless attribute right now, here i found a german article http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html
and here are another presentation about this topic: http://benvinegar.github.com/seamless-talk/
You have to use the window.postMessage method to communicate between the parent and the iframe.
I thought this might be useful to someone:
in chrome version 32, a 2-pixels border automatically appears around iframes without the seamless attribute.
It can be easily removed by adding this CSS rule:
iframe:not([seamless]) { border:none; }
Chrome uses the same selector with these default user-agent styles:
iframe:not([seamless]) {
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
iO8 has removed support for the iframe seamless attribute.
Tested in Safari, HomeScreen, new WKWebView and UIWebView.
Full Details and performance review of other iOS 8 changes:
iOS8 changes on Cordova mailing list
Sencha.com Blog : Apple Shows Love for HTML5 with iOS 8
You only need to write
seamless
in your code. There is not need for:
seamless ="seamless"
I just found this out myself.
EDIT - this does not remove scrollbars. Strangely
scrolling="no"
still seems to work in html5. I have tried using the overflow function with an inline style as recommended by html5 but this doesn't work for me.
Use the frameborder attribute on your iframe and set it to frameborder="0" . That produces the seamless look. Now you maybe saying I want the nested iframe to control rather I have scroll bars. Then you need to whip up a JavaScript script file that calculates height minus any headers and set the height. Debounce is javascript plugin needed to make sure resize works appropriately in older browsers and sometimes chrome. That will get you in the right direction.
Still at 2014 seamless iframe is not fully supported by all of the major browsers, so you should look for an alternative solution.
By January 2014 seamless iframe is still not supported for Firefox neither IE 11, and it's supported by Chrome, Safari and Opera (the webkit version)
If you wanna check this and more supported options in detail, the HTML5 test site would be a good option:
http://html5test.com/results/desktop.html
You can check different platforms, at the score section you can click every browser and see what's supported and what's not.
I couldn't find anything that met my requirements, hece I came up with this script (depends on jQuery):
https://gist.github.com/invernizzie/95182de86ea9dc5daa80
It will resize the iframe to the viewport size (taking into account wider content).
It could use an improvement to use the viewport height instead of the content height, in the case that the former is bigger.