reset css的另一種選擇 - normalize.css

相信很多的前端開發者都使用過reset.css，我們使用reset.css的目的在於統整各個瀏覽器的樣式設定。但是在使用reset.css的時候會產生幾個問題，其中一個問題就是標簽的原始樣式被重置了，這使得我們要重新再次設定這些標簽的樣式。下圖是使用了Eric Meyer's reset 2.0版本的reset.css：

[[MORE]]

而reset.css的另一個問題，就是當你打開瀏覽器開發工具在查看標簽樣式的時候，會發現一堆reset.css的程式碼，如下圖：

講了那麼多關於reset.css的不便之處後，要開始正式介紹本文章的主題 −normalize.css。normalize.css的優點就是不會產生上述reset.css的問題，它能夠統一各種瀏覽器的樣式設定，而不會重置標簽的基本樣式，使得我們不必再次設定標簽的基礎樣式，如下圖：

使用normalize.css的另一個特點在於不會產生過多的css程式碼，我們同樣使用開發者工具來查看標簽的樣式，如下圖：

如果你和我一樣對於reset.css感到不便，那麼不妨使用normalize.css，以下是normalize.css的連結： http://necolas.github.io/normalize.css/

注意事項：

使用normalize.css的時候，要注意到瀏覽器版本的問題。如果你的專案需要考慮到ie6、ie7的呈現，那麼就需要設定ie條件判斷式，並且引用作者提供的另一版本css了。

參考資料：

• Eric Meyer's reset 2.0
• normalize.css

compass: svg圖片替換文字

上一篇 compass:圖片替換文字中，logo圖片使用的格式為png格式，而png為點陣圖類型的圖片，內容的周圍難免會出現模糊的情況(圖片放大的情況下更為明顯)。然而logo作為網站的核心角色，我們會希望logo的呈現能夠越清晰、越銳利越好，假如使用svg格式的圖片作為logo，那麼圖片不管在什麼情況下，其品質都可以受到保證。下面圖片是png與svg圖片經過放大後的比較，左邊是png格式，右邊為svg格式，我們可以很清楚地看得出來品質的差距。

[[MORE]]

以上面OHM跨界所的例子舉例，如果我們要將logo使用替換文字的技術，並且將圖片從png格式變成svg格式，我們可以使用上一篇文章中所提到的mixin來實現這個效果，程式碼如下：

.logo a {
  /* 要將行內元素轉換成塊元素才能設定寬高 */
  display: block; 
  /* 將圖片設置為svg格式 */ 
  @include replace-text-with-dimensions("logo.svg");   
}

但是這樣會有個問題，因為有些瀏覽器(ie9前)沒有支援svg格式，所以在這些無法支援svg的瀏覽器中，logo是無法顯示的。這時候要想辦法讓不支援svg格式的瀏覽器採用替代方案(使用png格式)，以下是改進的程式碼：

.logo a {
  /* 要將行內元素轉換成塊元素才能設定寬高 */
  display: block; 
  /* 自動設定容器寬高，並在svg不支援情況下，使用png格式圖片 */ 
  @include replace-text-with-dimensions("logo.png");   
  /* 多重背景，取消前面設定的背景，並且使用svg的圖片作為背景 */
  background-image: none, image-url("logo.svg"); 
  background-repeat: no-repeat; 
  /* 使背景尺寸等比縮放至容器設定的寬度與長度，讓背景始終被包含在容器中 */
  background-size: contain; 
}

這裡利用瀏覽器不支援svg格式也就不支援多重背景設定的特性，所以一旦瀏覽器沒有支援svg格式，那麼backgorung-image這段程式碼就不會執行，如此前面設置的png格式不會被覆蓋，這時候瀏覽器只會採用png格式來顯示。相反的，如果瀏覽器有支援svg格式，那麼多重背景的程式碼將會被執行，如此多重背景設定將覆蓋掉前面png格式的設定，此時瀏覽器將顯示svg格式的圖片。

參考資料：

• OHM跨界所(http://ohm.com.tw/ )
• compass(http://compass-style.org/reference/compass/typography/text/replacement/ )

compass: 圖片替換文字

在制作網頁時，我們大部份將logo以圖片的形式呈現，但是圖片的內容是無法被搜尋機器人讀取的，所以我們就少了一個提升網站SEO的機會。這時候圖片替換文字的技術就派上用場了，它能夠讓我們輸入的文字被機器人讀取，又可以讓使用者只看到圖片的內容，同時達到視覺以及提升SEO的功能，實為一石二鳥之計。以下為實際的例子：

(截取至OHM跨界所)

[[MORE]]

使用者看到的是一張圖片，而html中是一個文字為OHM的a標籤，此段CSS程式碼為：

.logo a {
  display: block; /* 要將行內元素轉換成塊元素才能設定寬高 */
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/logo.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* 圖片的大小 */ 
  width: 100px; 
  height: 48px;
}

但是這些css的程式碼非常的繁瑣，而且一旦圖片尺寸變更了，我們還要去重新設定樣式的寬高。還好compass提供了一個非常便利的mixin，此mixin最大的特點就是幫我們自動設定圖片尺寸的大小，一旦發生圖片尺寸被變更的情形，我們就不用再次設定樣式的長寬了，而且只需輸入一行程式碼就可以實現圖片替換文字的功能，這段程式碼如下：

.logo a {
  display: block; /* 要將行內元素轉換成塊元素才能設定寬高 */
  @include replace-text-with-dimensions("logo.png");
}

這段程式碼經由compass編譯後，會自動產生前面所述的CSS程式碼，而且樣式的長寬也被設定好了。

需要的注意事項： 如果您欲設定的圖片替換文字的元素是行內元素的話，如a、span、strong ...等等標簽，一定要將行內標簽轉換成塊元素標簽(disaplay: block;)，這樣設定的長寬才會有效果。

參考資料：

• Compass Text Replacement
• OHM

compass：文字過多溢出時自動省略

資訊非常豐富是入口型網站、拍賣網站、論壇網站…等等網站的共同特色，這些網站將資訊整理後，並且透過列表方式呈現，使得用戶可以在很短的時間內找到自己有興趣的主題下去閱讀。如下圖(截取至mobile01)：

[[MORE]] 我們在制作這種列表的時候，一旦資料的字數過多時，將會導致版面不整齊。 如圖所示：

為了解決這種情形，我們有兩種解決方式：

1.藉由後端來控制資料的顯示字數。 2.透過CSS來控制資料的顯示。 不過第一種解決方式牽扯到後台的操作，所以這邊不會說明第一種方式解決。

使用CSS將過多的字數省略的語法如下：

.title {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis; /* 支援其他瀏覽器 */
  -o-text-overflow: ellipsis; /* 支援其他瀏覽器 */
  text-overflow: ellipsis;
}

加了此段樣式後，圖片中的標題就會變成單行顯示，並且在文字後面加上...的省略符號，如圖所示：

但是每次都要打這麼多行的程式碼，實在非常繁瑣。這時候如果使用compass的mixin，只需要一行程式碼就解決了，大幅減少撰寫程式的時間，程式碼如下：

.title {
  @include ellipsis;
}

這段程式碼將透過compass的編譯器自動轉成上面非常繁瑣的程式碼。

使用限制與缺點：

CSS控制文本溢出省略無法達成多行文字溢出的省略的效果，因為CSS會強制將文本變成單行顯示，而且ellipsis屬性只有在單行顯示才會執行自動省略的效果。所以如果想要完美的解決此問題，必須透過後端去控制資料的顯示。

參考資料：

• mobile01
• compass

compass: 使用compass清除浮動

我們經常利用浮動元素來達成頁面的排版，例如將<li>進行浮動來制作水平的菜單，或是浮動<div>來完成兩欄位的排版…等等，下圖為使用浮動來產生兩欄排版的例子:

不過一旦將元素進行浮動後，將導致浮動的元素脫離原本的資訊流，這使得包覆這些浮動元素的外層元素，無法偵測到這些被浮動元素的實際大小，進而影響外層元素的樣式設定，如背景、框線...等等。以下面例子舉例：

html-code:

<div class="content">
  <div class="sidebar">我是sidebar</div>
  <div class="main">我是main</div>
</div>

css-code:

.content {
  background-color: #ccc;
  padding: 1.5em;
}
.sidebar {
  float: left;
  width: 30%;
  background-color: #3498DB;
  height: 150px;
}
.main {
  float: left;
  width: 70%;
  background-color: #2ECC71;
  height: 150px;
}

實際呈現的情形如下圖：

這個問題很多的解決方式，而我採用的解決方式來自於A new micro clearfix hack這邊文章中，程式碼如下：

.content {
  background-color: #ccc;
  padding: 1.5em;
  *zoom: 1;
}
.content:after {
  content: "";
  display: table;
  clear: both;
}

結果如下圖：

而每次要解決這個問題都要打這麼多行的程式碼，實在非常浪費時間。在compass的幫助下，你只需要打一行程式碼，此段程式碼如下：

.content {
  @include pie-clearfix;
}

此段程式碼經過compass編譯後，就會自動產生上述繁瑣的程式碼，使我們節省這些寶貴的時間。

注意事項： 這個解決方法不適用於firefox 3.5之前的版本，如果需要支援firefox 3.5之前的版本，請使用compass提供的另外一個mixin，程式碼如下：

.content {
  @include legacy-pie-clearfix;
}

這段程式碼經過compass編譯後會產生以下的css程式碼:

.content {
  background-color: #ccc;
  padding: 1.5em;
  *zoom: 1;
 }
.content:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

參考資料：

• compass
• A new micro clear fix hack
• How To Clear Floats Without Structural Markup

菜鳥前端工程師的自學之路

前言

這篇文章目的用來引領自己學習的方向，並且記錄自己學習的過程。也希望這篇文章可以幫助到一些和我一樣想要踏入前端領域，卻又不知道從何學習起的人們。

確認學習目標

HTML、CSS、JavaScript三大語言是前端工程師的基石，所以我必須在這三個語言中奠定良好的基礎。在學習這三種程式 語言時，我將HTML與CSS放在同時間學習，而JavaScript則在奠定前面兩種語言的基礎後再開始學習。

如何學習?

自己經過一陣子的爬文後，終於發現了一條很棒的前端自學路線，它就是「看書」，而且是看經典的「好書」。而自己 爬過很多關於前端推薦書籍的文章，自己將這些文章中出現機率最高而且評價也最好的書籍作了一份列表，並且開始進行閱 讀這些書籍。

HTML、CSS的學習書籍(目前已完成閱讀)

1. HeadFirst深入淺出_HTML與CSS、XHTML(入門首選)
2. HTML＆XHTML大全(基礎)
3. CSS大全(基礎)
4. 精通CSS：高級Web標準解決方案(進階)

額外可閱讀以下這些書籍，它們都是偏重實例講解

1. css那些事
2. 無懈可擊的WEB設計
3. CSS網站佈局實錄 基於Web標準的網站設計指南
4. The Zen of CSS-網頁視覺設計の王道

Javascript的學習書籍(目前學習中)

1. JavaScript.DOM編程藝術(入門)→完成閱讀
2. JavaScript高級程式設計(基礎)→正在學習中

以下是進階的書籍

1. JavaScript語言精粹
2. 高性能JavaScript
3. JavaScript DOM高級程式設計
4. JavaScript設計模式

以上除了前三本書和The Zen of CSS是繁體書外，其餘皆是簡體書。

你可能會問這麼多本書真的看得完嗎？我只能回答HTML和CSS的方面，因為一開始對於這些語言不是很了解，所以在前四 本書的時候花了很長一段時間學習。不過在自己懂了核心知識點後，發現每本書之間其實講得都大同小異，所以學習速 度會變得非常快。

總結與自省

除了從書中獲得理論知識外，最重要的就是實踐了。自己在閱讀書籍的過程中，也製作了一個自己的作品集網站，目的 在於讓書中所學知識能實際運用在製作網頁中。不過自己在理論知識的學習與實踐項目來比較的話，自己實在嚴重缺乏實踐 ，所以接下來學習JS的部分，將會重視理論與實踐的平衡。

馬克鰻(MarkMan) 一款讓設計師可以很輕鬆的對視覺稿完成標註的免費軟體

前言

小弟我在無意中發現了這麼一款免費軟體，它可以很輕鬆的在圖片上完成標註，而且也可以測量圖片上各物件的尺寸大小或間距。如果想要下載此軟體，還請至官方網站(http://www.getmarkman.com)下載，此軟體同時支援WIN/MAC。
接下來就讓小弟我來為各位介紹這款軟體的一些基本功用與操作了。
PS：由於小弟使用的是WIN系統，所以下面會以WIN系統來進行說明，對於MAC的使用者真是抱歉。

開啟與使用

當你安裝好馬克鰻後並且開啟，它就會出現這麼一個視窗，這時候你可以把想要進行標註的圖片直接拖曳到此視窗裡面，或是先行將視覺搞進行複製的步驟，然後在開啟馬克鰻按住Ctrl+V貼上，就可以開始進行標註或測量的工作了

基礎功能介紹

1. 長度標示：

當你選擇了或者按快捷鍵1或L時，就可以使用長度標示的功能。其用法在你想要標示長度的地方，按下左鍵後不要鬆開，並開始進行拖曳直到你想要結束的地點後再放開，如此就可以完成長度的標示了。如下圖所示

此外你可以使用滾輪來進行長度的微調，也可以使用↑↓←→等四個方向鍵來對標示位置進行微調。補充說明一下，馬克鰻的數字都是以px為單位。

2. 長寬與座標標示：

選擇或是快捷鍵2或P，就可以進行長寬與座標位置的標記。使用方法如同長度標記，按下左鍵後不放開，直到框選完物件後放開。但是要注意一點，它只能讓你往右下方的方向拖曳，我想這應該是為了搭配座標而啟用的設定。效果如下圖：

這邊要對座標進行額外說明，它是從整張圖片的左上作為原點，往右增加X值，往下增加Y值，而座標標示的位置點是你按下左鍵的那個起點。

3. 顏色標記：

選擇或者按下快捷鍵3或I後，對你想要得知顏色的位置點擊左鍵，就可以獲得該位置點的顏色代碼，如下圖所示

之後你可以按快捷鍵C直接複製代碼，或者對代碼按下右鍵，它會出現選項讓你複製代碼，之後你就可以進行其他運用了，如將代碼貼到CSS程式中。

4. 文字標記：

選擇或者快捷鍵4或T，在你想要的地點按下左鍵後，就可以輸入你想要的文字並完成說明標註。如下圖所示：

此外，你可以改變文字的顯示長度，在你點選文字標記後，會出現兩個圓圈，點擊離箭頭遠的圓圈並拖曳，就可讓你調整文字顯示長度了。而離箭頭近的圓圈則可以調整文字的顯示位置。如圖：

5. 移動圖片顯示位置：

選擇 或快捷鍵5或ESC或空白鍵，並且搭配滑鼠左鍵進行拖曳，可以移動圖片的顯示位置。

6. 縮放圖片大小：

當你需要對圖片進行放大或縮小的時候，可以在介面的右下方發現這個圖示，你可以直接點擊他或是使用Ctrl+滾輪讓你可以調整圖片的大小。在這邊要稍微抱怨一下，它的縮放功能有點破爛，一次都是跳一大格畫面，沒辦法很平滑的縮放圖片。

7. 其它功能：

上述可以進行標記的功能，我們都可以改變它的標記顏色。對要改變顏色的標記按右鍵，它就會出現改變顏色的選項讓你更改顏色了。而且所有標記也都可以使用↑↓←→等四個方向鍵來對標示位置進行微調。

8. 儲存：

這邊要稍微提一下儲存，你可以在介面左下角找到 或是直接Ctrl+S進行儲存，馬克鰻會幫你新增一個有標記的PNG檔到資料夾裡面，此時在你的資料夾中會出現一個副檔名為mkm的檔案，其圖示為 ，當你下一次想要修改標記過的圖片時，點選此檔案就可以讓你再次進行標記與修改。

總結

這是一款很簡單又實用的免費軟體，小弟使用它來測量視覺稿的物件位置與間距，使我很輕鬆就能完成CSS部分的設置。除了製作頁面外，自己也使用馬克鰻來幫助自己記錄一些很優秀的網頁。希望這篇文章能夠對各位有所幫助，謝謝。

歡迎隨意轉載，但請註明出處，謝謝。