5min 微知識：CSS3, JQuery, HTML5 及網站小技法

ruby 標籤是什麼？今天來跟大家分享 HTML 中的 <ruby> 標籤、要怎麼用，以及它在語言註音與創意排版上的各種應用。
無論你是為了日文漢字加上假名(振假名)、中文拼音輔助、還是想寫出台語諧音哏梗圖，這篇都會是你不可或缺的參考指南。
從基本語法結構、各子標籤用途，到跨語言的應用整理與視覺美化技巧，一步步帶大家理解這個經常被忽略的小標籤，如何讓文字上方加註讀音。
當然也少不了台灣人最愛的諧音哏應用，原來 <ruby> 還能結合文化與幽默的寫作範本 ...full story ››

當我們在網頁中加入連結時，除了設定開新視窗外，你是否曾好奇過 `rel="nofollow"`, `noopener`, `noreferrer` 這些看似冷門的屬性到底有什麼作用？
這次我們就來簡簡單單，但不馬呼的一次說清楚它們與 SEO、網頁安全、使用者隱私之間的關係。
從搜尋引擎怎麼「看」你的連結，到如何避免開新分頁被反向操控（tabnabbing 攻擊），再到保護用戶不被追蹤的做法，
每個細節都值得你了解，讓你在架站時更安心、更專業。
...full story ››

在行動時代，絕大部分的流量，都來自行動裝置，若是在手機的網頁上，看到一組電話號碼，比較合理的作法，應該是點擊一下，然後就直接透過手機撥號。  
那要怎麼寫，才能讓網頁上的電話號碼，變成可以點擊撥號的超連結呢？  
寫法很簡單，只是連結額外加上 TEL: 這個結構語法。  
我們看一下電話號碼超連結標準語法 ...full story ››

HTML 5 的規範裡，對於 Input 文字輸入欄位有很多新的屬性，其中有一個新屬性非常好用，但也同時有很多陷阱，一旦用不好，反而會產生更糟的使用者體驗，這個新屬性就是：Placeholder。  
為什麼說他非常好用，但又有很多陷阱呢？  
今天我們就來跟大家聊一聊這個新屬性的用法和應該留意的幾個小點 ...full story ››

常常有朋友們在做網站，或是撰寫網頁內容的時候，  
會很疑惑的問：一般文字加粗體，是用 <b></b> 這組標籤呢？還是用 <strong></strong> 這組標籤呢？  
因為不管用哪一個，在網頁上看起來都一樣呀？  
如果都長的一樣，幹嘛弄那麼多個同義詞標籤呢 ...full story ››

在進行響應式網站開發(RWD)的時候，  
有時候最麻煩的，還不是CSS的部分(這個部分相對是最簡單的)，  
稍微熟悉CSS語法的朋友們，  
只要透過『響應式網頁設計(Responsive Web Design,RWD)』技術，就可以很有效率的以CSS原生模式，解決不同平台間的樣式問題。  
不過有些功能，縱使再強大的CSS，也還是有一些鞭長莫及的地方，  
必須要個別建立行動裝置或是一般裝置不同的程式碼。  
 
那要如何使用偵測使用者是用什麼樣的裝置上網呢？  
 
基本上偵測的方法還蠻多的，像是一般多以 Javascript 去偵測裝置的類型，好比下面這樣的原始碼 ...full story ››

不曉得大家有沒有使用 Uploadify 這個好用的 jQuery 網頁多檔上傳套件？  
我們五分鐘閱讀的網站後台，  
多年來一直都是使用這個套件來上傳圖檔，  
從1.xx版，一直到現在3.xx版，  
基本上都沒有任何問題，  
不過很奇怪的是，  
這兩天突然的 Uploadify 就無法上傳了。  
 
無法上傳的狀況是這樣的(看看大家有沒有同樣的情況) ...full story ››

在我們進行行動版網站設計的時候，  
不管是留言板或是訂單等等，頁面總是不免會出現一些表單欄位，  
當然，  
透過CSS的一些技巧，絕大多數的表單欄位、下拉選單等等都不會是問題，  
不過有很多朋友們發現，如果在手機版的網站中，  
一旦點擊了文字欄位或是下拉選單，  
那麼 iPhone 就會自動放大整個頁面(Zoom in)，  
雖然這似乎是美意一樁，可以讓網友們打字時更便利，  
但問題是放大之後，就算離開這個欄位，  
頁面也不會自動還原為原來的大小，這樣就讓人苦惱了 ...full story ››

經常使用 Facebook 或 Flickr 看照片的朋友們，可能會留意到這些網站服務都提供了高解析度的照片預覽模式，同時這個預覽模式是使用「全螢幕」來展現的。  
咦？什麼時候，網站程式碼可以直接執行全螢幕了呢 ...full story ››