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


這是我所發的關於ASP .NET 4.5系列博文的第七篇文章。

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

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

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

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

在本篇文章中將會涵蓋

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

CSS Color Picker

在VisualStudio的早起版本中,

CSS編輯器的智能提示引擎包括了一個顏色名稱的下拉列表(硬編碼)

新版本的VisualStudio

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

可以很容易的創建新的顏色樣式

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

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

一個顏色拾色器將會自動出現

默認情況下

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

以及一些推薦使用的顏色

你可以使用鼠標或者鍵盤在這個列表中選擇一個顏色

image

你可以選擇”+”圖標以展開一個更精細顏色選擇列表

移動opacity(透明度)滑塊,

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

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

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

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

image

在這個60秒的視頻中,演示了顏色拾取器的使用方法

跨瀏覽器和CSS3片段

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

經常會為不同版本的瀏覽器寫兼容樣式

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

為了支持所有的瀏覽器

必須做這些乏味的工作

在新版本的VisualStudio中

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

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

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

(譯者注:關於CodeSnippet的內容,請參看這里)

例如:調用CSS3的transition屬性

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

image

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

並生成相應的代碼,以支持所有的瀏覽器!

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

(譯者:真好啊!)

image

點此觀看關於CSS代碼片段的六十秒視頻

CSS層級縮進

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

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

一個樹狀的CSS樣式

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

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

image

在VisualStudio的早期版本中

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

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

會清空所有的層級和縮進

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

在VisualStudio的下一個版本中,

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

並且可以只格式化選中的內容

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

VisualStudio中全新的CSS編輯器也支持常見的CSS  hack

這方面的內容也會體現在CSS的層級結構中

image

關於CSS層級結構和60秒視頻

小節

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM