天天看點

【翻譯】VisualStudio11中的CSS編輯器改進(asp.net 4.5系列)-ScottGu

下一個版本的.NET和Visual Studio包括大量的新特性和新功能

在開發ASP.NET 4.5 WebForms和Mvc的時候

你會看到很多功能上的改進

(不管是基于核心ASP.NET還是一些其他的擴充)

在本篇文章中将會涵蓋

下一個版本的VisualStudio關于支援在ASP.NET中使用CSS3的一些改進

CSS Color Picker

在VisualStudio的早起版本中,

CSS編輯器的智能提示引擎包括了一個顔色名稱的下拉清單(寫死)

新版本的VisualStudio

使用了一個功能齊全的顔色選擇器

可以很容易的建立新的顔色樣式

也可以很容易的從樣式表内選擇其他地方使用過的顔色

當你使用CSS編輯器編輯一個CSS樣式的顔色屬性時

一個顔色拾色器将會自動出現

預設情況下

他顯示了之前您使用過的顔色

以及一些推薦使用的顔色

你可以使用滑鼠或者鍵盤在這個清單中選擇一個顔色

【翻譯】VisualStudio11中的CSS編輯器改進(asp.net 4.5系列)-ScottGu

你可以選擇”+”圖示以展開一個更精細顔色選擇清單

移動opacity(透明度)滑塊,

可以控制alpha通道自動把任何顔色轉化成CSS3 RGBA值

還有一個“顔色選擇”功能

可以讓你使用“吸管”工具從浏覽器或其他應用程式中拾取顔色

(譯者:造就該有這個功能了!)

【翻譯】VisualStudio11中的CSS編輯器改進(asp.net 4.5系列)-ScottGu

跨浏覽器和CSS3片段

寫樣式表時,有時會有一些重複的工作,

經常會為不同版本的浏覽器寫相容樣式

在某些情況下需要寫五個相同的值

為了支援所有的浏覽器

必須做這些乏味的工作

在新版本的VisualStudio中

支援CSS片段,自動生成所有浏覽器廠商的特定屬性

這意味着沒有更多繁瑣的搜尋和打字工作以使你的CSS相容所有浏覽器

css片段就像我們在VS中使用其他代碼片段一樣

例如:調用CSS3的transition屬性

隻要簡單的輸入“transition”或者從智能提示中選擇此樣式即可

【翻譯】VisualStudio11中的CSS編輯器改進(asp.net 4.5系列)-ScottGu

然後按tab鍵,VisualStudio會執行CSS的transition的代碼片段

并生成相應的代碼,以支援所有的浏覽器!

并且可以隻改一次樣式值,就可以把所有選中值都改掉

(譯者:真好啊!)

【翻譯】VisualStudio11中的CSS編輯器改進(asp.net 4.5系列)-ScottGu

CSS層級縮進

現實中,開發網站的樣式表代碼時,

你會發現保持良好的縮進和層級關系已經成為一個趨勢

一個樹狀的CSS樣式

可以更好的展現樣式之間的層級關系

和在樣式屬于哪些網頁中的元素

【翻譯】VisualStudio11中的CSS編輯器改進(asp.net 4.5系列)-ScottGu

在VisualStudio的早期版本中

手動保持這些層級縮進是比較繁瑣的工作

如果你格式化CSS代碼(譯者注:這裡應該是指按快捷鍵ctl+e,d),

會清空所有的層級和縮進

這就要求你必須謹慎的使用代碼格式化功能

在VisualStudio的下一個版本中,

加入了建立CSS的層級結構的功能

并且可以隻格式化選中的内容

這使得審查複雜的樣式關系和樣式間的層級關系變得非常容易

這方面的内容也會展現在CSS的層級結構中

【翻譯】VisualStudio11中的CSS編輯器改進(asp.net 4.5系列)-ScottGu

小節

在asp.net和VisualStudio的新版本中将更容易的使用CSS

這篇文章包括一些我們在VS上支援CSS編輯器的改進

繼續閱讀