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

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

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

我们的未加工的简单小页面看起来有点像一个准测试系统了,但它具备更好的语义性和可访问性。让我们为它添加一点基本的样式:一点文字格式、颜色和布局以使它更好看。目前位置,没什么新东西,只是为一个语义化结构的HTML页面添加表现样式,看看添加了样式后的页面

下面,我们要增强这个页面使得它更有意思。我想为头部的h1应用一个奇特的文字效果,把关于检测特性的列表分为两栏,然后将带有一张照片的关于Modernizr的部分的一切都弄到右边去。我还要把围绕页面内容的边框变美点。现在,更给力的CSS3使你可以对一条规则添加更多的属性,如果浏览器不支持这些属性,它会忽略它们。配合使用CSS的层叠(继承),你可以不必依赖Modernizr而使用像“border-radius”这样的新属性。不过,使用Modernizr可以为你提供一些既有手段提供不了的功能:根据浏览器对新东西支持的差异动态修改的

的类名。我会通过对我们的页面添加2条新的规则来说明这点:

.borderradius #content {
  	border: 1px solid #141414;
  	-webkit-border-radius: 12px;
  	-moz-border-radius: 12px;
  	border-radius: 12px;  
}  
.boxshadow #content {
  	border: none;
  	-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  
}

第一条规则为“#content ”元素添加了一个12像素的圆角。但在既有的页面里我们已经为“#content ”元素设置了一个属性值为“2px outset #666”的边框,这在box是直角的时候是蛮好看的,但在圆角情况下就不是了。感谢Modernizr,我可以在浏览器支持“border-radius”的情况下给box设置一个1px的实边。

第二条规则更进步了一点,我们为“#content ”元素添加了一个阴影,并且针对支持“box-shadow”属性的浏览器一并移除了border属性。为什么呢?因为大部分浏览器并不为“边框附带边角”的组合外加阴影这样的效果提供一个好的表现(这是一个应该被注意的浏览器的瑕疵,但我们现在却必须忍受它)。同不使用阴影只使用边框相比,我宁可只使用阴影包围元素。采用这种方式,我可以拥有全世界最好的,准确点的,最好的一种CSS表现:在支持“box-shadow”属性的浏览器里将会呈现一个美妙的阴影;只支持“border-radius”属性的浏览器将会呈现一个好看的圆角薄边框;对于那些这2者都不支持的破烂浏览器,我们会看到一个2像素的直角边框。

下面我们要为header应用一个自定义的特殊字体,下面的是我们目前针对h1的声明,没改动版的:

h1 {
  	color: #e33a89;
  	font: 27px/27px Baskerville, Palatino, "Palatino Linotype",
  	"Book Antiqua", Georgia, serif;
  	margin: 0;
  	text-shadow: #aaa 5px 5px 5px;  
}

这些声明在我们的基础网页里工作良好,27像素的文字大小也很适合我们为h1设置的那些字体的展示。但对于我要用的名叫“Beautiful”的字体来说,27像素就太小了。下面我们要添加其他的规则来使用这个自定义字体:

@font-face {
  	src: url(Beautiful-ES.ttf);
  	font-family: "Beautiful";  
}  

.fontface h1 {
  	font: 42px/50px Beautiful;
  	text-shadow: none;  
}

首先,我们添加“@font-face”声明,并在其中为我们的自定义字体指定路径、文件名和字体名。之后我们用一条CSS语句为我们的h1选择字体样式。你会看到,我这里选择了一个很大的字号,那是因为“Beautiful”字体本身就比其他字体的文字要小很多,所以我们必须要指示浏览器在展示我们自定义字体的时候,给予h1一个很大的字号。

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

编辑:Beach

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