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