您的位置:首页 > 设计教程 > 网页设计 > 内页

HTML5兼容JS库Modernizr介绍及入门案例

核心提示: Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。

此外,我们漂亮的手写体文字在文字阴影方面存在一些渲染问题,所以我们要在浏览器决定使用自定义文字时取消文字的阴影。另外,关于检测特征部分的列表还需要被分为两栏。为了达到目的,我要使用牛叉的CSS columns 属性,这一属性会使浏览器把列表智能分栏而不会打乱它的顺序,而我们的列表,虽然没有数字序号,却也是按照字母顺序排列的。当然,不是所有的浏览器都支持这一属性,对于那些不支持的浏览器,我们使用浮动来达到2栏的目的——使用了浮动后列表在视觉上不会再按照字母顺序排列,但那也好过什么都没有。

.csscolumns ol.features {
  	-moz-column-count: 2;
  	-webkit-columns: 2;
  	-o-columns: 2;
  	columns: 2;
  }  

.no-csscolumns ol.features {
  	float: left;
  	margin: 0 0 20px;
  }  

.no-csscolumns ol.features li {
  	float: left;
  	width: 180px;  
}

我又一次使用了Modernizr来针对不同的情况设置不同的属性。如果浏览器支持CSS columns,它就会把列表完美的分为2栏,如果不支持,通过Modernizr为

添加的“no-csscolumns”类我们也可以用浮动的方式使得列表变为两栏,虽然不那么完美,但也比直接来一个长串的单栏列表强。

这里您可能注意到了我为属性添加了不同的前缀(-moz-、-webkit-、-o-),这是因为不同的浏览器厂商对该功能的实现有不同的定义,所以要实现该功能需要针对不同的浏览器加上它们对应的前缀。

经过这些改变,我们新的页面看起来更好了。

我们将为我们的页面添加进更多的渐进式增强效果来结束这篇教程。基于WebKit的浏览器支持一些更牛叉的特效,如CSS变换、动画和三维转换等。并且我想在最后一个阶段的页面中应用一些这类特效。再一次的,这些属性会被添加进我们既有的CSS中并在不支持它们的浏览器中给忽视。所以,针对这种一方面是渐进增强一方面是不被支持的情况,使用Modernizr是恰当的。

首先设置的:

@-webkit-keyframes spin {
  	  0% { -webkit-transform: rotateY(0); }
  	100% { -webkit-transform: rotateY(360deg); }  
}  

.csstransforms3d.cssanimations section {
  	-webkit-perspective: 1000;  
}

@keyframes规则是新的CSS animations规范中的一部分,目前只有WebKit支持。它容许你针对任何属性声明一个完整的动画路径,并在你喜欢的任何阶段改变它们。想知道关于animations的更多知识,请阅读 W3C Working Draft specification

下面我们添加使得我们一个元素在三维空间里旋转的代码:

.csstransforms3d.cssanimations section h2 {
  	background-image: url(modernizr-logo.png);
  	overflow: hidden;
  	-webkit-animation: spin 2s linear infinite;  
}

因为logo要转动,且又希望它转的时候和背景相处的融洽些,于是这里用了一个png格式的文件。我还采用了一个“overflow:hidden”属性来隐藏设置了缩进-9999像素的header里的文字。使元素以3D的形式旋转虽然有趣却并不太美观。最终,我们选择使用animation规则,设置它的旋转周期为2秒钟,沿着自身的中轴线旋转,永不停止。

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:design_news
扫一扫 订阅最新资讯
回到顶部