HTML5 で、scrolling 属性が削除されるという記述が良くありますが、実際は動作しています。削除されたのは『仕様』です。実際 iframe は広告・ツール等であちらこちらで利用されている現状で削除する事は簡単ではありません。 そんな中、Google Chrome だけが新しい仕様( seamless と srcdoc )を取り入れているので、ひょっとして最初に scrolling 属性を削除するかもしれないと推測はできますが、現実的では無いと思います。いかに Google と言えども人の作業が介在するので、このあたりは避けたいはずです。 また、Firefox だけが、scrolling がなくなる事を想定して、overflow:hidden が 対応されていますが、現状では css による変更は border:0px のみを考えるという状況に思われます。 iframe の背景透過 background-color の未指定時の透過処理は全てうまくいっていますが、IE8 以前では動作しません。 iframe 内で背景色を指定しない場合のみ、親ページでの背景色指定が有効になります。iframe 内で背景色を設定している場合親ページからの指定は反映されません。ただ、Windows Safari では動作が遅いせいか、親側の背景色が表示された上に後から( iframe がロードされてから )iframe 内の色が反映されるという状況でした。 Google Chrome の seamless の css 的効果 seamless は、Google Chrome だけでしたが、seamless 指定すると display:block となります。以下の例で縦にならんでいるのは、意図的に行っていますが、iframe はなにもしなければ横へ並びます。 スクロールバーが消える事はありませんが、border:0px と同じ効果がありました 現在最新のブラウザでのテスト結果 (2013/03/13)
| Chrome 25.0.1364.160 |
Firefox 19.0.2 |
IE 10 |
Opera 12.14 |
Safari 5.1.7 |
|
| srcdoc | ○ | × | × | × | × |
| seamless スクロールバーは 表示される |
○ display:block となる |
× | × | × | × |
| overflow: hidden |
× | ○ | × | × | × |
| scrolling HTML5 でも 使用できる |
○ | ○ | ○ | ○ | ○ |
| border: 0px; |
○ | ○ | ○ | ○ | ○ |
| background-color: transparent |
○ | ○ | ○ | ○ | ○ |
以下は実際の IFRAMEiframe内の記述
<!DOCTYPE html>
<html lang="ja">
<style type="text/css">
b {
color: #000000;
background-color: #e0e0e0;
border-radius: 5px;
padding: 4px;
}
body {
background: url(http://leiya.winofsql.jp/d2.png);
}
.tp {
background-color: #123456;
}
iframe {
width: 400px;
height: 60px;
margin-bottom: 8px;
}
</style>
<body>
<pre>
<b>指定なし</b>
<iframe src="test1.htm"></iframe>
<b>scrolling="no" border:0px</b>
<iframe scrolling="no" style='border:0px;' src="test2.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test1.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test2.htm"></iframe>
<b>overflow:hidden</b>
<iframe style='overflow:hidden;' src="test2.htm"></iframe>
<b>seamless srcdoc</b>
<iframe seamless srcdoc="<b style='color:#fff;'>seamless srcdoc</b>"></iframe>
</pre>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<style type="text/css">
b {
color: #000000;
background-color: #ffffff;
border-radius: 5px;
padding: 4px;
}
</style>
<body>
<b>背景色なし</b>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<style type="text/css">
b {
color: #000000;
background-color: #ffffff;
border-radius: 5px;
padding: 4px;
}
body {
background-color: #c0c0c0;
}
</style>
<body>
<b>背景色あり/本来スクロールあり</b>
<pre>
</pre>
</body>
</html>
Google Chrome のスクリーンショット
|
|
【HTML5の最新記事】
- Google Chrome の type="date" で表示される datepicker の最も使いどころは、フレームをまたいで表示されるところです
- Canvas : 角丸の DIV を CSS3 では無く Canvas で表現すると、こうなります。( IEは 9以上 )
- Canvas : IE8も 角丸で BOX の内側を指定の太さで線を引く
- Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く
- Canvas : 指定サイズ BOX の内側を指定の太さで線を引く
- HTML5 : 最も簡単な「required 属性」による未入力チェック
- HTML5 : 画像にテキストを重ねて少し回転して「名前を付けて画像を保存」するとどうなるか
- HTML5 : canvas 要素に画像をロードする
