Data URI
Data URI 是由 RFC 2397 定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中:
data:[<MIME-type>][;base64],<data>
在上个世纪 HTML4.01引入了Data URI方案 ,到今天为止除了IE6和IE7之外,所有主流浏览器都支持,但IE8对Data URI的支持还是有限制的,只支持object(仅是图片时)、img、input type=image、link和CSS中的URL,且数据量不能大于32K。
优点:
缺点:
MHTML
MHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的缩写,是由RFC 2557定义的把一个多媒体的页面所有内容都保存到同一个文档解决方案。这个方案是由微软提出从IE5.0开始支持,另外Opera9.0也开始支持,Safari可以把文件保存为.mht(MHTML文件的后缀)格式,但不支持显示它。
MHTML和Data URI还比较类似,有更强大的功能和更复杂的语法,并且没有Data URI中“无法被重复利用”的缺点,但MHTML使用起来不够灵活方便,比如对资源引用的URL在mht文件中可以是相对地址,否则必须是绝对地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析,如果不修改Content-type则需要使用MHTML协议,这个时候必须使用绝对路径,如《MHTML – when you need data: URIs in IE7 and under》。
应用
Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器,它们由于无法被缓存和重复利用的缺陷,所以并不适合直接在页面中使用,但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性:
为了方便在CSS中实现Data URI和MHTML,我写了一个Data URI & MHTML 生成器,你可以看利用其生成Data URI & MHTML应用实例。
在CSS文件中使用应用MHTML时URL必须使用绝对路径,导致非常不灵活,所以可以考虑使用CSS expression来解决(DEMO),比如:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(this));
什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,...
Jsp自定义标签和方法详解 首先是要有一个标签处理类,标签处理类可以直接实现Tag...
Kestrel Kestrel 是一个跨平台的适用于 ASP.NET Core 的 Web 服务器,默认包括在 ...
一、动态加载脚本 当网站需求变大,脚本的需求也逐步变大。我们就不得不引入太多...
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理...
在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松...
例如:文本abcaBcabCaBCabcaBCa,关键字bc,在不区分大小写的情况,一共有6个匹...
简介 多位(几个LED就是几位)通过引脚级联,接一个LED的DOUT引脚到另一个LED的DIN...
1、信息表新建立一个字段,并用0、1的方法判断信息的状态。 2、新建一个页面,定...
本文实例为大家分享了Aspose.Cells导出excel文件的方法,供大家参考,具体内容如...