2014年12月30日

簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除

上一篇「 CSS 提示框懶人包實作」說明了 CSS tooltip 原理,不過懶人包畢竟無法處理各種變數,留言提出了各種異常狀況,因此本篇仔細說明不同狀態下的解決方式。


<< 請注意!本篇文章含會員限定內容 >>
2014年12月28日

簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法

HTML 標籤屬性 title 裡的提示訊息,在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代,訪客閱覽文章多半施展 "超速讀",相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現。使用 javascript(簡稱 js) 處理可讓 title 訊息立即顯現(就是所謂的 tooltip 效果),還可做出各式外框、動畫、置中等等效果,這才是友善的使用者體驗設計,就像下面這個按鈕:

滑鼠請移過來


效果還不錯吧!不過特別的是,這並非使用 js 做出來的,而是純 CSS 效果。因為在「優化網站效能」的前提下,為了減少網頁 js 的使用,嘗試將一些 js 能輕易辦到的事,看看能否轉交給 CSS 完成。

好消息是這個構想成功了,且本文的安裝方式非常簡單(傳統的 CSS tooltip 製作方法很麻煩、步驟多),複製貼上後整個網站就能立即套用效果。以下先說明製作原理,想直接安裝請跳至「二、安裝 CSS」。


<< 請注意!本篇文章含會員限定內容 >>
2014年12月23日

聖誕音樂點唱機﹍部落格應景外掛

首先感謝 +Mark X 製作的「聖誕節佈置懶人包」,每年節慶期間都可從倉庫中取出,重新在網站上裝飾一番。這組套件包含了網頁背景、雪花效果、滑鼠游標、以及最重要的主體──音樂點唱盒。

原版本包含了貓咪、小朋友、及水晶聖誕音樂,由於今年想要變換一下音樂,於是徵求了 Mark 的同意。以下提供這個音樂點唱機的修改方法,可自訂音樂清單,不過如作者所提的,請注意 mp3 的版權合法性,尊重音樂著作權。

2014年12月22日

CSS3 漸層語法產生器﹍計數器背景實作(1)

使用 CSS 產生的漸層效果很棒,不過這些複雜的語法參數對一般使用者而言,跟看到天書是差不多的。在這個「Blogger 中文社群討論串+綜合口味 推薦了這個線上 CSS 漸層語法產生器「Ultimate CSS Gradient Generator」,且 +Mark X 也是愛用者。相信有了行家的背書,在眾多線上產生器之中,這會是絕佳的選擇,且 WFU 試用後也覺得效果很好、操作便利。



本篇將以上圖這個 Blogger 官方流量計數器的背景圖為例,實際操作如何藉由這個線上工具,來產生此效果的漸層背景圖。

2014年12月17日

[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)

當網頁圖片多的時候,「影響效能的最大因素就是圖片載入」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外,更好的改善方法是讓圖片能延遲載入,先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「Lazy Load」的作用。

過去寫了一篇「Lazy Load 最佳安裝方式」,可以改善圖片載入的狀況。不過想要讓網頁效能最佳化的話,得另外解決「瀏覽器回流(reflow)」的現象──方法之一為每張圖片事先設定寬、高像素值。

當然這件事極為繁瑣,一一檢視每張圖片的尺寸、手動設定個別 CSS 參數,相信沒幾個人有這樣的耐心,同時這也是沒效率的事;而更讓人打消退堂鼓的是,網站的舊文章還有成千上萬張圖片,躺在那等著我們設定寬、高像素值呢!

好的,本篇的程式正是為了解決以上所有難題,自動幫文章中的圖片預先設定尺寸、並能執行最佳的 Lazy Load 效果。以下大致先說明原理,想直接安裝懶人包請跳至「二、準備動作」。




<< 請注意!本篇文章含會員限定內容 >>
2014年12月14日

[教學]Facebook 讚按鈕﹍四種安裝方式深入剖析

Facebook 與 Google 這樣的網路龍頭有著共同特色,不斷嘗試、修正錯誤,功能持續更新,因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化,已經跟當初不太一樣。雖只是約 38x20 像素的區塊,他的安裝方式、設定選項與應用方式,其實多得超乎想像。

我們從網路搜尋看到的單一安裝方式,都算是片面的用途,本篇綜合整理「讚按鈕」的完整安裝方式,讀者可從中審視自己的需求,選擇最適當的安裝方案。

2014年12月11日

讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)

上一個版本「相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版」FB 留言 Herman Tsao 詢問「能做成依瀏覽器語言做自動轉換嗎?」,其實偵測訪客的瀏覽器語言設定是做得到的,我們應該有這樣的經驗,某些安裝 Google 翻譯的網站,能得知我們的預設語言,在畫面上自動顯示 "是否翻譯為 xxx 語言" 這類訊息。藉由這樣的偵測功能,就完成了本文的這個小工具升級版。

那麼讀者的問題或許會是:「那還需要這個小工具嗎,使用 Google 翻譯不就好了?」的確如此,不過 Google 翻譯用久了,就會發現以下不方便之處:

  • 畫面上方會被 Google 翻譯強制佔用一定的高度,而破壞版面
  • Google 翻譯耗費的時間還滿久的

因此,如果只需要簡繁自動轉換(或切換)的話,這個小工具的切換速度可用 "光速" 來形容,比 Google 翻譯強太多了。以下先說明原理,想直接安裝請跳至「二、安裝程式碼」。

2014年12月7日

[教學]減少網頁 reflow(回流) 的 CSS 實作技巧﹍優化網站效能(3)

在增進網頁效能的執行事項之中,減少瀏覽器回流(reflow)是重要的一環。然而 reflow 這個名詞不常見、且翻譯也不易理解,不如稱之為「瀏覽器重新佈局」、或「網頁區塊重新安排」會來得白話一些。而為何要減少 reflow?因為它會造成 CPU 無謂的重複運算,消耗瀏覽器效能及渲染頁面的時間

關於這件事先說結論,除非網站 Javascript(簡稱 js) 大部分是自己寫的,否則站長能做的改善有限,因為 js 寫得好不好無法由自己控制。因此如何減少 reflow,本篇著重在可以經由修改範本來改善的部分,也就是我們能 "自力救濟" 的部分

在 Blogger 平台如果硬要打分數的話,以這個系列文來說,能完成「優化網站效能該注意哪些事? (1)最關鍵的考量因素」起碼可拿到 50 分以上,完成「 HTML / Javascript / CSS 最佳化處理」約可拿到 20 分;而本文按照教學設定正確的 css 最多可拿到 5~10 分,如能自行解決 js 可額外拿到 5~15 分,依範本中需要處理的多寡而定。