css工程化和瀏覽器兼容性問題

CSS工程化

CSS編譯器
　　CSS編譯器，也叫作CSS預編譯器，是指開發者使用某種相似CSS（但實際不是）的語言編寫代 碼，而後經過編譯器，將其編譯成瀏覽器真正能執行的CSS代碼。
　　目前常見的CSS編譯器有：SASS和LESS。本文已經常使用的SASS爲例，來說解如何用SASS來實現 優雅簡潔的CSS代碼。
SASS示例

$darkcolor : #2E2E2E; //定義一個顏色變量，值爲#2E2E2E 
$lightcolor : #c1c1c1; //定義一個顏色變量，值爲#c1c1c1 
.site-footer { 

background: $darkcolor; //使用變量$darkcolor的值做爲背景色 
color: $lightcolor; //使用變量$lightcolor的值做爲前景色 
padding: 50px 0; 
} 
.site-header { 
background: $darkcolor; //使用變量$darkcolor的值做爲背景色 
color: $lightcolor; //使用變量$lightcolor的值做爲前景色 
position: fixed; 
left: 0; 
top: 0;
} 

SASS的安裝
　　Koala是一個預編譯工具集，它內置了SASS、LESS等多種前端的預編譯器，而且提供圖形化的操 做界面，不管對於新手和老手，都是很是不錯的選擇。
　　　　一、新建一個文件夾，並用你熟悉的文本編輯器打開（例如VSCode），而後在文件夾中新建css文件 夾，用於存放SASS文件以及CSS文件，再在根目錄中新建一個index.html文件。
　　　　二、在css文件中新建一個 index.scss 文件，注意後綴名爲 .scss ，表示這是一個使用Sass CSS語言 編寫的文件。
　　　　三、打開安裝好的Koala，將你的工程文件夾拖動Koala的主界面中。VSCODE中，已經生成了對應的CSS文件和一個Map文件.

　　編譯選項
　　　　1. Autoprefix自動前綴
　　　　　　選中該選項，在編譯時，會自動對瀏覽器有兼容問題的屬性加上廠商前綴。
　　　　2. compressed壓縮模式
　　　　　　選中該選項，在編譯時，會對生成的代碼進行壓縮，以達到小文件體積。

變量

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

一、變量聲明
　　　　sass變量的聲明和css屬性的聲明很像： $highlight-color: #F90; 這意味着變量$highlight color 如今的值是#F90。任何能夠用做css屬性值的賦值均可以用做sass的變量值，甚至是以空格分割的 多個　屬性值，如 $basic-border: 1px solid black; ，或以逗號分割的多個屬性值，

二、變量引用

　　凡是css屬性的標準值（好比說1px或者bold）可存在的地方，變量就可使用。css生成時，變量 會被它們的值所替代。以後，若是你須要一個不一樣的值，只須要改變這個變量的值，則全部引用此 變量的地方生成的值都會隨之改變。

嵌套CSS 規則

嵌套選擇器

示例：

.site-footer .footer-container .footer-menu { 
　　　　　　　　display: flex; 
　　　　　　　　width: 773px; 
　　　　　　　　justify-content: space-between; 
　　　　　　　　line-height: 3;
　　　　　　　　li{ 
　　　　　　　　　　font-size: 14px; 
　　　　　　　　　　　　a:hover { 
　　　　　　　　　　　　　　color: #fff; 
　　　　　　　　　　　　　　} 
　　　　　　　　&:first-child{ 
　　　　　　　　font-size: 16px; 
　　　　　　　　color: #eee; 
　　　　　　}
　　　}
}

 

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

　　SASS中提供了兩種註釋方式，分別是：
　　　　1. CSS標準註釋 /* 註釋內容 */ ,該註釋會出如今編譯結果中
　　　　2. 靜默註釋 // 註釋內容 該註釋僅會出如今SASS代碼中

混合器
　　若是你的整個網站中有幾處小小的樣式相似（例如一致的顏色和字體），那麼使用變量來統一處理 這種狀況是很是不錯的選擇。可是當你的樣式變得愈來愈複雜，你須要大段大段的重用樣式的代 碼，獨立的變量就沒辦法應付這種狀況了。你能夠經過sass的混合器實現大段樣式的重用。

簡單混合器
@mixin定義一個混合器， @include 來引用混合器名稱
示例：

//使用@mixin定義一個混合器，混合器的書寫跟CSS代碼塊同樣，能夠定義多個規則
@mixin flex-container{ 
　　　　　　　　display:flex; 
　　　　　　　　flex-wrap: wrap; 
　　　　　　　　justify-content: space-between; 
　　　　} 

//其餘的代碼塊中都可以使用該混合器 

.main{ 
　　　　font-size:1.1em; 
　　　　color:inherit; 
　　　　@include flex-container;//使用混合器
} 

.container{ 
　　　　background: lightblue; 
　　　　@include flex-container;//使用混合器
} 

 

混合器傳參
　　混合器並不必定總得生成相同的樣式。能夠經過在@include混合器時給混合器傳參，來定製混合器 生成的精確樣式。當@include混合器時，參數其實就是能夠賦值給css屬性值的變量。若是你接觸 過函數，這種方式跟函數很是類似：
　　當混合器被@include時，你能夠把它看成一個css函數來傳參。
混合器參數的默認值
　　爲了在@include混合器時沒必要傳入全部的參數，咱們能夠給參數指定一個默認值。參數默認值使 用 $name: default-value 的聲明形式，默認值能夠是任何有效的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 ，會形成在一些低版本內核的瀏覽器中無 法識別。

一些瀏覽器的這兩點特性：
　　1.不一樣內核的瀏覽器能夠識別本身特有的CSS屬性
　　2.瀏覽器遇到沒法識別的CSS屬性，會直接跳過
正是因爲瀏覽器的這種特色，給咱們解決兼容瀏覽器兼容性問題打開了一條通道。而CSS Hack技 術，就是經過書寫一些讓特定瀏覽器識別的代碼來解決兼容性問題的。

漸近加強和優雅降級
　　網頁在新版本的瀏覽器中要應用新的效果；網頁在舊版本的瀏覽器中能夠沒有 新的效果，但不要佈局錯亂。

　　針對不一樣的側重點，因而出現了兩種靜態頁面的開發思路，它們分別是漸近加強（progressive enhancement）和優雅降級（graceful degradation）。

　　　　漸進加強是指：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行 效果、交互等改進和追加功能達到更好的用戶體驗。

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

它們的區別在於：

　　一、優雅降級以新版本瀏覽器爲目標，從現狀開始，並面向低版本瀏覽器，逐漸減小用戶體驗的 供給。
　　二、漸進加強以舊版本瀏覽器爲目標，從一個很是基礎的，可以起做用的版本開始，並不斷擴 充，以適應新版本瀏覽器的須要。
　　三、 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地 帶。

優雅降級會優先書寫新標準中的屬性，以適應新版本瀏覽器，而後再補充舊版本瀏 覽器中的書寫方式，漸近加強會優先書寫瀏覽器特有的屬性，以適應舊版本瀏覽器，而後再補充新標準中的屬性