期待的CSS的一些功能_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
著名的Web設(shè)計(jì)網(wǎng)站最近組織了一次調(diào)查,請15名頂尖的 Web 設(shè)計(jì)師對 CSS 提出自己的期望,15名設(shè)計(jì)師包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。
調(diào)查結(jié)果顯示,最被期待的 CSS 功能是 CSS 圓角,其它期待的功能包括跨瀏覽器漸變與陰影,類似 Photoshop 的層融合效果,更一致的聲明簡化語法以及對條件判斷的本地支持。這些期待中一部分已經(jīng)包含在未來的 CSS-3 中,但更多的仍然只是一些夢想。
WebMonkey 的編輯們將這個(gè) Wishlist 發(fā)表在他們的網(wǎng)站并讓 WebMonkey 的讀者投票選出最熱門的項(xiàng)目,以下是按投票多少排列的 CSS Wishlist 部分列表(只選取最熱門的項(xiàng)目)。
CSS 圓角
by Webmonkey
標(biāo)準(zhǔn)的,直接基于 CSS 的圓角是很多人的期待,這樣,就不必再費(fèi)盡心機(jī)只為了顯示一個(gè)圓角。
垂直居中
by michael lascarides
針對 block 對象的更容易的垂直居中設(shè)置。(div + css 讓人既愛且恨的一個(gè)重要原因就是垂直居中,讓一個(gè)對象垂直居中顯示在 block 容器中,且兼容所有主流瀏覽器簡直就是一個(gè)噩夢 - 譯者)
兼容所有主流瀏覽器的 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
設(shè)置了 100% height 的容器的頂部和底部真正附著在頁首和頁尾,頁面中間部分匹配內(nèi)容并準(zhǔn)確顯示滾動條。搜索“100% height css”能找到各種解決方法,但事情原本不該這么復(fù)雜。
可重復(fù)使用變量
by Neal Lindsay
比如:
瀏覽器一致性與定義順序
by JML
瀏覽器一致性非常重要。某些 CSS 在某些瀏覽器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同時(shí),對里面的 CSS 定義應(yīng)該可以覆蓋全局定義。
一句話復(fù)原
by Chris Pitzer
很多設(shè)計(jì)者要寫40多行代碼才能清除瀏覽器默認(rèn) CSS 定義,應(yīng)當(dāng)有一個(gè)簡單的聲明一次性將所有 CSS復(fù)原,比如:
body { clear-default-styles:true; }
圖形旋轉(zhuǎn)與反轉(zhuǎn)
by Stephen Bell
在設(shè)置圖形圓角效果時(shí)候,我們需要同一個(gè)圓角圖片的4個(gè)旋轉(zhuǎn)版本來實(shí)現(xiàn)。應(yīng)該有一個(gè)簡單的聲明實(shí)現(xiàn)旋轉(zhuǎn),如:
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
以避免一條線一條線地實(shí)現(xiàn)漸變。
定位計(jì)算
by Anonymous
不使用 JavaScript 而是直接在 CSS 中實(shí)現(xiàn):
left: ID1.Left + ID1.Width + 2px;
網(wǎng)格布局
by Kurt Krumme
table 布局曾經(jīng)流行一時(shí),因?yàn)?table 布局更接近網(wǎng)格布局的原理。CSS 的設(shè)置者們?yōu)槭裁匆瞥鲆粋(gè)不倫不類的 box 模型?
div + css 在 Web 設(shè)計(jì)界已經(jīng)紅得發(fā)紫,盡管 div 有眾多缺陷(比如垂直居中,比如在 IE 中的眾多 BUG),如果哪個(gè)設(shè)計(jì)師膽敢使用 table,被人查出源代碼,是會被恥笑的。然而譯者從不畏懼使用 table + css,且愿意告戒那些盲目追隨 div 并被折磨得半死的人,至少在目前,table 是被各種瀏覽器支持得最完美的容器對象。
使用 image 作 border
by Anonymous
應(yīng)當(dāng)可以用 image 作為 border,如:
border-right: url('image.png')
支持多個(gè)背景圖
by Brad
這個(gè) CSS 功能非常有用,有了這個(gè)功能,完美實(shí)現(xiàn) CSS 圓角就變得十分簡單了。
所有瀏覽器支持統(tǒng)一標(biāo)準(zhǔn)
by Anonymous
這里特指 IE<8 的版本。CSS 有成型的標(biāo)準(zhǔn),但有些瀏覽器一定要搞一些自己的東西出來。
以上來自cb。大師們的期望果然很獨(dú)特,相當(dāng)多的期望也非常有用,如果實(shí)現(xiàn)了,Web開發(fā)就是多么輕松愉快的一件事情!比如變量、清除定義和定位計(jì)算,是我認(rèn)為非常有用的。目前IE下可以用一些IE特有的表達(dá)式,但用起來太復(fù)雜。
還是期望CSS3更好更強(qiáng)大。也期望各個(gè)瀏覽器盡快支持CSS3
調(diào)查結(jié)果顯示,最被期待的 CSS 功能是 CSS 圓角,其它期待的功能包括跨瀏覽器漸變與陰影,類似 Photoshop 的層融合效果,更一致的聲明簡化語法以及對條件判斷的本地支持。這些期待中一部分已經(jīng)包含在未來的 CSS-3 中,但更多的仍然只是一些夢想。
WebMonkey 的編輯們將這個(gè) Wishlist 發(fā)表在他們的網(wǎng)站并讓 WebMonkey 的讀者投票選出最熱門的項(xiàng)目,以下是按投票多少排列的 CSS Wishlist 部分列表(只選取最熱門的項(xiàng)目)。
CSS 圓角
by Webmonkey
標(biāo)準(zhǔn)的,直接基于 CSS 的圓角是很多人的期待,這樣,就不必再費(fèi)盡心機(jī)只為了顯示一個(gè)圓角。
垂直居中
by michael lascarides
針對 block 對象的更容易的垂直居中設(shè)置。(div + css 讓人既愛且恨的一個(gè)重要原因就是垂直居中,讓一個(gè)對象垂直居中顯示在 block 容器中,且兼容所有主流瀏覽器簡直就是一個(gè)噩夢 - 譯者)
兼容所有主流瀏覽器的 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
設(shè)置了 100% height 的容器的頂部和底部真正附著在頁首和頁尾,頁面中間部分匹配內(nèi)容并準(zhǔn)確顯示滾動條。搜索“100% height css”能找到各種解決方法,但事情原本不該這么復(fù)雜。
可重復(fù)使用變量
by Neal Lindsay
比如:
示例代碼 [www.wf0088.com]
@var mycolor = #0080FF
h1 { color: mycolor; }
div.containbox { border: 1px mycolor; }
h1 { color: mycolor; }
div.containbox { border: 1px mycolor; }
瀏覽器一致性與定義順序
by JML
瀏覽器一致性非常重要。某些 CSS 在某些瀏覽器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同時(shí),對里面的 CSS 定義應(yīng)該可以覆蓋全局定義。
一句話復(fù)原
by Chris Pitzer
很多設(shè)計(jì)者要寫40多行代碼才能清除瀏覽器默認(rèn) CSS 定義,應(yīng)當(dāng)有一個(gè)簡單的聲明一次性將所有 CSS復(fù)原,比如:
body { clear-default-styles:true; }
圖形旋轉(zhuǎn)與反轉(zhuǎn)
by Stephen Bell
在設(shè)置圖形圓角效果時(shí)候,我們需要同一個(gè)圓角圖片的4個(gè)旋轉(zhuǎn)版本來實(shí)現(xiàn)。應(yīng)該有一個(gè)簡單的聲明實(shí)現(xiàn)旋轉(zhuǎn),如:
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
以避免一條線一條線地實(shí)現(xiàn)漸變。
定位計(jì)算
by Anonymous
不使用 JavaScript 而是直接在 CSS 中實(shí)現(xiàn):
left: ID1.Left + ID1.Width + 2px;
網(wǎng)格布局
by Kurt Krumme
table 布局曾經(jīng)流行一時(shí),因?yàn)?table 布局更接近網(wǎng)格布局的原理。CSS 的設(shè)置者們?yōu)槭裁匆瞥鲆粋(gè)不倫不類的 box 模型?
div + css 在 Web 設(shè)計(jì)界已經(jīng)紅得發(fā)紫,盡管 div 有眾多缺陷(比如垂直居中,比如在 IE 中的眾多 BUG),如果哪個(gè)設(shè)計(jì)師膽敢使用 table,被人查出源代碼,是會被恥笑的。然而譯者從不畏懼使用 table + css,且愿意告戒那些盲目追隨 div 并被折磨得半死的人,至少在目前,table 是被各種瀏覽器支持得最完美的容器對象。
使用 image 作 border
by Anonymous
應(yīng)當(dāng)可以用 image 作為 border,如:
border-right: url('image.png')
支持多個(gè)背景圖
by Brad
這個(gè) CSS 功能非常有用,有了這個(gè)功能,完美實(shí)現(xiàn) CSS 圓角就變得十分簡單了。
所有瀏覽器支持統(tǒng)一標(biāo)準(zhǔn)
by Anonymous
這里特指 IE<8 的版本。CSS 有成型的標(biāo)準(zhǔn),但有些瀏覽器一定要搞一些自己的東西出來。
以上來自cb。大師們的期望果然很獨(dú)特,相當(dāng)多的期望也非常有用,如果實(shí)現(xiàn)了,Web開發(fā)就是多么輕松愉快的一件事情!比如變量、清除定義和定位計(jì)算,是我認(rèn)為非常有用的。目前IE下可以用一些IE特有的表達(dá)式,但用起來太復(fù)雜。
還是期望CSS3更好更強(qiáng)大。也期望各個(gè)瀏覽器盡快支持CSS3
相關(guān)CSS教程:
- 相關(guān)鏈接:
- 教程說明:
CSS教程-期待的CSS的一些功能。