CSS架構:最新最佳實踐(摘錄)

使用Normalize.css重置默認樣式

香港彩票透码 www.kptln.icu 大多數人推薦使用normalize.css重置默認樣式,而不是使用由Eric Meyer寫的非常流行的CSS Reset或者自己寫的Reset。Normalize.css給所有瀏覽器的元素設置了一個共同的樣式,而不是重置了這些元素的基本樣式??梢圓慰糶ithub上normlize.css項目,它具有以下優點,不僅僅是CSS樣式重置:

使用clear fix清除浮動

.cf:before,.cf:after{content:"";display:table}
.cf:after{clear:both}
.cf{*zoom:1}

空div

說道不正確的使用空div,你應該停止使用作為頁面的分隔符的、帶有clear和邊框的空<div>。

<div class="divider"></div>...
div.divider {
  border-top: 1px solid #ABAA9A;
  clear: both;
}

是的,你知道這段代碼作為清晰的可視化的頁面分隔符確實不錯,但是它缺少語義。 OOCSS創始人、CSS大師Nicole Sullivan建議使用<hr>元素分割頁面不同的部分,并且給<hr>元素加上一些必要的樣式。

所以你應該使用下面的代碼,而不是前面提到的:

<hr class="divider">...
.divider {
  border-top: 1px solid #ABAA9A;
  clear: both;
}

圖片替代文字

使用圖片代替文字的CSS技術在前端開發有著悠久輝煌的歷史。在2012年3月,Jeffrey Zeldman引進了一個新的技巧,稱為 Kellum方法。不是使用-9999px hack使文本超出屏幕達到隱藏文本的目的,他的技術在隱藏文本的同時保留了文本在屏幕范圍之內。

.hide-text {  text-indent: 100%;  white-space: nowrap;  overflow: hidden;
}

這種方法提高了性能,特別在平板電腦和更小的屏幕設備上更顯著。

使用圖標元素

在你的頁面里,你可能會使用<span></span>作為一種放置圖標的方式,就像這樣:

<li>
  <span></span>
  <span id="favorite-insert-point"></span></li>

如果是這樣,看看這樣是不是好點:圖標應該使用一個圖標(icon)元素,可以使用<i>標簽。隨著在Twitter Bootstrap中使用,這個方法已經越來越流行了。

<p><i class="icon icon-comment"></i>23 comments</p>...
.icon { background-image: url( sprites.png ); }
.icon-comments { background-position: 0 -30px; }

使用<i>標簽比使用標準的<span>標簽更有語義,并且可以容易的找到頁面中圖標的位置。

使用css3

網站經常在一些元素上使用圖片,但這并不是必須的,這樣使頁面圖片變得臃腫。使用CSS3可以極大的有助于消除這些圖片,同時為網站轉向響應式設計做好準備。對大多數網站來說,任何圓角、陰影、文字陰影、漸變和box-sizing的實例都是CSS3的一個福音。

但是,CSS3有兩個消極點:首先,CSS3規范的很多部分沒有確定,因此現代瀏覽器對CSS3的屬性需要加上瀏覽器前綴。其次,CSS3不被流行的舊瀏覽器支持,這樣的話就需要可靠的機制或者輔助腳本。

CSS3兼容性

很不幸,舊版本的IE和CSS3存在最大兼容性問題。當前,CSS3只有部分屬性被IE9支持(最明顯的就是CSS3選擇器,可以查看HTML5和CSS3支持,獲取最新的支持列表),IE6到IE8完全不支持。如果你打算使用任何CSS3屬性,對使用IE9,IE8或者更低版本的用戶來說,我推薦安裝合適的可靠的處理機制。

CSS3工具

CSS3概述和哪些屬性可以放心的使用可能是另一篇文章要談論的。使用CSS3最重要的步驟之一是要緊跟最新規范和瀏覽器實現規范的變化。跟蹤這些變化可能有點痛苦,所以我建議使用//css3please.com/ 和//html5please.com網站了解最新的語法變化和瀏覽器支持情況。對大多數的屬性,CSS3, Please!是個超級棒的網站資源。對于漸變,Ultimate CSS Gradient Generator是一個非常不錯的工具,它可以生成合適的、具有良好支持的漸變代碼。

如果你自己特別懶,不想記住怎么寫瀏覽器前綴,Prefixr會幫你在代碼里添加的。你也可以使用由Lea Verou寫的prefix-free,在服務器上上傳了這個腳本后,就會在你的代碼里添加所有的前綴。

制定網格

如果你的網站目前還沒有建立一個網格系統,從此你必須敦促自己建立一個。如果你的代碼有大量width、margin、padding的實例,并且相同大小的元素間不在相同的尺寸內,那么你的網站早就需要一個網格系統了。

你可以使用你自己的元素尺寸建立一個網格系統,或者你也可以使用一個CSS網格框架(很多CSS網格框架,使用任何一種都行,甚至可以使用一個響應式的框架)。

使用Box-sizing

如果你自己制作屬于自己的網格系統,一個非常有用的CSS屬性是box-sizing。Box-sizing可以改變瀏覽器計算一個盒元素尺寸的方式,這是專門用來處理尺寸大小的,特別是布局和網格。

Box-sizing是參照眾所周知的“IE盒模型“來計算元素盒子的尺寸的,IE盒模型認為盒子的尺寸包括padding值。那就意味著當元素同 時定義了width和padding時,盒子的寬度應該等于width值,而不是width加padding的值。如下圖所示:

CSS架構:最新最佳實踐

上圖是W3C盒模型和IE盒模型對比

使用box-sizing:border-box(根據W3C盒模型,默認的是box-sizing:content-box)使計算布局更容易,從中可以得到真正的恩惠。Box-sizing屬性也需要加上前綴。

制作流體網格和圖片

建立網格的最后一個方面(如果你提前想到了未來友好的設計)就是將固定的像素網格轉換成百分比(或者em)。決定百分比大小的最好方式是采用Ethan Marcotte的響應式網站設計黃金法則:target=content/context。很感激,有計算器可以幫計算RWD網格的尺寸。我推薦一個工具RWD Calculator。

對友好設計同樣重要的是使圖像自適應容器的大小。實現的主要方法是下面一行簡單的代碼:

 {
  : ;
  : ;
}

這樣,圖像在流式容器里就不會超出或縮小。

別忘了HTML5

最后,總得來說HTML5對所有網站升級是絕對重要的。問題的關鍵不再是一個網站決定實現HTML5,而是何時能實現。我覺的HTML5有幾個方面 對任何使用的人都有用,在一定程度上奠定了響應式設計的基礎,但是,最容易開始的地方就是使用HTML5 文檔聲明。作為指明文檔規范的指令,HTML5 doctype可以快速改變頁面模板和實現文檔重構。

<!DOCTYPE html>

在你的文檔里不需要改變什么,因為Doctype是向后兼容的,如果使用了任何HTML5標簽,他們也會起作用的。

說道標簽,使用HTML5的另一個方面就是使用一些新的標簽,在為創建代碼??檣柚靡桓雋己沒〉氖焙蠐兄諞趁嬗鏌寤?。但是在使用CSS3時,落 后瀏覽器的兼容性就需要認真的考慮。為了支持新標簽識別,可以在舊瀏覽器里的頁面上加上腳本,這樣能夠使舊瀏覽器正確的呈現元素。

最常用的腳本就是HTML5 Shiv,可以使HTML5元素在IE6~IE8被識別。唯一的缺點就是頁面要多加載一個腳本文件。但是,說真的,為了迫不及待的使用HTML5,這點犧牲也是值的。

 來源:前端開發博客 


上一篇: 前端進階之路:如何高質量完成產品需求開發

下一篇: 2016年都要完了,你還沒掌握移動開發就該退休了!

分享到: 更多
开户送38体验金不限id娱乐 彩票单双大小概率 玩北京pk10一天赢500 APP自助领取彩金38 棋牌游戏下载 七乐彩中五个号多少钱 黑龙江时时怎么了 赌龙虎怎么可以赢 北京pk10现场视频直播 二十一点扑克游戏下载 老时时彩历史开奖记录 重庆时时全天在线计划 欢乐生肖开奖记录 中国最正规pk10app彩票 时时彩刷水稳赚的玩法 极速时时选号技巧