Css檔案編碼指的是樣式檔案的編碼格式。用於靜態網頁的編輯,改變網頁的布局和外觀。
基本介紹
- 軟體名稱:Css檔案編碼
- 開發商:計算機通用
- 軟體平台:html
- 軟體語言:Cascading Style Sheet
標準參考,問題描述,造成影響,問題分析,解決方案,
標準參考
根據 CSS 2.1 規範的描述,應按照以下優先權來確定一個外部 CSS 檔案的編碼:
HTTP 回響頭中 "Content-Type" 欄位的 "charset" 參數指定的編碼。
BOM 以及/或者 @charset 定義的編碼。
<link charset=""> 或其他連結機制提供的元數據(如果有的話)指定的編碼。
引入該 CSS 檔案的 HTML 或另一個 CSS 檔案(如果有的話)中已確定的編碼。
如果以上幾步都沒能確定編碼,則假定其編碼為 UTF-8。
關於上述內容的詳細信息,請參考 CSS 2.1 規範 4.4 CSS style sheet representation 中的內容。
問題描述
如果一個外部 CSS 檔案的編碼與引入該檔案的 HTML 檔案的編碼不一致,並且沒有顯式的聲明該 CSS 檔案的編碼,在某些情況下會造成 CSS 的解析錯誤。
造成影響
該問題將造成頁面布局在一些瀏覽器中與預期的效果不符。
問題分析
對於一個未顯式聲明編碼的CSS 檔案,瀏覽器會將其編碼認為與引入該檔案的檔案的編碼一致。在一些特定的情況下,將造成 CSS 代碼解析異常。舉例如下:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css.css"/></head>
<body><h1>內容文本</h1></body></html>
h1 {
margin:0;width:100px;height:100px; background:blue; font:20px/100px "黑體";text-decoration:underline;color:red;}
假設上述兩個檔案均為在 HTTP 回響頭中設定編碼,在各瀏覽器中表現如下:
可見,IE6 把 CSS 檔案從“黑體”二字到規則結束的樣式都沒有起作用,其他瀏覽器中僅“黑體”二字解析錯誤。
產生這種差異的原因是各瀏覽器對與這種錯誤的容錯方式不同。
按照規範的規定,在這種情況下,瀏覽器會認為 CSS 檔案的編碼與頁面一致,即 UTF-8,但 GB2312 編碼下的一個中文字元是 2 個位元組,在 UTF-8 編碼下則為 3 個位元組,在把 GB2312 編碼下的“黑體”二字當作 UTF-8 編碼的文字來解析的時候,得到的是“����”,這並不是預期的值。正是這個值導致了樣式定義在各瀏覽器中都無法按照預期被解析。
解決方案
當HTML 檔案或 CSS 檔案要引入一個不同編碼的 CSS 檔案時,要明確聲明被引入的 CSS 檔案的編碼。
如以上的舉例,在 CSS 檔案的開頭加上一行1:
@charset "GB2312";
或者在各檔案的 HTTP 回響頭中聲明該檔案實際使用的編碼。