IEは、やっと IE9 でまともに使えるようになったという事で、他のブラウザでは普通に使用できていました。 ※ Google Chrome や Firefox では、アドレスバーに直接セットしても表示されます( IE は アドレスバーに長さ制限ある上、そもそも対応していない )IE9 に関する公式の記述 以下の小さな画像は、その下のソースコードで表示されています。インターネット上の画像をこのような Base64 に変換するツールはこちらになります。
<img id="png_base64">
<script type="text/javascript">
document.getElementById("png_base64").src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAA3NCSVQICAjb4U/gAAAAYnpUWHRSYXcgcHJvZmlsZSB0eXBlIEFQUDEAAHicVcixDYAwDADB3lN4hHccHDIOQgFFQoCyf0EBDVee7O1so696j2vrRxNVVVXPkmuuaQFmXgZuGAkoXy38TEQNDyseBiAPSLYUyXpQ8HMAAAM2SURBVDiNfZRvTJtVFMZ/71vCJE1DIdQBrbhu3WbsnDEx7jVRMBgT/2OzzRgSjUswBovRRaMoGbgm6khcYMZCoIuaqAxMNqfgh7WdMfPDDHXBhLd2m7YrdVSUAW2poHbr8UNRQIjPx3Of55znnHvuVUSEdTH9KycHWFzg8aeptK7PkbU4E5B9D0g5sgO5FalEnrpPzgTWEpXlyr9NceIjvK/wFxjgHlfX1B/ZyxMHKoWfIyzCdfD8EXY/ibmsoPhHHLvIlu3cRsbAT9dMEw89N3XTznc6OxdzuVdffKH81Al7xL/diOUafA+pWUrLlm2nPC8fMlOxuiOHw+FwOFZGyuHQBmY/6CmoEBHJ/fkWAM1ut9/vn5ycXNteMpkMBoOFFG9XLZUsAhg5vncTr8c5FwpdPH++pqams7PT5/MNDQ2VlpYqiiIiJSUlqqoCn2yhUYXvznL7nSpA7wFHMWOfDoyOjs7NzQUCAbfb7XQ66+rqUqmUrusmk8nv91ssFkA7+D55+Pg9ALmgSzWyV0vMzACRSKS9vV3TtIKxtra2+vr6QCAAxONxIHFlRu7fKhYkk0IO7pdNSHDkx4kEEIvFWltba2trRaS5ubm4uBgwm83/ziwnIqc+l2pk4GgRhiKuQsVGRaQwfMBkMnV3d/f29mqaFo1GW1pacrmcoigul6sImJ5iA0xdVuRCmDonjzwa9fQ7qiqj0ajP5wuHw06nU9d1TdMGBwfHx8dX3eEuhQSE4irbbuYWO6e/YHxs5c4ajcZ0Om21WnVdX6U89y2/QN1d2G5UAZ71UAxez0qOwWDIZDINDQ1AR0fH8sGH3ajwzGuACvDwHrLIpbMAqprP5/P5fDKZtNlsZWVlfX19Ho+nqalpNp1mPs3xIUrg3gdXvCrP/j0Fw4u/Dw6PFGp4vd7C4WfDw4VI445tX1cj/YdXrKfIkZ4e4CsbshlpbwEwmhdyV5dSJ2ILL+17d+OS8TcPrxZn5rOXIj/I0S5xIJuZ3skV1y45/aV8E5Tdd8j1iB3ZinS9EQ6F5rPZVeJl5PNy8pjUW6UGsSNWpAJ54m7xD//vZ/Af6GMM9HODnccaqbKtS/kbZXYMZaJnrD4AAAAASUVORK5CYII%3D';
</script>
data Protocol に関する Microsoft のドキュメント ▼ それによると、フォーマットは data:[sMediaType;][sBase64Encoding;],sResourceData ▼ IE9 に関する抜粋データ URI とは、Web ページのコンテキストにデータを直接埋め込む手段です。 最も一般的な例は、以下のような Web ページに埋め込まれた小さな画像です: ------------------------------------------------- data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP ------------------------------------------------- img 要素の src 属性に置くと、このテキストは、ページのマークアップに画像を効果的に埋め込みます。Internet Explorer には、Internet Explorer 8 においてデータ URI が導入されました。 Internet Explorer 9 では、開発者は script 要素の src 属性でデータ URI を使用できるようになりました。 さらに、データ URI のサイズの上限が、32 キロバイト (KB) から 4 ギガバイト (GB) (Internet Explorer 9) まで引き上げられました。つまり、IE8 では画像のみに使用できて、かつ32K までの小さなファイルしか使え無かったという事です。他のブラウザは試しましたが、皆使えています。 この Base64 への変換ツールを二つ確認しています。一つはオンラインで実行可能です。 ★ Binary / Image File to Base64 Encoder / Translator もうひとつは、Firefox のアドオンです。 ★ Base64 Encoder また script 要素 でも利用できるので、alert("OK"); を実行する記述は以下のように書く事ができます Base64 => YWxlcnQoIk9LIik7 元の文字列 => alert("OK");
<script type="text/javascript" src="data:text/javascript;base64,YWxlcnQoIk9LIik7 "></script>
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
