データURIは、RFC 2397によって定義されたソリューションで、小さなファイルをドキュメントに直接埋め込みます。次の構文を介して、小さなファイルを指定されたエンコーディングに変換し、それらをページに直接埋め込むことができます。
データ:[<mime-type>] [; base64]、<data>
前世紀に、HTML4.01はデータURIソリューションを導入しました。今日まで、IE6およびIE7を除くすべての主流のブラウザーはサポートされていますが、IE8はまだデータURIのサポートに制限があり、サポートオブジェクト(画像、IMG、入力タイプ=画像、リンク、CSS、およびデータボリュームが32Kを超えることはできません。
アドバンテージ:MHTMLは、MIME HTML(多目的インターネットメールエクステンションHTML)の略語であり、RFC 2557で定義され、マルチメディアページのすべての内容を同じドキュメントに保存します。このソリューションは、IE5.0以降にサポートするためにMicrosoftによって提案され、Opera9.0もサポートを開始しました。 Safariはファイルを.mht(MHTMLファイルの接尾辞)に保存できますが、表示することはサポートされていません。
MHTMLとData URIは、より強力な機能とより複雑な構文を備えた類似しており、データURIで再利用できない欠点はありませんが、MHTMLは柔軟性があり、使用するのに十分なほど便利ではありません。たとえば、リソースを参照するURLは、MHTファイルの相対アドレスになる可能性があります。そうしないと、絶対アドレスである必要があります。 「Cross Browser base64エンコードされた画像がHTMLに埋め込まれている」のIEのHedgerのソリューションは、Content-Type:Message/RFC822を宣言してMHTMLに従ってIEを解析するため、相対パスを使用します。コンテンツタイプが変更されていない場合、MHTMLプロトコルが必要です。現時点では、「MHTML-データが必要な場合:IE7以下」などの絶対パスを使用する必要があります。
応用データURIとMHTMLの組み合わせは、すべての主流ブラウザーを完全に解決できます。キャッシュされて再利用されることの欠陥のため、それらはページで直接使用するのに適していません。ただし、CSSおよびJavaScriptファイルで画像を適切に使用する上で大きな利点があります。
CSSでのデータURIとMHTMLの実装を容易にするために、データURI&MHTMLジェネレーターを作成しました。
CSSファイルでMHTMLを使用する場合、URLは絶対パスを使用する必要があります。これにより、非常に柔軟性がありません。したがって、次のようなCSS式を使用して解決する(デモ)を検討できます。
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*背景イメージ:式(function(ele){
ele.style.backgroundimage = 'url(mhtml:' +
document.getElementById( 'data-uri-css')。getattribute( 'href'、4) +
'!03114501408821761.gif)';
}(これ));