兼容性和工程化

CSS工程化

一個網頁一般只有幾種配色，這些配色會處處使用，或者是一些樣式（好比彈性盒、固定位置等）

也會處處使用，這樣一來，咱們不得不處處的去書寫這些重複代碼。一旦有一天網站改版，顏色發

生變化，代碼修改量是很是龐大的。

在CSS中遇到的這些問題，若是放到後端開發領域，是不可思議的。然後端開發之因此不容易發生

這樣的問題，是由於後端有多種技術手段來解決該問題（函數、類、模塊等）。而如今，前端的迅

速崛起，也爲這些問題帶來了解決方案。

本文討論的《CSS工程化》，就是使用後端開發的思惟，來解決前端遇到的問題。

 

CSS編譯器

CSS編譯器，也叫作CSS預編譯器，是指開發者使用某種相似CSS（但實際不是）的語言編寫代碼，而後經過編譯器，將其編譯成瀏覽器真正能執行的CSS代碼。

目前常見的CSS編譯器有：SASS和LESS。本文已最經常使用的SASS爲例，來說解如何用SASS來實現優雅簡潔的CSS代碼。

 

SASS代碼雖然看上去和CSS代碼很像，但其實仔細觀察，它並非CSS語言（CSS中可沒有變量），而它是用SASS語言書寫而成的。

這段代碼並不能被瀏覽器識別，由於瀏覽器不認識SASS代碼。

所以，須要使用SASS編譯器進行編譯，它會將咱們的SASS代碼編譯成CSS代碼

 

SASS的安裝

SASS編譯器是使用Ruby語言書寫而成的，所以，SASS的執行依賴Ruby的環境。值得慶幸的是，咱們不須要進行繁瑣的步驟去安裝和配置Ruby，直接安裝一個第三方的工具Koala便可。

Koala是一個預編譯工具集，它內置了SASS、LESS等多種前端的預編譯器，而且提供圖形化的操做界面。

 

準備工程

新建一個文件夾，並用你熟悉的文本編輯器打開（例如VSCode），而後在文件夾中新建css文件

夾，用於存放SASS文件以及CSS文件，再在根目錄中新建一個index.html文件。

 

編寫SASS代碼

在css文件中新建一個index.scss文件，注意後綴名爲.scss，表示這是一個使用Sass CSS語言

編寫的文件。

 

sass語言中是支持//註釋的。

 

編譯

咱們書寫好了SASS代碼，如今須要將它編譯成瀏覽器可識別的CSS代碼。

如今，打開安裝好的Koala，將你的工程文件夾拖動Koala的主界面中。

 

此時，若是不出意外，你的VSCODE中，已經生成了對應的CSS文件和一個Map文件。

 

使用SASS開發就是這麼簡單，不只如此，只要你不關閉Koala，以後你對index.scss文件做出的任何改動，它都會直接自動編譯到index.css中。

那麼map文件是幹嗎用的呢？這是一個指示SASS文件和CSS文件映射方式的文件，若是你是一個初學者，簡單來講，就是沒用。你能夠在Koala中進行設置，讓它不要生成這個文件。

 

編譯選項

Koala提供多種編譯選項可供配置，這裏介紹兩個：

1. Autoprefix自動前綴

選中該選項，在編譯時，會自動對瀏覽器有兼容問題的屬性加上廠商前綴。

2. compressed壓縮模式

選中該選項，在編譯時，會對生成的代碼進行壓縮，以達到最小文件體積。

 

變量

sass讓人們受益的一個重要特性就是它爲css引入了變量。你能夠把反覆使用的css屬性值 定義成變

量，而後經過變量名來引用它們，而無需重複書寫這一屬性值。或者，對於僅使用過一 次的屬性值，你能夠賦予其一個易懂的變量名，讓人一眼就知道這個屬性值的用途。

sass使用$符號來標識變量。

 

變量聲明

sass變量的聲明和css屬性的聲明很像：$highlight-color: #F90;這意味着變量$highlight­color

如今的值是#F90。任何能夠用做css屬性值的賦值均可以用做sass的變量值，甚至是以空格分割的

多個屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個屬性值，如

$plain-font: "Myriad Pro","Myriad","Helvetica Neue","Helvetica","Liberati

on Sans","sans-serif";

 

嵌套屬性

在sass中，除了CSS選擇器，屬性也能夠進行嵌套。儘管編寫屬性涉及的重複不像編寫選擇器那麼糟糕，可是要反覆寫border-style、border-width、border-color以及border-*等也是很是煩人的。在sass中，你只需敲寫一遍border

 

簡單混合器

例如，若是你的網站，須要大量使用到彈性盒（每每如此），而且這些彈性盒都有共同的特徵（好比須要換行、兩端對齊排列等），你大可沒必要每次都去重複編寫代碼，使用混合器可以幫助你僅編寫一次這樣的代碼:

@mixin flex-container{

    display:flex;

    flex-wrap: wrap;

    justify-content: space-between;

}

混合器傳參

混合器並不必定總得生成相同的樣式。能夠經過在@include混合器時給混合器傳參，來定製混合器生成的精確樣式。當@include混合器時，參數其實就是能夠賦值給css屬性值的變量。若是你接觸過函數，這種方式跟函數很是類似：

 

解決瀏覽器兼容性問題

所謂的瀏覽器兼容性問題，是指不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示

效果不統一的狀況。在大多數狀況下，咱們的需求是，用戶用任何瀏覽器來查看咱們的網

站或者登錄咱們的系統，都應該是統一的顯示效果。因此瀏覽器的兼容性問題是前端開發

人員常常會碰到和必需要解決的問題。  

而形成瀏覽器兼容問題的根本緣由，是瀏覽器的內核不一樣致使的。                 

 

認識瀏覽器內核

「瀏覽器內核」也稱爲「引擎」，可大概譯爲「渲染引擎」，不過咱們通常稱之爲「瀏覽器內核」。咱們寫的HTML和CSS代碼，之因此能被瀏覽器識別並在頁面上渲染，正是由於內核的存在。

常見的瀏覽器內核以下：

瀏覽器類型   內核       JS引擎

IE           Trident      JScript

Firefox       Gecko       TraceMonkey

Chrome      WebKit,Blink  V8

Safari        WebKit      SquirrelFish Extreme

Opera        Presto       Carakan

 

使用CSS Hack解決兼容性問題:

 

瀏覽器在讀取CSS代碼的時候可能會遇到一些沒法識別的代碼，形成這種現象的緣由一般有兩種：

1. 代碼自己有問題，如：bg:red，bg並非一個有效的css屬性

2. 代碼沒問題，但瀏覽器的內核不能識別，如：box-sizing:border-box，這句代碼自己沒

有問題，但因爲使用的是CSS3的屬性box-sizing，會形成在一些低版本內核的瀏覽器中無

法識別。

總之，當瀏覽器遇到這些沒法識別的代碼時，它會怎麼作呢？和java、C#等後端語言不一樣，瀏覽器不會停止程序的執行，它會當即跳過這些沒法識別的代碼，就看成沒看見同樣，繼續執行後面的代碼

 

總結一些瀏覽器的這兩點特性：

1. 不一樣內核的瀏覽器能夠識別本身特有的CSS屬性

2. 瀏覽器遇到沒法識別的CSS屬性，會直接跳過

正是因爲瀏覽器的這種特色，給咱們解決兼容瀏覽器兼容性問題打開了一條通道。而CSS Hack技

術，就是經過書寫一些讓特定瀏覽器識別的代碼來解決兼容性問題的。

好比，當咱們遇到某些CSS屬性可能帶來瀏覽器兼容問題，能夠經過這樣的模式來書寫：

.hack{

    opacity: .5; /*若瀏沒法識別，會跳過此行*/

    filter:alpha(opacity=50); /*針對IE，若沒法識別，會跳過此行*/

    -moz-opacity: .5; /*針對火狐舊版本，若沒法識別，會跳過此行*/

    -khtml-opacity: .5; /*針對Safari舊版本，若沒法識別，會跳過此行*/

}

 

漸近加強和優雅降級

因爲咱們的網頁須要適應不一樣型號、以及同型號不一樣版本的瀏覽器。

面對這麼多的瀏覽器，就算使用Hack技術，咱們也沒法保證全部的樣式都能正常的應用到瀏覽器

中，好比，你沒法把動畫效果應用到IE5中。

若是你的項目須要考慮那些舊版本的瀏覽器，你就會面臨上面的困境。

如何處理呢？

咱們的整體思路是：網頁在新版本的瀏覽器中要應用新的效果；網頁在舊版本的瀏覽器中能夠沒有

新的效果，但不要佈局錯亂。

以上是整體思路，而面對不一樣的項目時，可能有側重點的不一樣。好比，政府網站通常會側重考慮舊

版本瀏覽器（公務員的世界你不懂）；而互聯網應用項目會側重考慮新版本瀏覽器。

針對不一樣的側重點，因而出現了兩種靜態頁面的開發思路，它們分別是漸近加強（progressive

enhancement）和優雅降級（graceful degradation）。

漸進加強是指：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行

效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級是指：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。 

它們的區別在於：

優雅降級以新版本瀏覽器爲目標，從現狀開始，並面向低版本瀏覽器，逐漸減小用戶體驗的

供給。

漸進加強以舊版本瀏覽器爲目標，從一個很是基礎的，可以起做用的版本開始，並不斷擴

充，以適應新版本瀏覽器的須要。

降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地

帶。

在代碼風格上，優雅降級會優先書寫新標準中的屬性，以適應新版本瀏覽器，而後再補充舊版本瀏

覽器中的書寫方式