本篇目錄
Web Essentials中大多數的CSS功能也適用於LESS。
智能感知
生成供應商特定的屬性
如果添加了供應商特定的屬性,許多CSS 3的新屬性都會跨瀏覽器工作。這些供應商特定的(vendor-specific)屬性包括-moz,-webkit,-ms和-o。想要了解關於供應商的前綴,請查看這篇文章。
結果是以正確的順序插入丟失的供應商特定的屬性。
如果一個或更多的供應商特定的屬性已經存在了,那么只會添加丟失的屬性。
自定義字體
添加丟失的標准屬性
點擊只能的提示就可以自動插入丟失的標准屬性:
IOS 滾動條
對於自定義IOS滾動條,VS2012支持不同的偽元素。如果你不知道如何正確地鏈接這些偽元素,那么它是有點困難的。現在這不再是個問題了。
供應商特定屬性值同步變化
不多說,直接看效果:
動畫名字
HTML元素,類和Id
內聯URL檢出器
開始輸入時,文件系統就會智能提示。
Hacks
查看這篇文章了解更多。
!important
現在已經提供了!important的智能提示。
Modernizr
Modernizr類名現在在CSS編輯器中是加粗的。
添加regions
CSS編輯器可以更容易地添加region了。
輸入region,然后按下TAB鍵,就會插入下面的代碼段
media查詢表達式
在media查詢中可以獲得所有智能提示。
media查詢代碼段
視覺提示
瀏覽器提示
字體和圖片預覽
顏色樣式
支持所有的顏色類型,包括新的CSS 3格式。
驗證
瀏覽器選擇器
要想控制驗證和智能感知如何表現,取決於你想要支持的瀏覽器。
在CSS文檔中右鍵,在Web Essentials的上下文菜單中點擊“select browser...”。
未知的供應商特定屬性
因為要驗證和識別所有的供應商特定屬性是非常困難的,所以,就很容易犯錯誤。別擔心,驗證器會自動地調出任何位置的或者過時的供應商特定屬性。
IE10 前綴
IE10公開預覽版引進了新的前綴屬性,比如-ms-animation。最終版的IE10也實現了那些屬性的無前綴版本,用於過時的有前綴版的渲染。
最佳實踐和瀏覽器兼容
在VS的錯誤列表中會提示這方面的信息:
有用的錯誤信息
一些錯誤是很普遍的。Web Essentials現在會檢查那些錯誤,並提供更精確有用的錯誤信息來幫你修復它們。
移除\9的警告
CSS編輯器不支持\9 hack,這就會產生錯誤。Web Essentials會移除這些錯誤。
在選擇器中未知的HTML標簽
如果沒有提醒的話,很容易犯HTML拼寫錯誤。現在,無論是舊的HTML標簽還是新的HTML 5標簽名都會檢查到。
顏色值
顏色函數(比如rgb(1,2,553))會被驗證以確保該參數在允許的范圍內。
Web標准
自動更新標准
Web Essentials會檢查驅動驗證和智能感知的模式文件的更新。如果有更新,就會后台下載然后立即使用。
供應商特定的更新
當新的瀏覽器發布時,供應商經常會引進新的供應商特定的屬性。Web Essentials會自動更新和新瀏覽器特定兼容的模式文件。
變量模塊
Web Essentials具有新的CSS變量語法,可以獲得智能感知和相同變量的顏色塊。
轉換器
加深/變淺顏色
把光標放在一個十六進制的顏色值上,然后按住SHIFT+CTRL+ARROW UP/DOWN來加深或變淺該顏色。看下面的演示:
轉換顏色格式
如下圖,點擊倒三角提示,就可以實現不同格式的顏色轉換:
DataURI和背景圖片
這個會把引用的圖片直接以base64編碼到樣式文件中,這樣,你就減少了一個HTTP請求。
如果base64字符串太長,你可以輕易地折疊起來。不過,在VS 2013 Update5中,所有的base64字符串都在一行顯示。
記住:在將這些圖片轉成base64字符串前,先要優化該圖片文件。使用Image Optimizer插件可以輕易地對圖片進行優化。
給屬性排序
在每個選擇器上的倒三角提示都可以讓我們輕松地按照規則給所有的屬性排序。
CSS的排序是開源的,你可以在Github上找到代碼。
最小化
你可以直接在編輯器中將CSS最小化。下面演示一下操作過程:
你可以最小化和bundle整個CSS文件。這已經在通用功能一節講說了,就不再啰嗦了。