發表文章

目前顯示的是有「CSS」標籤的文章

嵌入式內聯圖片

睡蓮
圖片
　　嵌入式內聯圖片是將編碼後的資料類型小圖片用 Data URL 寫入檔案中，例如在 .css、.html、.js...等，相對於以往慣用透過連結方式引入圖片，其好處是減少 HTTP 請求，提升網站速度。但編碼後的圖片會使檔案變得肥大，要啟用 GZIP 壓縮( GZIP Components)，伺服器端在收到 HTTP 請求(HTTP Requests)後(例如含 base64 的 CSS 檔案)，會先行壓縮檔案內容，然後才傳送到客戶端。
閱讀全文

IE 7 下慎用 :first-letter 偽元素

睡蓮
圖片
　　不久前在XOOPS正體中文站替一位網友解決 IE 8下佈景問題時，發現用 IE 7 及 6 版本進入網站，CPU 會飈高，持續載入中的空白畫面久久沒有回應，被逼要中止程式，而 IE 8 及其他瀏覽器則無此問題。 ( 補註：更正為只有 IE 7版本，IE 6 的於後來經再測試後確定無問題。)
閱讀全文

解決IE 7、8下的 object 框線問題

睡蓮
圖片
　　iframe 是最常見的網頁嵌入標籤，但到了XHTML 1.0 Stict 之下，這種標籤便不允許使用了。需要嵌入網頁，可以用object標籤取替之。
閱讀全文

難以發現的 CSS 問題

睡蓮
圖片
　　話說昨天在Opera瀏覽器下為池水間進行網站優化和代碼改良時，間隔了一段長時間才去打開firefox檢視一下網站，這下不看猶自可，一看嚇了一跳，在firefox下的池水間變得面目全非，馬上打開其他瀏覽器查看，結果safari也是和firefox一樣有問題，只有opera和IE都正常，這是怎麼回事了？
閱讀全文

提升網站效能的 CSS Sprites

睡蓮
圖片
　　近來在為池水間進行網站優化，將XHTML和CSS代碼改良，其中CSS就首次使用了CSS Sprites技術，以提升網站效能。
閱讀全文

CSS 註解對 IE 6 的影響

睡蓮
圖片
　　今天在XOOPS正體中文站的一篇討論文章中已替一位網友解決了佈景方面的問題，但就沒有在版上解釋CSS檔裡是什麼地方導致佈景在IE6下無法置中。另外亦有鑑於過去在正體中文站所看到提供的CSS檔內容，發現在CSS內使用中文註解者甚為普遍。今天特別為此開一篇文章，講解一下在編寫CSS時應當避免的地方。
閱讀全文

優先等級的行內CSS能駕御嗎？

睡蓮
圖片
　　下面代碼中，包含了引入CSS檔樣式表(藍字)、在<head></head>裡的嵌入式 CSS(綠字)、和行內CSS(橘字)：
閱讀全文

我的 CSS 3 測試手記

睡蓮
圖片
　　中間白色部份是一個沒有設定寬度的區塊，可以在不同瀏覽器解析度下有不同的寬度。透明的白背景，一般最先想到的是用 opacity 和 IE 的 filter 屬性，帶雙白邊的圓角或許會想到用背景圖片，但在支援 CSS 3 的瀏覽器下，不需使用前述也能有相同的效果，而 XHTML 下的結構性代碼也因 CSS 3 的支援而簡化了不少。
閱讀全文

IE 8 不再支援 CSS Expression

睡蓮
圖片
　　上星期IE在官方blog中公佈了IE 8 版本在標準模式下，不再支援CSS Expression。從網頁標準的角度來看，這消息無疑令人振奮，至少看到了微軟兌現網頁標準的承諾，不斷在技術方面下功夫。
閱讀全文

無法線上編輯 CSS 檔問題

睡蓮
圖片
　　使用虛擬主機的用戶，不知道曾否有過這樣的經驗：在線編輯主機上的CSS檔時，發現右邊的操作選項中的“Edit File”這一項不見了，選項上方也不能顯示File Type 格式。
閱讀全文

Opera下的text-shadow

睡蓮
圖片
　　text-shadow是從CSS 2版本開始便已有的屬性，能為字體添加模糊及陰影的效果。到目前為止只有Opera支援得最好，IE和Firefox還不支援，Safari與Konqueror則只能支援一組屬性值。
閱讀全文

煞風景的 Safari

睡蓮
圖片
　　Safari 瀏覽器有一特色就是在輸入帳號密碼或發文時，輸入框周邊會出現藍色的邊，這早在過去自架的另一個網站就有發現了，當時的網站佈景主題是以藍色為主調，所以無甚影響。但這次為池水間所做的佈景主題顏色，與Safari的藍色邊框顯得很不協調，越看越覺討厭，立時動手去之為快。
閱讀全文