CSS Selector 的優先度

一個元件同時被多個 CSS Selector 選上且其中有相同的 CSS 樣式定義時，熟勝出？

<style type="text/css">
span {
  color: red;
}

.c {
  color: blue;
}

#i {
  color: green;
}
</style>
<div>
  <span id="i" class="c">CSS</span>
</div>

上面的 CSS 字串同時被 span、.c 與 #i 選上，結果是呈現 #i 的綠色。

再看一個複雜一點的狀況。

<style type="text/css">
div span {
  color: yellow;
}

span.c {
  color: pink;
}
</style>
<div>
  <span id="i" class="c">CSS</span>
</div> 

上面的 CSS 字串同時被 div span 與 span.c 選上，結果是呈現 span.c 的粉紅色，為什麼呢？

邏輯很簡單，每個 CSS Selector  都有一個「優先度」，可以用「數值」來表示。

標籤選擇器，像是 div 或者 span，得 1 分。

類別選擇器，就是 class 定義的名稱，得 10 分。

ID 選擇器，就是 id 定義的名稱，得 100 分。

還有行內選擇器（Inline selector），就是用 style="..." 直接寫在標籤裡的，得 1000 分。

最終以得方最高的選擇器勝出。

Responsive Web Design

Responsive Web Design？

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

那為了手機另外做一個網站可以嗎？是不是只要有錢有時間就可以，其實不然，不只是建置的時間，還有維護的時間都要加倍，最大的問題是，給手機用的網頁寬度要設多少呢？桌機從七百多像素到將近一千像素都有（15吋到近30吋的螢幕），桌機小螢幕遇到大網頁挺多滑鼠拉一拉就好了，那手機呢？三吋、四吋、五吋到六吋的螢幕都有，甚至還有十幾吋的平板，這光是網頁寬度就訂不出來了，寬度訂小了，大螢幕很痛苦，訂的大了，小螢幕又沒滑鼠可以拉，這條路還走得下去嗎？

那有沒有可能一套網頁通吃呢？其實是有可能的，這就是 Responsive Web Design 的目的。

Responsive Web Design 組成

Responsive Web Design 由三種 CSS 技術組成：

• Media Query
• Fluid Layout
• Flexible Images

從技術的名稱可以想像 Responsive Web Design 的內容，以 Media Query 決定使用不同的 Fluid Layout，並輔以不同的 Flexible Images。

Clickable Div in IE

Clickable Div

想要做一個隱形連結，例如在一張圖片上有兩個位置可以點，直覺想到可以用兩個absolute的 div 放上去想要的位置，然後為 div 加上 click listener。

<style type="text/css">
.div {
  position: absolute;
  border: 1px solid white;
  cursor: pointer;
  width: 70px;
  height: 165px;
}

.divA {
  top: 30px;
  left: 60px;
}

.divB {
  top: 30px;
  left: 280px;
}
</style>
<div style="background-image: url('clickable.jpg'); width: 400px; height: 275px;">
  <div class="div divA" onclick="alert('Click A');"></div>
  <div class="div divB" onclick="alert('Click B');"></div>
</div>

嗯，在 chrome 與 IE 各版本（ie7 - ie11）都沒問題。

HTML5 與 CSS3 的偵測器 - Modernizr 2.7.1

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

「這個新功能很炫，但是可以用了嗎？瀏覽器支援了嗎？」

這是網頁開發一定會遭遇的問題，幸好 Firefox 與 Chrome 更新速度很快，而且常常（偷偷的）自動更新，比較沒有這些問題，但是 IE 就不是這麼一回事了，尤其是一堆舊的 IE 遲遲不願更新的情況，讓 IE 一直是網頁設計最大的挑戰，IE 真的為網頁設計帶來許多就業機會啊！

Modernizr 是什麼？

官方定義如下：

「Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.」

重點如下：

• Javascript 程式
• 用來偵測
• 瀏覽器是否支援 HTML5 與 CSS3 功能

Modernize 的功能如下：

• 用來偵測使用者的瀏覽器是否支援想要使用的功能。
• 適合用來做 Progressive Enhancement。
• 在頁面載入時立即執行所有偵測（可以自訂偵測項目），並將偵測結果放在一個 Javascript 物件（Modernizr）供 Javascript 程式使用，再另外增加 CSS class 到 HTML 物件（html）上供 CSS 使用。
• 目前可以測試超過 40 個功能，而且厲害的是只需要幾毫秒的時間。
• 整合 yepnope.js 做條件式載入，有關 yepnope 請參考 yepnope.js 讓瀏覽器只載入需要的檔案 與 More in yepnope 1.5.4。

More in yepnope 1.5.4

前一篇筆記「yepnope.js 讓瀏覽器只載入需要的檔案」只提到條件式載入，這邊再來看看 yepnope 還有哪些功能。

官方定義

yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need.

歸納的重點如下：

• 非同步的方式
• 依據指定的條件
• 超快的
• 載入所需的檔案

yepnope.js 讓瀏覽器只載入需要的檔案

yepnope.js 有很多功能，這邊想用的是「條件式載入」。

條件式載入？

以不支援陣列 indexOf() 的 IE8  為例（真弱），以前的作法是先載入再判斷要不要用。

讓 IE8 認識 CSS Media Query 的 Respond.js

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

Media Query 測試程式。

Reset CSS

Reset CSS?

對 CSS 稍有經驗的人都知道，同樣的 CSS 檔案在不同的瀏覽器（Chrome, FF 或 IE 等）得到的結果有點不太一樣，這起因於兩個原因，第一個是各家瀏覽器使用不同的預設值，例如 line-height、margin、font-size 等，這就是 Reset CSS 的由來，第二個是 render 引擎不同，當然結果會有些微的不同，這是無解的，所以只好不斷的教育客戶或使用者，在不同瀏覽器要得到完全相同的結果是不可能的。

最常用的是...

網路上可以找到很多 Reset CSS，最常被使用的是 meyerweb.com，可以從 http://meyerweb.com/eric/tools/css/reset/reset.css 下載。

如何關閉 textarea 手動拖拉改變長寬（resize）的功能

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

既然是 CSS 的標準，那就表示可以改變設定值。

如何在半透明背景使用不透明文字或圖片

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

聽說 CSS3 有專門的解法，但是這邊先用 CSS2 之前的作法。

原理很簡單，就是因為上下層的透明度會傳染，那就切斷上下層的關係就好了，也就是說彈出視窗和遮片是在同一層，然後用 position 為 absolute 將兩個 div 疊在一起。

Hello Jsoup 1.6.3

處理 HTML 的好工具。

讀 HTML 有兩種方式：

• DOM Navigation - 幾乎是 DOM 與 jQuery 的 Java 版本，API 幾乎一樣
• CSS Selector - 會 CSS 的就知道好用！

除了讀，還可以寫，API 幾乎是 jQuery 的翻版，還可以更正錯誤的 HTML 並輸出。

更棒的是，可以將相對路徑轉成絕對路徑！

用 jQuery 種一顆簡單樹（Tree）

小時候要用 Javascript 做一個下面這種樹狀圖，應該要報個幾十個人天吧。

如果再加上右鍵功能，嗯，「PM，請給我幾個人月吧」！

最大的問題應該出在瀏覽器相容性，以及少了一些很好用的 function 吧。

這些問題 jQuery 都解決了，所以今天種一顆樹簡單多了。

用 jQuery 取得 Div 的寬度與高度（Width, Padding, Border, Margin）

這邊講的不一定是 div，所有 Block 物件都可以適用。

什麼是 Block 物件？

簡單講就是會斷行的物件，像 div 或 p 都是；相對於 Block 物件的叫做 Inline 物件，也就是不會斷行的物件，像是 span 或 img。

有關 Block 物件的寬度與高度有個專有名詞，叫做「Box Model」，有興趣 google 一下 Box Model 的圖片就知道了。

用 jQuery 取得 HTML 文件高度（Document）與瀏覽器視窗高度（Viewport）

文件高度（Document Height）指的是整篇 HTML 的高度，若少於瀏覽器 Viewport 高度則不會出現 Scrollbar，反之則會。

Document Height 是用 Javascript 提供的 document 物件來取得。

var h = $(document).height();

視窗高度（Viewport Height）指的是瀏覽器用來顯示 HTML 的高度。

在 Firefox 裡消失的 mouseup

在實做 drag and drop 時發現 Firefox 有個奇怪的行為。

若只是單選沒有移動滑鼠，也就是 mousedown 與 mouseup，沒有 mousemove，那 Firefox、IE 與 Chrome 都正常。

但是當拖拉時，IE 與 Chrome 正常，Firefox 怪了，只有 mousedown 與 mousemove，沒有觸發 mouseup。

CKEditor 圖片置中（Center-Aligned Photo）

CKEditor 3.6 並沒有圖片置中的功能。

靠左對齊與靠右對齊分別是用 CSS 的 float: left 與 float: right 來實做，float 當然沒有 center 這個選項。

用 float 的好處在文繞圖，而置中對齊當然不需要文繞圖。

要讓圖片可以置中對齊，這邊想到幾個方法：

第一個是對 img 外層的 block 元件如 div 加上 maring: 0 auto，然後再對 div 設定寬度，就可以讓裡面的圖片置中對齊，麻煩的是要知道圖片的寬度。

<div style="width: xxxpx" margin: 0 auto">
<img .../>
</div>

如何針對不同的瀏覽器使用不同的 CSS Rule

很不合群的 IE6（或者全部的 IE）為了修飾其不遵守 CSS 標準的行為，所以發明了一大堆專屬的語法，像是在 CSS Rule 前面加上底線，表示 IE 專用，其他瀏覽器就會自動跳過。

為避免該死的 IE6 年代留下來的餘毒，現在有比較乾淨的作法，就是利用 Javascript 偵測瀏覽器的廠牌與版本，然後在 body 加上特定的 class，稍後需要針對特定的瀏覽器做 CSS Rule 差異處理時，就可以利用這個 class。

[Gain] CSS的float與relative在FF處的不好

狀況一：

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]的上面。

IE：
位置同FF。
但重點在div[b]與div[c]是相連，並非div[b]疊在div[c]的上面。


狀況二：

div[a]
div[b] with float:right
div[c] with position:relative

FF：位置不變，但div[b]跑到div[c]的下面（或者說div[c]把div[b]蓋住了），所以永遠點不到div[b]。
IE：完全與狀況一的IE相同。

[Gain] CSS Layout: 2 Columns Without Footer Using Float

HTML Code:

body
div[header]
div[wrapper]
div[leftBar] // float的div得放在前面，讓下面的div可以頂替上來
div[content]

CSS Code:

body {
margin: 10px;
}
#header {
width: 100%;
height: 120px;
margin-bottom: 5px;
border: 1px solid #808000;
}
#wrapper {
/* 使用float排版時，不用像absolut position那樣需使用relative position */
}
#content {
/* 為leftBar預留空間 */
margin-left: 205px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}
#leftBar {
/* leftBar float到左邊 */
float: left;
width: 200px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}

[Gain] CSS Layout: 2 Columns Without Footer Using Absolute Position

HTML Code:

body
div[header]
div[wrapper]
div[content]
div[rightBar]

CSS Code:

body {
margin: 10px;
}
#header {
width: 100%;
height: 120px;
margin-bottom: 5px;
border: 1px solid #808000;
}
#wrapper {
/* 不設top與left的relative，仍留在原位置 */
/* 作為rightBar絕對放置的根據 */
position: relative;
}
#content {
/* 為rightBar預留空間 */
margin-right: 205px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}
#rightBar {
/* rightBar以絕對放置 */
position: absolute;
top: 0;
right: 0px;
width: 200px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}