css实现和浏览器缩小_使用HTML5和CSS3实现跨浏览器功能

最新推荐文章于 2022-07-27 17:26:26 发布

cuyi7076

最新推荐文章于 2022-07-27 17:26:26 发布

阅读量593

点赞数

文章标签： html css java web html5

原文链接：https://www.ibm.com/developerworks/web/library/wa-crossbrowsertechniques/index.html

版权

css实现和浏览器缩小

HTML和CSS的最新版本提供了许多新功能。例如，HTML5包含使网页更具语义的新元素。您现在可以离线存储数据，创建可编辑的内容区域，使用拖放功能等等。使用CSS3，您可以创建没有图形的圆角，以及添加阴影和渐变。尽管许多激动人心的新功能可用，但并非所有更改都可以在浏览器中使用。本文提供了特定HTML5和CSS3技术，您现在可以在所有主要浏览器的所有最新版本中使用这些技术，包括Apple Safari，Windows®InternetExplorer®，Mozilla Firefox和Google Chrome。

特别是，某些版本的Internet Explorer在识别新HTML5元素方面需要一点帮助。幸运的是，一个名为html5shim的公开可用JavaScript文件（启用 HTML5 Internet Explorer的脚本）可帮助其识别和设置否则无法正确呈现HTML5元素。要包含此JavaScript文件，只需在您使用的任何CSS上方HTML文件的<head>块中包含清单1中所示的代码。

清单1. html5shim，HTML5启用Internet Explorer的脚本

<!--[if lt IE 9]>
<script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->

此代码还可以防止不需要它的浏览器加载额外的文件，从而限制了Internet Explorer 8或更早版本的加载。您可以通过访问项目网站来了解有关JavaScript库的更多信息。（请参阅相关主题中的链接。）

HTML5

除了HTML5中引入的许多新元素之外，它的新功能也很明显。本节介绍了一些新HTML5元素，并说明了如何创建可编辑的内容区域以及如何在一页和另一页之间发布消息。

构建页面

如果您花费大量时间来构建HTML网站，那么您就会知道许多常见的部分会被重复使用。这些通常包括徽标或其他标识信息的标题，列出网站各部分的导航以及带有版权信息的页脚。在以前HTML版本中，通常使用id属性来标识这些元素。例如， <div>可能包含一个标头，其id设置为"header"即<div id="header"> 。

借助HTML5，您可以使用新标签来定义这些特定区域，而无需编写其他标识属性。例如，使用新的header元素代替具有标头id的<div> 。这不仅是一种更合乎逻辑的编码方式，而且在查看其他开发人员的网页时也可能会有所帮助，因为许多开发人员具有不同的编码风格。当然， id属性在许多情况下仍然有用，但是对于这些常见元素不再需要。清单2给出了一个基本HTML5页面的示例，其中使用header ， nav ， section ， article ， aside和footer元素。

清单2.基本HTML5页面结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>Cross-browser HTML5 and CSS3</title>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/
	html5.js"></script>
    <![endif]-->
</head>
<body>

	<header>
		<nav>
			<!--Navigation-->
		</nav>
	</header>
	
    
    <section id="intro">
        <header>
            <h2>Cross-browser HTML5 and CSS3</h2>
        </header>
        <div>Lorem ipsum</div>
    </section>
    
	<section id="content">
        <section id="articles">
            <article>
                <header>
                    <h2>Article title</h2>
                    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">
					September 4th 2009
					</time></p>
                </header>
                <div>Pellentesque habitant morbi tristique senectus et netus et 
				malesuada fames ac turpis egestas.</div>
                
                <h2>Comments</h2>
                <form id="comment-form">
                    <input type="text" name="comment" id="comment" />
                    <input type="submit" value="submit" />
                </form>    
            </article>       
        </section>
    
        <aside>
            <h2>About section</h2>
            <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
			vitae est. Mauris placerat eleifend leo.</p>
        </aside>
    </section>

	<footer>Copyright notice</footer>

</body>

</html>

每个元素都是不言自明的，但应指出以下几点：

HTML5只有一种文档类型： <!doctype html> 。
header ， nav和footer正是您所期望的。
您可以使用section元素来帮助定义网页布局的各个部分，例如，文章或简介。
您可以使用article元素来标识单个博客文章，评论等。
您可以使用aside元素作为侧边栏；它的主要目的是包装主页内容。

要使aside元素出现在主页内容的旁边，请确保每个元素的宽度都与当前页面宽度一致，然后aside这些元素。浮点数曾经是使两个元素并排显示的一种常用方法，但是有了section和aside元素，您现在可以通过引入表和表单元格的显示值来停止使用浮点数，如图1所示。

图1. HTML5页面布局

使用header，intro，section，aside和footer标签HTML5页面布局示例

清单2显示了如何设置content部分以显示为表格， articles部分以及<aside>标记以显示为表格单元。这样，整个结构就像一个表，而没有所有多余的表代码，并且表单元像列一样彼此相邻。清单3给出了如何编写CSS并排显示这些元素的示例。

清单3.使用表值进行显示

#content {
	display: table;
}
#articles {
	display: table-cell;
	width: 620px;
	padding-right: 20px;
}
aside {
	display: table-cell;
	width: 300px;
}

创建可编辑的内容区域

HTML5另一个有趣的功能是ContentEditable 。如清单4所示，任何使用ContentEditable属性的元素都可以编辑。这意味着您可以编辑元素内的任何文本，而不必使用挑剔的form元素。图2给出了实际使用的ContentEditable属性的示例。

图2.可编辑的内容区域

借助Ajax，您可以轻松地将所有更新保存到数据库，并且借助跨浏览器HTML5本地存储功能，您可以将该强大功能脱机。

清单4.创建一个可编辑HTML元素

<div id="editable" contenteditable="true">
Pellentesque habitant morbi tristique senectus et 
netus et malesuada fames ac turpis egestas.
</div>

发布讯息

消息发布是新增功能，带来了许多可能性。清单5和清单6给出了如何将消息从主页发布到该页面内的iframe的示例。

清单5.发布消息

<form id="comment-form">
    <input type="text" name="comment" id="comment" />
    <input type="submit" value="submit" />
    <iframe id="comment-iframe" src="post-message.html"></iframe>
</form>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript">
    var win = document.getElementById("comment-iframe").contentWindow;
    addEvent(document.getElementsByTagName('form')[0], 'submit', function (e) {
        if (e.preventDefault) e.preventDefault();
        win.postMessage(document.getElementById("comment").value, 
			"http://studiosedition.com");
        // otherwise set the returnValue property of the original event to false (IE)
        e.returnValue = false;
        return false;
    });
</script>

一个名为postMessageJavaScript函数处理实际的消息发布。您可以在iframe中使用名为message的新事件来检索事件和相关属性。

清单6.检索发布的消息

<p id="post-comment"></p>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript">
addEvent(window, "message", function(e){
    if(e.origin !== "http://studiosedition.com") {
        document.getElementById("post-comment").innerHTML = 'Message from ' + e.origin;
    }
    else
    {
        document.getElementById("post-comment").innerHTML = e.origin + " : " + e.data;
    }
});
</script>

本示例使用一个自定义JavaScript事件函数，该函数作为名为event.js的外部文件包含在其中。清单7显示了此脚本。

清单7.一个自定义事件函数

var addEvent = (function () {
  if (document.addEventListener) {
	return function (el, type, fn) {
	  if (el && el.nodeName || el === window) {
		el.addEventListener(type, fn, false);
	  } else if (el && el.length) {
		for (var i = 0; i &lt; el.length; i++) {
		  addEvent(el[i], type, fn);
		}
	  }
	};
  } else {
	return function (el, type, fn) {
	  if (el && el.nodeName || el === window) {
		el.attachEvent('on' + type, function () {
				return fn.call(el, window.event);
			});
	  } else if (el && el.length) {
		for (var i = 0; i &lt; el.length; i++) {
		  addEvent(el[i], type, fn);
		}
	  }
	};
  }
})();

CSS3

CSS3为Web设计人员增加了一个全新的可能性。现在，您可以添加阴影，渐变，旋转和某些字体，而所有这些都无需使用会影响网页的图像。本节介绍了一些令人兴奋的新功能，您可以立即使用它们而不会出现跨浏览器的问题。现在，Web设计人员可以花更多的时间创建引人注目的网站，而不必试图确定如何使外观看起来正确。

处理阴影

阴影增加了网页的尺寸；以前只有图像可以做到这一点。使用CSS3，您可以控制许多细节，包括阴影的方向，偏移，颜色和模糊（如图3所示）。清单8 ，清单9和清单10给出了使用CSS创建阴影的各种方法的示例。

图3.使用CSS3渲染阴影

在Firefox中，使用-moz-box-shadow将阴影应用于元素。您可以为该属性分配四个值。

清单8.在Firefox中创建阴影

-moz-box-shadow: 1px 1px 4px #666;

在Safari和Chrome中，使用-webkit-box-shadow将阴影应用于元素。您也可以为该属性分配四个值。

清单9.在Safari和Chrome中创建阴影

-webkit-box-shadow: 1px 1px 4px #666;

Safari，Chrome和Firefox阴影具有四个属性：

阴影的水平偏移 。偏移数可以是正数或负数；如果为负，则偏移将阴影投射到元素的左侧，而正值将阴影投射到右侧的阴影。
垂直偏移 。该偏移量也可以设置为负数或正数。负值将阴影投射到元素上方，而正值将阴影投射到元素下方。
半径模糊 。较高的数字会增加您看到的模糊量，而较低的数字会增加阴影的锐度。
十六进制颜色 。您可以设置阴影的十六进制颜色。

使用Internet Explorer时，CSS不同。清单10显示了如何使用过滤器在Internet Explorer中创建阴影。第一个过滤器用于版本6和7，第二个过滤器用于版本8和更高版本。

清单10.用于创建阴影的Internet Explorer CSS过滤器

filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, 
Color='#333333');
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, 
Color='#333333')";

创建渐变

这些年来，创建渐变的许多方法已经普及。我最喜欢的是1px重复渐变图像。图4展示了使用CSS3时，这种技术所需要的时间更长，因为每种浏览器类型现在都有其自己的渐变处理方式（如清单11 ，清单12和清单13所示）。

图4.使用CSS3渲染渐变

您可以通过多种方式处理渐变的显示。清单11给出了一个简单的Firefox示例，该示例从顶部开始，从第一种颜色渐变为第二种颜色。

清单11.在Firefox中创建一个渐变

background: -moz-linear-gradient(top, #eaeaea, #999999);

清单12中的Safari和Chrome示例的结果与Firefox示例的外观相同，但是写法不同：

第一个属性是type，它允许您将渐变设置为线性或径向。
第二和第三属性分别是渐变的起点和终点。
第四个和第五个属性分别是渐变的开始和结束颜色。

清单12.在Safari和Chrome中创建渐变

background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eaeaea),
color-stop(1, #999999));

Internet Explorer需要使用过滤器来创建渐变。过滤器具有许多关联的属性：

Enabled表示是否启用过滤器。（默认为True。）
EndColor确定渐变的最终不透明颜色。
EndColorStr确定渐变的最终颜色。
GradientType确定GradientType的方向。
StartColor确定渐变的初始不透明颜色。
StartColorStr确定渐变的初始颜色。

清单13使用了最简单的渐变滤镜形式，定义了开始和结束颜色。

清单13.在Internet Explorer中创建一个渐变

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', 
endColorstr='#999999');

旋转元件

有时，一个元素的正常水平显示是不够的。通过引入transform，您现在可以在CSS3中旋转元素（如图5所示）。无论您是需要将元素完全侧翻还是稍微倾斜以适合您的设计，都可以使用清单14 ，清单15和清单16中所示的代码在各种浏览器中进行操作。

图5.使用CSS3旋转HTML元素

转动的元件的代码是直接的：简单地使用一个编号和deg指示的程度。在Firefox中，使用-moz-transform旋转元素，如清单14中的代码所示。

清单14.在Firefox中旋转元素

-moz-transform:rotate(-2deg);

在Safari和Chrome中，使用-webkit-transform旋转元素。

清单15.在Safari和Chrome中旋转元素

-webkit-transform:rotate(-2deg);

在Internet Explorer中旋转元素时，有几个选项。如果第一个变换方法不起作用，则可以随时使用过滤器。在Internet Explorer中旋转元素的过滤器是Matrix。尽管使用起来可能有些复杂，但在必要时确实可以完成工作。

矩阵过滤器具有许多关联的属性：

Dx给出用于线性变换的X分量。
Dy给出了线性变换的Y分量。
Enabled用于启用过滤器。
FilterType用于设置转换后的内容的像素。
M11确定用于线性变换的第一行/第一列条目。
M12确定用于线性变换的第一行/第二列条目。
M21确定用于线性变换的第二行/第一列条目。
M22确定用于线性变换的第二行/第二列条目。
SizingMethod用于确定是否调整容器的大小以适合结果。

清单16.在Internet Explorer中旋转元素

-ms-transform: rotate(-2deg); 
filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, 
M22=0.9914448613738104); 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, 
M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,
sizingMethod='auto expand')";

装箱尺寸

所有浏览器都使用W3C框模型，并且在CSS3中，可以使用box-sizing来设置浏览器呈现元素的宽度和高度的方式。 border-box元素告诉浏览器使用实际的宽度和高度，而不考虑填充和边框。清单17显示了Safari和Chrome中的框大小。

清单17. Safari和Chrome中的框大小

-webkit-box-sizing: content-box;

在清单18中，请注意Safari / Chrome和Firefox框大小的唯一区别是Firefox使用了-moz-box-sizing属性。

清单18. Firefox中的框大小

-moz-box-sizing: content-box;

Internet Explorer使用-ms-box-sizing属性，如清单19所示。

清单19. Internet Explorer中的框大小

-ms-box-sizing: content-box;

某些浏览器的默认设置会提示他们在设置元素的宽度时要考虑填充和边框，从而得出等式（宽度或高度）+ padding + border 。

概述元素

边框是定义网页区域的常用方法。新的outline元素允许与边框相同的可能性，但增加了偏移量。在清单20中，请注意，offset使您可以创建轮廓并将其从元素的实际边界偏移。过去，这只能通过在元素上添加边框和填充来实现，但并不总是能产生预期的结果。

清单20.概述和偏移元素的轮廓

outline: 1px dotted #cccccc;
outline-offset: 10px;

使用伪类

许多伪类已经在使用中。大多数通常与超链接的定位标记关联。伪类使您可以向元素添加不同的状态，并根据当前状态更改属性。清单21显示了伪类的常见用法。

清单21.伪类的常见用法

a:link { }
a:visited { }
a:hover { }
a:active { }

清单22中所示的伪选择器为可编辑HTML5内容区域创建了一个悬停状态，并应用了先前覆盖的大纲代码。

清单22.使用伪选择器

#editable:hover {
	outline: 1px dotted #cccccc;
	outline-offset: 10px;
}

嵌入字体

从一开始，网络上的字体就成为一个问题。每个用户的计算机上很少有可用的选项，并且在可用的选项中，很少有具有吸引力的选项。我们正处于经历巨大变化的边缘，字体嵌入（如图6所示）将使我们能够创建出色的布局，而无需在页面上使用沉重的图像。有几种方法可以做到这一点。

图6.使用CSS3嵌入字体

对于Internet Explorer，您需要访问要使用的字体的.eot文件格式。清单23显示了在拥有正确的字体文件后如何嵌入字体。

清单23.在Internet Explorer中嵌入字体

font-family: yanone;
src: url('../fonts/yanone.eot');

对于Firefox，Safari和Chrome，您可以嵌入.ttf或.otf字体。清单24显示了将这些字体嵌入以供以后在网页中使用的代码。

清单24.在Firefox，Safari和Chrome中嵌入字体

font-family: yanone;
src: local('Yanone'), url(../fonts/yanone.ttf) format("truetype");

嵌入字体后，通过使用@font-face声明中使用的字体系列名称创建一个类，将其应用于实际HTML元素。清单25显示了如何在类中使用此字体，然后将其应用于HTML元素。

清单25.为所有浏览器嵌入字体，并添加一个类以将字体分配给元素

@font-face {
    font-family: yanone;
    src: url('../fonts/yanone.eot');    
    src: local('Yanone'), url(../fonts/yanone.ttf) format("truetype");
}
.yanone {
  font-family: yanone, Verdana, Arial, Helvetica, sans-serif;
}

摘要

HTML5和CSS3给网络带来了巨大的变化，但是在使用它们的许多技术时，请务必谨慎，因为许多功能在所有浏览器中均无法正常工作。随着时间的推移，我们将看到主要浏览器正在使用和支持更多此类新代码。这将使我们超越任何局限性，而这些局限性需要创建变通办法来设计网页，并将更多精力集中在网站的外观上。

翻译自: https://www.ibm.com/developerworks/web/library/wa-crossbrowsertechniques/index.html

css实现和浏览器缩小

cuyi7076

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现和浏览器缩小_使用HTML5和CSS3实现跨浏览器功能

HTML和CSS的最新版本提供了许多新功能。例如，HTML5包含使网页更具语义的新元素。您现在可以离线存储数据，创建可编辑的内容区域，使用拖放功能等等。使用CSS3，您可以创建没有图形的圆角，以及添加阴影和渐变。尽管许多激动人心的新功能可用，但并非所有更改都可以在浏览器中使用。本文提供了特定HTML5和CSS3技术，您现在可以在所有主要浏览器的所有最新版本中使用这些技术，包括Appl...
复制链接

扫一扫