小议Data URI scheme及其在CSS中的有关应用

日期:2021-03-04 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

网页页面提升的1大主要每日任务是降低HTTP 恳求 (http request) 的次数,比如根据合拼好几个JS文档,合拼CSS款式文档。除此以外,也有1个data URL 的密技,让大家立即把图象的內容崁入网页页面里边,这个密技的官方名字是 data URI scheme 。

甚么是 data URI scheme?

假定你有下列的图象:

A

把它在网页页面上显示信息出来的规范方式是:

XML/HTML Code拷贝內容到剪贴板
  1. <img src="http://sjolzy.cn/images/A.png"/>  

这 种获得材料的方式称为 http URI scheme ,一样的实际效果应用 data URI scheme 能够写成:

XML/HTML Code拷贝內容到剪贴板
  1. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA   
  2. 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />  

换句话说大家把图象档案的內容内嵌在 HTML 档案中,节约了1个 HTTP 恳求。

Data URI scheme 的英语的语法

大家来剖析1下这句 img 标识的英语的语法:

XML/HTML Code拷贝內容到剪贴板
  1. <img src="data:image/png;base64,iVBOR....>  

它包括1下一部分:

data - 获得数据信息的协约名字

image/png - 数据信息种类名字

base64 - 数据信息的编号方式

iVBOR.... - 编号后的数据信息

: , ; - data URI scheme 特定的隔开标记

Base64 编号?

不知道道甚么是 base64 吗?简易地说它把1些 8-bit 数据信息汉语翻译成规范 ASCII 标识符,往上有许多完全免费的 base64 编号调解码的专用工具,你还可以用 PHP 的 base64_encode() 开展编号:

PHP Code拷贝內容到剪贴板
  1. echo base64_encode(file_get_contents('check.png'));  

在 CSS 中应用 data URL

Data URI scheme 还可以在 CSS 中应用,比如:

body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
浏 览器会缓存文件这类图象吗?

不容易,Data URL 尽管节约 HTTP 恳求,可是假若这个图象要在网页页面好几个地区显示信息的话,便会加大网页页面的內容,增加了免费下载的時间,在其中1个处理方法是在1个 CSS class 中添加 data URL,在必须显示信息图象的区块启用这个 class,比如:

CSS Code拷贝內容到剪贴板
  1. .logobg {   
  2.   backgroundurl(data:…)   
  3. }   
  4. <div class=”navigation logobg”>..   
  5. helo, hello   
  6. <div class=”footer logobg”>…  

又 是 IE 来搞破坏

任何精采的技能都可以能遭受 IE 的挤兑,这次也是有这类状况,IE8 以前的版本号都不援助 data URI scheme。

处理这个难题的方法有:应用MHTML 处理 data URI scheme 的访问器适配难题

实际做法看编码(毫无疑问是用css hack来完成)

CSS Code拷贝內容到剪贴板
  1. /*  
  2. Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"  
  3.    
  4. --_ANY_STRING_WILL_DO_AS_A_SEPARATOR  
  5. Content-Location:the9  
  6. Content-Transfer-Encoding:base64  
  7.    
  8. /9j/4AA....+b0//2Q== (这里是base64编号)  
  9. */  
  10.     
  11. #the9{   
  12.   background-imageurl("data:image/png;base64/9j/4AA....+b0//2Q=="); /* normal */  
  13.   *background-imageurl(mhtml:http://www.zhangjingwei.com/demo/scheme/style.css!the9);   
  14.   width:300px;   
  15.   height:300px;   
  16.   color:#F00;   
  17.   font-weight:900;   
  18. }