学会在适当的地方使用CSS新技术

XS泡沫沫1

XS泡沫沫1

2016-02-19 18:54

下面是个简单易学的学会在适当的地方使用CSS新技术教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

    浏览器对于CSS的支持问题落后于CSS的发展,以占有市场绝对份额的Internet Explorer来说,直到其前不久发布的第8个版本才刚刚完成对CSS 2.1的完整支持,而CSS的最新进展是CSS 3规范的制定已经行了一大半。但是这并不妨碍我们使用CSS中的新技术。虽然我们不能像使用CSS中的通用技术那样随心所欲地应用他们,但是却可以在特定浏览器中达到更加生动的效果。在适当的地方使用这些新技术,不但可以让你站在CSS技术的最前沿,更可以使你的作品给人耳目一新的感觉。

    CSS新技术:不要奢望得到所有浏览器的支持

    微软公布了Internet Explorer 5.5到8.0中各版本浏览器对于CSS的支持程度,在这份清单中,我们可以看出直到Internet Explorer 8.0才完成对CSS 2.1的完整支持,在Internet Explorer 7.0中才可以使用CSS 2.1中的属性选择符,尽管这一CSS技术十分有用。这就意味着出于对目前仍占居市场40%以上份额的Internet Explorer 6.x用户考虑你不得不放弃使用这一技术。例如:
[value] { height:25px}  
[href=http://www.dudo.org/] {color:red;}

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

    第1行中我们可以实现让所有拥有value属性的表单高度设为25px;让指向特定网站的链接都以红色文字显示。但是在Internet Explorer 6中这样做是完全没有效果的,因为这项“CSS新技术”不被支持。

    而在CSS 3中属性选择符有了更加强大的功能,此外CSS 3还增加了圆角技术、文字阴影、三维边框等效果,可以说这些CSS新技术让原来CSS 2中很复杂的问题变得很简单,例如,在CSS 3中只需要下面的代码便可以实现圆角外观:
div style="radiu:5px"这是一个圆角/div 

    不过这项新技术即使Internet Explorer 8也不支持,目前只有Firefox、Safari、Chrome中支持,而这种支持也不是完全的支持,Firefox中要使用-moz-radius、Safari和Chrome则使用-wekit-radius。

    这就是CSS中的新技术,似乎永远无法同时被所有的浏览器完整地解释。

    CSS新技术不是CSS Hack

    什么是CSS Hack?CSS Hack是利用浏览器本身的某种对CSS运用中的不足实现分别应用不用CSS规则的方法。例如使用_property来区分IE7、8和IE的其它版本,*property可以用来区分IE和非IE浏览器等。不过这里指出的是,所有的这些CSS Hack都非标准的CSS规范,它们都无法通过W3C的验证,换句话说,它们都是不正确的CSS规则。但是CSS新技术不一样,他们是标准的CSS规范,只是它们不能被某些浏览器支持而已。

    此外,CSS新技术不能通过Hack来解决。对于不同浏览器的盒模型解释不一致的情况,我们可以通过CSS Hack加以纠正,但是对于Internet Explorer不支持圆角矩形的问题是任何CSS Hack技术都无法解决的,解决办法就是或者使用额外的XHTML或者使用背景图片。

    因此,CSS新技术不是CSS Hack的一种,它是正统的CSS规范。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

    适当地使用CSS新技术

    虽然我们在前面提到CSS新技术不能被所有的浏览器支持,也不能像使用CSS Hack技术那样在不同的浏览器里可以达到同样的效果。但是,这并不妨碍我们使用他们。试想,如果一个普通的页面在不影响其使用的情况下,在某个浏览器里再增加额外的易用性是不是更加吸引人呢?而我们达到这样的效果又没有像CSS Hack那样添加不规范的CSS规则。所以在适当的时候适当地使用CSS的技术可以达到锦上添花的效果,让你的网页更加易用。

展开更多 50%)
分享

猜你喜欢

学会在适当的地方使用CSS新技术

Web开发
学会在适当的地方使用CSS新技术

使用CSS 3新技术 完美实现圆角效果

Web开发
使用CSS 3新技术 完美实现圆角效果

s8lol主宰符文怎么配

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

使用CSS3新技术 完美实现圆角效果

Web开发
使用CSS3新技术 完美实现圆角效果

学会在ASP中使用存储过程

ASP
学会在ASP中使用存储过程

lol偷钱流符文搭配推荐

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

网页美工应该了解的CSS3新技术

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页美工应该了解的CSS3新技术

CSS3中的5个有趣的新技术

Web开发
CSS3中的5个有趣的新技术

lolAD刺客新符文搭配推荐

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

让一个App永远保持在最上层

让一个App永远保持在最上层

却自命清高的年年龄

却自命清高的年年龄
下拉加载更多内容 ↓