Home思洋影视事业部网站建设知识库
0 Comments

使用CSS样式化HTML 5

发布于：2013-09-03  |   作者：广州网站建设  |   已聚集：人围观

使用CSS样式化HTML 5

在所有的浏览器中（其中一个除外），样式化这些新的元素都非常简单。我们可以对任意元素应用CSS，因为正如规范所述：“CSS是一种样式表语言，它允许开发者和用户把样式附加到结构化文档（例如，HTML文档和XML应用程序）”，并且XML应用程序可以拥有它们想要的任何元素。

尽管你现在可以使用新的HTML 5，但是大多数浏览器（即便是最新的版本），都不一定理解它们。它们对这些元素不会有什么特殊举动，对待它们就好像你使用了未知的元素。

因此，使用CSS，我们可以浮动<nav>，给<header>和<footer>加上边框，给<article>增加边距和补白，这几乎像操作<div>一样容易。

可能会令你惊讶的是，默认情况下，CSS假设元素是display:inline的，因此，如果像我们对<div>所做的那样设置高度和宽度，它可能无法在当前的浏览器中正确地工作，除非我们显式地告诉浏览器它们是display: block。在当前的浏览器中，还有构建到浏览器中的一个基本样式表，会针对那些我们认为是本地的块级元素，覆盖掉默认的内联样式（在http://www.w3.org/TR/CSS2/sample.html可以找到这样的一个样式表）。然而，这些浏览器还没有规则能够把<header>、<nav>、<footer>、<article>定义为display:block，因此，我们需要在自己的CSS中指定。当浏览器包含这样的规则，我们的代码行会成为冗余的，但也无伤大雅，它们会充当旧浏览器（在其最迟销售日期之外还用得很好的那些）的有用的辅助。

因此，以HTML 4设计来样式化HTML 5页面，我们只需要如下样式：


	
    
		
  1. 
			header, nav, footer, article {display:block;}  
    2. 
		
  2. 
			nav {float:left; width:20%;}  
    3. 
		
  3. 
			article {float:right; width:79%;}  
    4. 
		
  4. 
			footer {clear:both;} 
    5. 
	

	

		我们将得到漂亮的HTML 5页面。只有一种浏览器例外。

	

		在Internet Explorer中样式化

	

		在Internet Explorer的当前版本中，页面将会是未样式化的（实际情况比这更糟糕，任何新的元素都是未样式化的，CSS只应用于IE支持的那些HTML 4元素）。

	

		让IE对HTML 5应用CSS的方法是使用JavaScript。如果你在页面的头部添加了如下的JavaScript：

	

	
    
		
  1. 
			<script> 
    2. 
		
  2. 
			document.createElement('header');  
    3. 
		
  3. 
			document.createElement('nav');  
    4. 
		
  4. 
			document.createElement('article');  
    5. 
		
  5. 
			document.createElement('footer');  
    6. 
		
  6. 
			</script> 
    7. 
	

	

		只要标记中有一个<body>元素，IE会神奇对那些元素应用样式。我们只需要创建每个元素一次，而不管它在页面上出现多少次。

	

		记住，HTML 5自身不需要一个body元素，但是，这是Internet Explorer 8（及其更早版本）、CSS、HTML 5和JavaScript的强力组合的要求。

	

		尽管这段JavaScript对于其他浏览器来说是不必要的，但对它们也没有任何影响。然而，你可能想要对自己的页面进行速度优化，并且使用条件语句将其包含起来，使得只有在IE中才下载和执行这段脚本（参见http://dev. opera.com/articles/view/supporting-ie-withconditional-comments/）。

	

		不管何时使用一个新的HTML 5元素，你需要记住在<head>中为其添加document.createElement。此外，也可以使用Remy的短小的HTML 5支持脚本（位于http://remysharp.com/2009/01/07/html5-enabling-script/），它将一次性对所有新元素执行这一步。

		广州网站建设,网站建设,广州网页设计,广州网站设计

	

		警告

	

		虽然IE9像其他浏览器一样工作并且不需要JavaScript，但是Internet Explorer的所有版本（当前是IE8及其之前的版本）的用户，都需要使用JavaScript以使得这一技术能够工作。

	

		还要注意，IE的打印功能模块似乎没有受到JavaScript代码的影响，因此在屏幕上样式化的页面，打印的时候不会带有这些样式。IE Print Protector (http://www.iecss.com/print-protector/)是一段JavaScript代码，它允许你在IE中打印HTML 5页面（这也包含在Remy的HTML 5工具中）。不管是出于自己的选择还是公司的安全策略而关闭了JavaScript功能的那些用户，都能够访问你的内容，但是，将会看到部分样式化或未样式化的页面。这可能是交易破坏者，也可能不是。Simon Pieters已经表明了这一点，如果你知道DOM的样子，可以样式化某些HTML 5而不需要JavaScript，但是，可移植性和可维护性不是很好，参见位于http://blog.whatwg.org/styling-ie-noscript的“Styling HTML5 markup in IE without script”一文。

	

		在Firefox和Camino的老版本中样式化HTML 5

	

		Firefox和Camino都使用Gecko显示引擎，它有一个Bug就是不能显示HTML 5，除非是完好的XHTML并且作为XML提供。Firefox 3+和Camino 2所使用的Gecko更新的版本修正了这个Bug，随着用户不断升级这些浏览器，这个问题比IE所存在的问题要轻松很多。

	

		其他遗留浏览器的问题

	

		在样式化HTML 5时，其他的遗留浏览器还存在一些问题。在某些情况下，设置元素的背景颜色没有任何效果，除非你显式地将背景颜色设置为在子元素上继承。在一些基于Gecko的浏览器中，样式化块级锚点（即包围块级元素的<a>元素，现在HTML 5中允许这样做，参见第2章）可能会有问题，并且，在所有当前的浏览器中，必须显式地把这样的锚点设置为display:block，参见http://mattwilcox.net/sandbox/html5-block-anchor/test.html.

	

		我们并不打算提供这些行为的一个完备列表，这些都是临时性的问题，我们期待随着新版本的到来，这些问题能快速消失。如果作为早期采用HTML 5的开发者，你遇到这样的Bug，可能希望发送一个错误报告，John Resig有一篇很好的文章，介绍了如何做到这点，参见http://ejohn.org/blog/web-developers-responsibility/的“A Web Developer誷 Responsibility”一文。






			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机