一個元件同時被多個 CSS Selector 選上且其中有相同的 CSS 樣式定義時，熟勝出？ <style type="text/css"> span { color: red; } .c { color: blue; } #i {...

Responsive Web Design？ 智慧型手機的興起讓瀏覽網頁的螢幕變小，但既有網頁多半是固定寬度，一開始手機瀏覽器都是將網頁縮小到可以放進那小小的螢幕裡，但是這種作法一點幫助也沒有，圖那麼小、文字那麼小，什麼都看不清楚，只能在那不斷的放大放大縮小縮小，頭都暈了，怎...

Clickable Div 想要做一個隱形連結，例如在一張圖片上有兩個位置可以點，直覺想到可以用兩個 absolute 的 div 放上去想要的位置，然後為 div 加上 click listener。 <style type="text/css...

自從 Firefox 與 Chrome 打破 IE 獨大後，接著智慧型手機在瀏覽器市場帶來更大的衝擊，不只是各家爭鳴，還各版橫行，加上 HTML 5 與 CSS3 帶來許多嶄新的功能，讓網頁開發變得更有挑戰，也更頭大。 「這個新功能很炫，但是可以用了嗎？瀏覽器支援了嗎？」 ...

前一篇筆記「 yepnope.js 讓瀏覽器只載入需要的檔案 」只提到條件式載入，這邊再來看看 yepnope 還有哪些功能。 官方定義 yepnope is an asynchronous conditional resource loader that's ...

yepnope.js 有很多功能，這邊想用的是「條件式載入」。 條件式載入？ 以不支援陣列 indexOf() 的 IE8  為例（真弱），以前的作法是先載入再判斷要不要用。

IE 一直要到 IE9  才支援 CSS Media Query，不過有辦法可以讓 IE8 和 IE7 支援 Media Query 語法，那就是 Respond.js 。 Media Query 測試程式。

Reset CSS? 對 CSS 稍有經驗的人都知道，同樣的 CSS 檔案在不同的瀏覽器（Chrome, FF 或 IE 等）得到的結果 有點 不太一樣，這起因於兩個原因，第一個是各家瀏覽器使用不同的預設值，例如 line-height、margin、font-size 等，...

不知道從什麼時候開始，瀏覽器裡的 textarea 右下角會出現幾條斜線，滑鼠移上去後居然可以拖拉改變 textarea 的長寬，一直以為這是瀏覽器另外提供的神奇功能，今天才知道，這是 CSS3 的標準。 既然是 CSS 的標準，那就表示可以 改變設定值 。

這是一個常見的困擾，若背景使用了半透明顏色或圖片，像是彈出視窗後面的遮片（mask）就會這麼做，但是放在這個半透明 div 裡的所有物件也都會變成半透明，這就很傷腦筋了，導致彈出視窗的圖文變得模糊了。 聽說 CSS3 有專門的解法，但是這邊先用 CSS2 之前的作法。 原...

處理 HTML 的好工具。 讀 HTML 有兩種方式： DOM Navigation - 幾乎是 DOM 與 jQuery 的 Java 版本，API 幾乎一樣 CSS Selector - 會 CSS 的就知道好用！ 除了讀，還可以寫，API 幾乎是 jQue...

小時候要用 Javascript 做一個下面這種樹狀圖，應該要報個幾十個人天吧。 如果再加上右鍵功能，嗯，「PM，請給我幾個人月吧」！ 最大的問題應該出在瀏覽器相容性，以及少了一些很好用的 function 吧。 這些問題 jQuery 都解決了，所以...

這邊講的不一定是 div，所有 Block 物件都可以適用。 什麼是 Block 物件？ 簡單講就是會斷行的物件，像 div 或 p 都是；相對於 Block 物件的叫做 Inline 物件，也就是不會斷行的物件，像是 span 或 img。 有關 Block 物件的...

文件高度（Document Height）指的是整篇 HTML 的高度，若少於瀏覽器 Viewport 高度則不會出現 Scrollbar，反之則會。 Document Height 是用 Javascript 提供的 document 物件來取得。 var h = $(...

在實做 drag and drop 時發現 Firefox 有個奇怪的行為。 若只是單選沒有移動滑鼠，也就是 mousedown 與 mouseup，沒有 mousemove，那 Firefox、IE 與 Chrome 都正常。 但是當拖拉時，IE 與 Chrome 正常...

CKEditor 3.6 並沒有圖片置中的功能。 靠左對齊與靠右對齊分別是用 CSS 的 float: left 與 float: right 來實做，float 當然沒有 center 這個選項。 用 float 的好處在文繞圖，而置中對齊當然不需要文繞圖。 要讓圖...

很不合群的 IE6（或者全部的 IE）為了修飾其不遵守 CSS 標準的行為，所以發明了一大堆專屬的語法，像是在 CSS Rule 前面加上底線，表示 IE 專用，其他瀏覽器就會自動跳過。 為避免該死的 IE6 年代留下來的餘毒，現在有比較乾淨的作法，就是利用 Javascri...

狀況一： div[a] div[b] with float:right div[c] FF： div[c]放在div[a]左邊，div[b]跑到div[a]的右邊。 div[c]與div[a]同寬，div[b]的寬度視內容而定。 所以div[b]疊在div[c]...

HTML Code: body div[header] div[wrapper] div[leftBar] // float的div得放在前面，讓下面的div可以頂替上來 div[content] CSS Code: body { margin: 10px;...

HTML Code: body div[header] div[wrapper] div[content] div[rightBar] CSS Code: body { margin: 10px; } #header { width: 100%; h...