SQLの窓

2013年03月13日


IFRAME が各ブラウザで現在(2013/03/13)どのように振る舞うかのマトリックス

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
以下は実際の IFRAME


iframe内の記述
<!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="&lt;b style='color:#fff;'&gt;seamless srcdoc&lt;/b&gt;"></iframe>
</pre>
</body>
</html>

test1.htm
<!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>

test2.htm
<!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 のスクリーンショット





posted by lightbox at 2013-03-13 08:34 | HTML5 | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり