《HTML5与CSS3实战指南》——1.5 我们为什么应关注CSS3

1.5 我们为什么应关注CSS3

在这本书的后面,我们将详细介绍CSS3的新功能。同时,我们将告诉您为什么CSS3的新技巧能够令网络开发人员兴奋。

一些设计技巧几乎在每一个项目中都会得到应用。投影、渐变和圆角是3个非常好的示例。它们应用在每一个地方。只要应用恰当,并与网站的整体主题和目的一致,这些技术的改进会为整个设计增添光彩。

可能您在想:我们使用CSS创建这些设计元素已经很多年了。我们还有必要学这些吗?

过去,为了创建渐变、投影及圆角,网络设计人员必须求助于许多棘手的技巧。有时,还需要一些其他的HTML元素。在某些情况下,HTML保持的相当整洁,但此时需要一些脚本使用技巧。以渐变为例,使用其他图标是不可避免的。我们忍受这种解决方法,是因为我们没有其他方法完成这些设计。

CSS3允许我们以这种思想超前的方式使用这些和其他的设计元素,从而使我们在诸多方面受益:使标记整洁;从而便于使用人员及计算机进行访问;维护代码;减少不必要的图标以及更快载入网页。

供应商前缀注释

为了使用CSS3的一些新功能,需要包含几行特殊的代码。这是因为浏览器供应商在添加执行CSS3的一些新功能时,使用了自己的前缀版本属性。例如,在FireFox中转换元素时,需要使用-moz-transform属性;同样,在基于WebKit的浏览器中,比如,Safari和Google Chrome,您必须使用-webkit-transform属性。在有些情况中,为使用一个CSS属性,您可能必须添加4行代码。这可能似乎会丧失一些从避免黑客、图像及非语义标记所获得的益处。

但是,浏览器供应商以这种方式执行这些新功能,理由如下:现在的规范还不是最终版本,在程序执行中,还有一些漏洞。因此,现在您在执行这些功能时,使用供应商前缀来提供数值,并且使用无前缀声明来提供每个属性的永久版本。当规范成为最终版本且实现经过完善后,浏览器前缀将被取消。

即使用这些前缀来维护代码似乎需要很多工作,现在使用CSS3,仍然是利大于弊。除了需要改变一些前缀属性来修改设计元素外,维护基于CSS3的设计还是比通过图形程序更改背景图像或处理那些其他标记和黑客脚本所带来的弊端要容易一些。此外,如上所述,您的代码更不会过时。

时间: 2024-09-14 00:52:24

《HTML5与CSS3实战指南》——1.5 我们为什么应关注CSS3的相关文章

《HTML5与CSS3实战指南》——1.4 什么是CSS3

1.4 什么是CSS3 HTML5与CSS3实战指南创建网页的另一个独立的但并非不重要的一部分是层叠样式表(CSS).正如您所了解到的,CSS是一种样式语言,用来描述如何呈现或设置HTML标记样式.CSS3是CSS规范的最新版本.术语"CSS3"不仅是CSS新功能的参考文献,也是CSS规范发展进程的第三级1. CSS3包含CSS2.1(CSS规范的前一版本)的所有内容.它还添加了一些新功能来帮助开发人员解决一些问题,并不再需要非语义标记.复杂的脚本及其他图像.CSS3的新功能包括支持附

《HTML5与CSS3实战指南》——1.3 我们为什么应关注HTML5

1.3 我们为什么应关注HTML5 如前所述,HTML5的核心部分是新语义元素,以及相关技术和API.通过介绍这些新内容和语言更改,目的是使网页更容易编写.使用和访问. 这些新语义元素,以及类似于WAI-ARIA和微数据(分别在附录A.附录B和附录C中介绍)等其他标准,可以帮助使用人员及计算机更轻松地访问文档,从而有利于可访问性和搜索引擎的优化. 具体地讲,新语义元素适用于设计动态网页,使制作的网页更具模块性和可移植性.我们将在后面的章节中详细介绍. 最后,与HTML5相关的API可以帮助改进网

《HTML5与CSS3实战指南》——2.2 基本的HTML5模板

2.2 基本的HTML5模板 在您学习HTML5和新技术时,您可能想创建自己的蓝图或示例文件,并通过它们来构建基于HTML5的项目.实际上,您可能对已存在的XHTML或HTML4.0项目已经做了类似的事情.我们鼓励您这样做,当然您也可以考虑使用一些在线资源,从而为您提供一个HTML5的基本起点1. 在这个项目中,我们将从头开始,编写自己的代码,并对每一部分进行详细讲解.当然,即使是最好.最庞大的示例网站也不可能包含所有的新元素和技术.我们也会详细讲解一些未在我们所创建的示例网站中应用的新功能.这

《HTML5与CSS3实战指南》——2.3 HTML5常见问题

2.3 HTML5常见问题 在简要介绍了HTML5标记以后,您可能会有一些问题.以下是一些常见问题的答案. 2.3.1 为什么这些变更仍能够在旧版浏览器中工作 这是许多开发人员难于接受HTML5的地方.其实这根本不是问题,为了便于读者理解,我们会将HTML5和CSS3的一些新功能(后面章节将介绍)进行对比. 在CSS中,在添加新功能时(例如,border-radius属性将圆角添加到元素中),同时也需要将它添加到浏览器呈现引擎中,因此旧版浏览器无法识别它.所以,用户在使用不支持border-ra

《HTML5与CSS3实战指南》——第1章 HTML5和CSS3简介1.1 什么是HTML5

第1章 HTML5和CSS3简介 本章将简要回顾HTML5和CSS3的发展历程,并介绍HTML5和CSS3对于现代网站及Web应用程序的重要性,以及如何应用这些技术. 当然,如果您希望直接进入创建项目的实质部分,并开始学习如何使用HTML5和CSS3的新技术及功能,您可以先跳到第2章,稍后再回到本章. 1.1 什么是HTML5 我们今天所理解的HTML5,它具有一段相对动荡的历史.您可能已经了解到HTML是万维网上用于描述网页内容及数据的主要标记语言.HTML5是此标记语言的最新版本,它包括新功

《HTML5与CSS3实战指南》——第2章 HTML5样式的标记2.1 The HTML5 Herald简介

第2章 HTML5样式的标记 我们已经向您介绍了关于HTML5历史的一些基本知识,以及学习它的重要性.现在,我们将在您的项目中开始使用它.首先向您介绍我们将在本书中逐步创建的示例网站. 在简单介绍了我们将创建的示例网站之后,我们将讨论一些HTML5的基本语法知识,以及编码最佳实践的一些建议.我们将遵循浏览器兼容性及HTML5页面结构基本原理等一些重要原则.最后,我们向您介绍一些HTML5特有的元素,以及如何使它们适应布局. 现在开始吧! 2.1 The HTML5 Herald简介 我们首先从头

《HTML5与CSS3实战指南》——2.4 定义页面结构

2.4 定义页面结构 现在我们已经了解了模板的基础知识,下面将开始介绍详细信息,为网页指定一些基本结构. 在本书后面的章节中,我们将深入介绍添加CSS3功能和其他HTML5的精华.现在,我们将考虑在网站总体布局方面应使用哪些元素.我们将在本节以及后面的章节介绍语义.当使用这个术语时,我们指的是用指定的HTML元素名称来描述其内容的方式.由于HTML5包含一系列广泛的语义元素,因此您会发现,与过去使用HTML4或XHTML的时候相比,多花了一些时间思考内容结构及含义.非常好!理解了内容的意思才能够

《HTML5与CSS3实战指南》——1.7 实际应用

1.7 实际应用 推出新技术并希望此技术只为某一级别的浏览器提供编写网页和应用程序的服务,这显然是不现实的.在现实世界中,我们希望HTML5和CSS3取得进一步的发展,所以我们要使它们能够在各种平台上开发网页.这种平台包括现代浏览器.Internet Explorer的早期版本以及正在蓬勃发展的移动设备市场. 在某些时候,可以为不同的用户代理提供不同的指令,但这类似于早期具有混乱的浏览器嗅探和代码分叉的Web.但是这一次不一样,新代码是面向未来的,所以当旧版浏览器不能正常使用时,您仅需删除回调和

《HTML5与CSS3实战指南》——1.6 在现实中,我们想做的是什么

1.6 在现实中,我们想做的是什么 在现实中,我们不会创建了一个网站后,然后去做另一个项目,而对前一个项目的工作置之不理.我们会创建Web应用程序,并对其进行更新.微调,对其潜在的性能问题进行测试,调整其设计.布局和内容. 换句话说,在现实中,我们都会再次访问我们所写的代码.所以我们编写代码时,会使用最可靠.易于维护并高效的方法,并便于以后访问代码对其进行必要的完善和修改.显然,这不仅对我们自己创建和维护的网站及Web应用程序十分重要,同样,也对为我们客户所创建和维护的网站及Web应用程序同等重