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

2016-02-19 23:34 2 1 收藏

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

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.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

来源:https://www.tulaoshi.com/n/20160219/1630170.html

延伸阅读
标签: Web开发
怎样做CSS布局呢? CSS文件的链接方式 1、附加链接:外部CSS文件 2、导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 CSS规则定义有三种 1、类比如.RedText、.BlueText和.BigText等等 2、标签针对原有HTML标签做的重新CSS定义 3、高级伪类、定义了ID的元素,以及综合性定义 CSS规则的应用 ...
标签: Web开发
我想以一章的篇幅来讨论用CSS设定文字样式的做法是个好点子.一般处理文字内容大概是应用CSS最多的地方,就算对没有完全遵守标准的网站来说也是一样.去掉网页中反复出现的font标签曾经是(现在也是)十分吸引设计者的事情,而且不难看出以CSS控制文字排印的巨大优势,也就是进一步分离内容和展示方式. 从先前的很多例子我们知道了CSS能处理许多情...
标签: Web开发
在进行DivCSS布局时,需要对文本进行控制,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。 语法: white-space : normal pre nowrap 取值: normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界...
标签: Web开发
众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites将多个图片整合到一个图片中,然后再用CSS来定位。今天我们通过一个实例来学习CSS Sprites的使用方法。 下面是一张样图: 图片1 本文的目的并不是讲CSS Sprite如何让一个网站更快,而是说一些使...
标签: Web开发
CSS布局中,一个重要的标签 DIV ,DIV是XHTML所支持的标签,DIV是一个容器,所有的XHTML标签对象都可以称为是一个容器.如 divcontent/div,h1titles/h1.... div代码的书写格式: div id="id 名称"[...]/div div class="class名称"[...]/div 注:同一个名称的id值,在当前的XHTML页面中,只日须使用一次,class名称可以重复使用...

经验教程

43

收藏

29
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部