DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3實例學習教程:data類型的Url
CSS3實例學習教程:data類型的Url
編輯:CSS進階教程     

所謂"data"類型的Url格式,是在RFC2397中 提出的,目的對於一些“小”的數據,可以在網頁中直接嵌入,而不是從外部文件載入。例如對於img這個Tag,哪怕這個圖片非常非常的小,小到只有一個 點,也是要從另外一個外部的圖片文件例如gif文件中讀入的,如果浏覽器實現了data類型的Url格式,這個文件就可以直接從頁面文件內部讀入了。

data類型的Url格式早在1998年就提出了,時至今日,Firfox、Opera、Safari和Konqueror這些浏覽器都已經支持,但是IE直到7.0版本都還沒有支持,IE不支持的東西太多了,也不差這一個。:(

小例子:下面這個html代碼可以在支持data類型Url的浏覽器中運行,例如Firefox。

運行後會看到一條藍色漸變底色的標題。

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

03 <html xmlns="http://www.w3.org/1999/xhtml" >

04 <head>

05 <style type="text/css">

06 .title {

07 background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);

08 background-repeat:repeat-x;

09 height:28px;

10 line-height: 28px;

11 text-align:center;

12 }

13 </style>

14 </head>

15 <body>

16 <div class="title">Hello, world!</div>

17 </body>

18 </html>

 

這個漸變的藍色底色實際上是用一個1x28的小圖片通過橫行重復(repeat-x)形成的。

這個圖片很小,不過104個字節,直接嵌入到html或css文件還是很合適的。

data格式的Url最直接的好處是,這些Url原本會引起一個新的網絡訪問,因為那裡是一個網頁的地址,現在不會有新的網絡訪問了,因為現在這裡是網頁的內容。這樣做,會減少服務器的負載,

當然同時也增加了當前網頁的大小。所以對“小”數據特別有好處。

data類型Url的形式

既然是Url,當然也可以直接在浏覽器的地址欄中輸入。

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

在浏覽器中輸入以上的Url,會得到一個加粗的"Hello, world!"。

也就是說,data:後面的數據直接用做網頁的內容,而不是網頁的地址。

簡單的說,data類型的Url大致有下面幾種形式。

 

01 data:,<文本數據>

02 data:text/plain,<文本數據>

03 data:text/html,<HTML代碼>

04 data:text/html;base64,<base64編碼的HTML代碼>

05 data:text/css,<CSS代碼>

06 data:text/css;base64,<base64編碼的CSS代碼>

07 data:text/javascript,<Javascript代碼>

08 data:text/javascript;base64,<base64編碼的Javascript代碼>

09 data:image/gif;base64,base64編碼的gif圖片數據

10 data:image/png;base64,base64編碼的png圖片數據

11 data:image/jpeg;base64,base64編碼的jpeg圖片數據

12 data:image/x-icon;base64,base64編碼的icon圖片數據

 

因為Url是一種基於文本的協議,所以gif/png/jpeg這種二進制屬於需要用base64進行編碼。

換句話說,引入base64以後,就可以支持任意形式的數據格式。

可以在Html的Img對象中使用,例如

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />

可以在Css的background-image屬性中使用,例如

 

1 div.image {

2 width:100px;

3 height:100px;

4 background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);

5 }

 

可以在Html的Css鏈接處使用,例如

<link rel="stylesheet" type="text/css"

href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

可以在Html的Javascript鏈接處使用,例如

<script type="text/javascript"

href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的語法定義

在RFC中,完整的語法定義如下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype := [ type "/" subtype ] *( ";" parameter )

data := *urlchar

parameter := attribute "=" value

urlchar指的就是一般url中允許的字符,有些字符需要轉義,

例如"="要轉義為"%3D",不過我測試下來,至少在Firefox裡面,不轉義也是可以的。

parameter可以對mediatype進行屬性的擴展,常見的是charset,用來定義編碼格式,在多語言情況下需要用到。

例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

這個例子會顯示出"你好,中文!"。如果吧charset部分去掉,就會顯示亂碼,因為我用的是UTF-8編碼。

Firefox有一個data類型Url的測試頁面,列出了各種格式的data類型Url的測試Url,和測試結果說明。

base64編碼和內容的隱秘

把二進制數據轉換成為Base64不是什麼難事,比如Total Commander就有這樣的功能。還有一些在線資源,

http://www.greywyvern.com/code/php/binary2base64

有些在線轉換把base64裡面的“=”轉換成為%3D,這個在Url中和“=”是一樣的,不轉換也沒什麼問題。

當然,這種Url還有一種隱秘的好處,就是將一些道貌岸然者不喜歡的東西,堂而皇之的放在頁面上。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved