CSS 期望表 (Wishlist)

來源:互聯網
上載者:User

著名的 Web 設計網站 CSS-tricks.com 最近組織了一次調查,請15名頂尖的 Web 設計師對 CSS 提出自己的期望,15名設計師包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。

調查結果顯示,最被期待的 CSS 功能是 CSS 圓角,其它期待的功能包括跨瀏覽器漸層與陰影,類似 Photoshop 的層融合效果,更一致的聲明簡化文法以及對條件判斷的本地支援。這些期待中一部分已經包含在未來的 CSS-3 中,但更多的仍然只是一些夢想。

WebMonkey 的編輯們將這個 Wishlist 發表在他們的網站並讓 WebMonkey 的讀者投票選出最熱門的項目,以下是按投票多少排列的 CSS Wishlist 部分列表(只選取最熱門的項目)。

垂直置中

by michael lascarides

針對 block 對象的更容易的垂直置中設定。(div + css 讓人既愛且恨的一個重要原因就是垂直置中,讓一個對象垂直置中顯示在 block 容器中,且相容所有主流瀏覽器簡直就是一個噩夢 - 譯者)

CSS 圓角

by Webmonkey

標準的,直接基於 CSS 的圓角是很多人的期待,這樣,就不必再費盡心機只為了顯示一個圓角。

相容所有主流瀏覽器的 CSS 2.1 與 CSS 3

by Erik

能相容所有主流瀏覽器的 CSS 2.1 與 CSS 3 是 Erik 的夢想,但其中的某些功能在某些瀏覽器中總是磕磕絆絆。

更好的嵌入字型

by Webmonkey

不要 sFIR, 不要圖片,要真正的字型。

CSS 變數

by Jeffrey Jordan Way, via css-tricks.com

能定義諸如色彩值一類的變數

更好地支援 100% height

by JLR

設定了 100% height 的容器的頂部和底部真正附著在頁首和頁尾,頁面中間部分匹配內容並準確顯示捲軸。搜尋“100% height css”能找到各種解決方案,但事情原本不該這麼複雜。

可重複使用變數

by Neal Lindsay

比如:

@var mycolor = #0080FF
h1 { color: mycolor; }
div.containbox { border: 1px mycolor; }

瀏覽器一致性與定義順序

by JML

瀏覽器一致性非常重要。某些 CSS 在某些瀏覽器被忽略或部分忽略使 CSS 只有藉助 JavaScript 才能正常使用。同時,對裡面的 CSS 定義應該可以覆蓋全域定義。

一句話複原

by Chris Pitzer

很多設計者要寫40多行代碼才能清除瀏覽器預設 CSS 定義,應當有一個簡單的聲明一次性將所有 CSS 複原,比如:

body { clear-default-styles:true; }

圖形旋轉與反轉

by Stephen Bell

在設定圖形圓角效果時候,我們需要同一個圓角圖片的4個旋轉版本來實現。應該有一個簡單的聲明實現旋轉,如:

img .horiz { rotate:90; }

成組的 CSS 簡化定義

by Volkan Görgülü, via css-tricks.com

如:

#foo h1, #foo h2, #foo h3

該為:

#foo [h1, h2, h3]

漸層

by Anonymous

以避免一條線一條線地實現漸層。

定位計算

by Anonymous

不使用 JavaScript 而是直接在 CSS 中實現:

left: ID1.Left + ID1.Width + 2px;

網格布局

by Kurt Krumme

table 布局曾經流行一時,因為 table 布局更接近網格布局的原理。CSS 的設定者們為什麼要推出一個不倫不類的 box 模型?

div + css 在 Web 設計界已經紅得發紫,儘管 div 有眾多缺陷(比如垂直置中,比如在 IE 中的眾多
BUG),如果哪個設計師膽敢使用 table,被人查出原始碼,是會被恥笑的。然而譯者從不畏懼使用 table +
css,且願意告戒那些盲目追隨 div 並被折磨得半死的人,至少在目前,table 是被各種瀏覽器支援得最完美的容器物件。

使用 image 作 border

by Anonymous

應當可以用 image 作為 border,如:

border-right: url('image.png')

Multiple background images

by Brad

這一條是譯者人為提前的。這個 CSS 功能非常有用,事實上,有了這個功能,完美實現 CSS 圓角就變得十分簡單了。

所有瀏覽器支援統一標準

by Anonymous

這裡特指 IE<8 的版本。CSS 有成型的標準,但有些瀏覽器一定要搞一些自己的東西出來。

本文國際來源:http://www.webmonkey.com/blog/What_s_On_Your_CSS_Wishlist_
中文翻譯來源:COMSHARP CMS 官方網站

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.