美食
不要放弃使用CSS中的新技术
2023-04-29 10:00  浏览:27

  lilian :非常棒的插件!要是能将自定义字段的外链也能转成内链就更好了,很多人需要这个功能啊,等大神加入啊!

  千杯 :真是充满了岁月痕迹的博客啊……是什么让你这一年里变化这么大,简直是质变啊,量的积累肯定也有吧

  千杯 :难得一见做这么久个人博客的人了,膜拜一下,我的域名也快10年了,然而用的时间并不多,相比之下比较惭愧

  浏览器对于CSS的支持问题落后于CSS的发展,以占有市场绝对份额的Internet Explorer来说,直到其前不久发布的第8个版本才刚刚完成对CSS 2.1的完整支持,而CSS的最新进展是CSS 3规范的制定已经行了一大半。但是这并不妨碍我们使用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用户考虑你不得不放弃使用这一技术。例如:

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

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

  什么是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 Hack那样添加不规范的CSS规则。所以在适当的时候适当地使用CSS的技术可以达到锦上添花的效果,让你的网页更加易用。(对于本节中的内容,你都可以在〈详解CSS3中的属性选择符〉中找到。)

  我们要达到的效果是,给所有指向非本站的链接都加上一个小图标以告诉用户点击这个链接会让你离开本站,这是一个外部链接。当然这可能通过比较复杂的Javascript来实现,但是我们现在可以通过CSS 3的属性选择符来实现这个功能。

  上面这段代码的意思是:所有以http:开头的链接都会加上一个小箭头的图标,提示用户这是一个外部链接,用户点击会离开本站。可以说,这个功能是非常人性化,突出了Web设计的易用性。

  当然,这是针对指向本站的链接都使用了相对地址的。如果指向本站的链接也是以http:开头的,或者有使用既有使用绝对地址又有使用相对地址的怎么呢?我们可以使用如下代码:

  上面这两条规则是:所有以http:开头的均加上外部链接的图标,后面紧接着以开头的都不使用,自然相对地址因为不是以http开头所有不会出现箭头图标。具体演示效果可以看这里查看。

  有时候我们的博客上经常会提供一些资源供别人下载,但是像是PJBlog中,所有的下载链接都只用一个图标来表示。有了新CSS3的属性选择符这项新技术后我们就可以根据下载文件的不同类型显示不同的图标了。这里我们要用到的是

  在《CSS 3入门》中已经详细地介绍了这几种CSS 3 较为成熟的技术。虽然目前Internet Explorer 8还不支持radius圆角技术,但这并不妨碍我们使用它,当你使用不同的浏览器打开这个页面时,你会发现“译者注”的外围方框有时会是圆角,有时会是方角。这完全不妨碍用户的使用,相反它还会增加使用支持这项技术的浏览器的用户得到更加Web 2.0的体验。

  不要等到万事俱备的时候才去使用这些CSS中的新技术,那时候已经完了。从现在开始,就试着去用它们去点缀你的页面吧,虽然它们不能用作主流设计,但是就算是锦上添花吧也已经让你的访问者感到耳目一新了。还犹豫什么呢?赶紧动手吧!如果你对这些CSS新技术还不够了解,相信这篇《20个对学习CSS3大有裨益的资源》一定可以助你一臂之力。

  比如在普通的 《a》text《/a》采用背景图案效果很好,但如果是《a》《img /》《/a》这样的嵌套,添加的背景图案就会很尴尬,而在图片上加链接这样的应用却是非常多的。CSS3里似乎没有提供子内容判断的选择符,根据扩展名的区分也很有局限性。

Tags:seo

以上就是不要放弃使用CSS中的新技术的全部内容了,希望大家喜欢。

发表评论
0评