frameborder setting
within an
iframe element, e.g., frameborder="0" to prevent a border
around the iframe, if you check the webpage with the W3C
Nu Html Checker, which
validates
HTML5 code,
you will see the following message:
Error The frameborder attribute on the iframe element is obsolete. Use CSS instead.
The CSS alternative listed at Presentational elements and attributes is "'border' on iframe". So if you have the following:
You can substitute the following, instead:
Or you can use the following HTML code, instead:
Another obsolete element in HTML 5 that applies to iframes is the scrolling attribute. E.g., if you check a page that contains HTML code similar to the following with the Nu Html Checker, you will see a message indicating that the scrolling attribute is obsolete:
Error The scrolling attribute on the iframe element is obsolete. Use CSS instead.
The CSS alternative listed at Presentational elements and attributes is to use "'overflow' on the root element in the containing document".
I've found several webpages where people have stated the solution to avoid
scroll bars on an iframe is to apply style="overflow:hidden" to
the iframe itself. E.g.,
How to fix: The scrolling attribute on the iframe element is obsolete. Use CSS
instead. So if you have the following:
The suggested substitute would be the following, instead:
You can obtain additional information on the overflow property at CSS overflow Property.
E.g., below is an iframe with scrolling="no":
And the same code except for scrolling="yes":
And the same code with style="overflow:hidden;", instead:
As you can see, it doesn't work; the scrollbar still appears. Yet,
I've found many webpages where people have stated that is the
solution to avoid scroll bars on an iframe. But I have found
other postings indicating that overflow: hidden
won't work for iframes, e.g., James Donnelly's response to HTML iframe - disable scroll on Stack Overflow.
For this example, since I control the source document I'm including using
iframe, I can put style="overflow:hidden;" on
the body tag of the included document, i.e.
<body style="overflow:hidden;">, instead. That works and
is an instance where I'm applying it to "the root element
in the containing document", but that's not helpful in cases where
the page included is from someone else's site, such as an Amazon ad, etc.
E.g., below is the same example where the "overflow: hidden" is applied
to the body tag in the included document which prevents the appearance of a
scroll bar.
I've also tried applying style="overflow:hidden;" on a
surrounding div, instead, since I've seen some postings indicating that
might eliminate the scrollbars, but it hasn't helped as shown in the
example below:
Since, though the scrolling= attribute is deprecated with
HTML 5,
it is still understood by browsers in use today, I'm going to continue
to use it and just ignore messages indicating the attribute is obsolete when
I check pages for their HTML 5 validity. If I check pages with validators
that check for compliance with HTML 4.1, I don't see any complaints about the
code.
References: