Web开发期待的CSS的一些功能

世纪启亚9

世纪启亚9

2016-02-19 23:34

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享Web开发期待的CSS的一些功能的教程,热爱PS的朋友们快点看过来吧!

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)著名的 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 部分列表(只选取最热门的项目)。

CSS 圆角
by Webmonkey
标准的,直接基于 CSS 的圆角是很多人的期待,这样,就不必再费尽心机只为了显示一个圆角。


垂直居中
by michael lascarides
针对 block 对象的更容易的垂直居中设置。(div + css 让人既爱且恨的一个重要原因就是垂直居中,让一个对象垂直居中显示在 block 容器中,且兼容所有主流浏览器简直就是一个噩梦 - 译者)


兼容所有主流浏览器的 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')

支持多个背景图
by Brad
这个 CSS 功能非常有用,有了这个功能,完美实现 CSS 圆角就变得十分简单了。

所有浏览器支持统一标准
by Anonymous
这里特指 IE8 的版本。CSS 有成型的标准,但有些浏览器一定要搞一些自己的东西出来。

以上来自cb。大师们的期望果然很独特,相当多的期望也非常有用,如果实现了,Web开发就是多么轻松愉快的一件事情啊!比如变量、清除定义和定位计算,是我认为非常有用的。目前IE下可以用一些IE特有的表达式,但用起来太复杂。

还是期望CSS3更好更强大。也期望各个浏览器尽快支持CSS3
展开更多 50%)
分享

猜你喜欢

Web开发期待的CSS的一些功能

Web开发
Web开发期待的CSS的一些功能

css学习的一些心得

Web开发
css学习的一些心得

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

一些有用的CSS资源

Web开发
一些有用的CSS资源

一些顶级CSS技巧

Web开发
一些顶级CSS技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

css的一些基础的东西

Web开发
css的一些基础的东西

关于CSS的一些基础应用

Web开发
关于CSS的一些基础应用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

凄美的孤独伤感好看的分组没有心痛眼泪却如此直接

凄美的孤独伤感好看的分组没有心痛眼泪却如此直接

DIV+CSS建立的符合web标准网页的好处

DIV+CSS建立的符合web标准网页的好处
下拉加载更多内容 ↓