《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.5 CSS3及其他

1.5 CSS3及其他

正如HTML5对应HTML4.01一样,CSS3对应的是CSS2.1。CSS3是对一些现有CSS2.1功能进行标准化的进化迭代;因为在不同浏览器中,这些功能的执行会略有差异。另外,在这个网络发展的新时代,网络浏览器可以被嵌入任何设备,所以CSS3还引入了一套全新的功能,使得CSS能符合新时代的要求。

改造浏览器的第一类CSS3功能在很大程度上是视觉效果上的,并且,这些功能基于开发人员已经使用多年的编辑程序:使用任何来源的字体、圆角,并在文本和框上放置阴影。登录之后是一系列新的选择器,这些选择器能使文件寻访式样变得更容易;此外,它们能产生更动态的效果,如2D和3D的转换以及过渡动画。

除了许多光彩夺目的视觉效果,CSS3的真正革命来自于媒体查询。媒体查询是一种语法,使用这种语法,就可以根据浏览器的尺寸和功能,为浏览器提供样式,这是迈向多设备式样的第一步。第3章会讲到媒体查询,还会讲到CSS的一系列其他属性,这些属性对于创建响应式和适应式网站非常有用。

CSS还面临另一个重大挑战:如何解决布局的问题—即要使布局能够真正具备支持被用户代理查看的功能。这些功能包括动态用户界面属性和CSS控制网格系统。在第4章中会有更多相关内容。

不同于CSS2.1,CSS3不是一个单一的规范。在CSS2.1中,一切都放在同一个文档里描述,这种行为导致了文档太大且太复杂。相反,CSS3是模块化的,它是一系列更短更特定的规范,可以由浏览器通过模块化的方式来实现。和使用HTML5一样,如果打算等到CSS3“准备就绪”再使用它,那这种想法就太愚蠢了,因为某些模块将会很快就绪并实现,而另一些模块需要等待很长的时间。

CSS模块有级别数字,这些数字可以显示它们经历了多少迭代;有些模块已经到了级别4,这些级别4模块的可以先于级别3的模块实现。然而,这并不意味着,有一天我们会迎来CSS4。这种情况是不可能发生的。因为CSS3是一个简称,它表示“任何比CSS2.1更新颖的东西”,总有一天,这种区别将被摒弃,一切都将只是CSS。

1.5.1 供应商特定前缀

当浏览器以实验或予标准的方式来实现功能时,为了能确保安全,避免兼容性问题,浏览器往往使用带有规范化属性名称的供应商特定前缀。例如,当CSS Apes模块提出了名为“gorilla”的新属性,Firefox和WebKit都在对这种新属性进行稍有差别的实验性的实现。可是,新属性在两个浏览器中产生的效果是不同的,所以,如果Firefox和WebKit都使用该属性名称时,通常会在属性名称前加上供应商前缀以避免一些潜在的冲突:

供应商特定前缀本是一个伟大的想法,但事实上,情况变得有些混乱。和其他方面问题一样,一些前缀的属性被开发人员如此广泛地使用,以至于其他浏览器厂商也感觉有必要使用它们竞争对手的供应商前缀,这样做很公平,但却让整件事变得有些荒谬。

浏览器厂商正试图让这个系统处于他们的掌控之中,但有时,使用供应商前缀属性会难以避免。大多数情况下,在我的代码示例中,我都使用无前缀属性。

1.5.2 CSS框架和预处理器

如今,使用一些帮手为CSS开发助一臂之力,成为了非常时髦的事儿,尤其是致力于大型开发团队或是大项目的时候。通常,这些帮手以框架或预处理器的形式参与进来,并且往往两者同时参与CSS开发。

框架是一套预先定义的CSS规则,使用这些规则可以使开发更快速。它们通常包括版式和窗体,很多时候,还包括布局模式。Blueprint.css是一种非常珍贵的老框架,被用于许多知名网站;但目前流行的框架是Twitter推出的Bootstrap。Bootstrap提供了许多预先格式化的布局、排版和表单选项,以及一系列可重用的组件,甚至还提供JavaScript的扩展性。

预处理器是运行于服务器端的程序,它使用CSS类语言来提供扩展语法和简写语法;因为CSS类语言在生成时,可转变成正确格式化样式表。这些扩展不但有节省时间的功能,如变量和嵌套的规则;而且还有自定义功能,它们赋予用户难以置信的权力。在预处理器竞争中,Sass最受欢迎,而LESS紧跟其后,成为前者最主要的竞争对手。

虽然在现代网络开发中,框架和预处理器两者都有各自不同的作用,但在本书中,我不会讨论或使用它们。因为,我教授的是更基本的语言,同时也是它们两者所依赖的语言。

时间: 2024-09-17 04:24:49

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.5 CSS3及其他的相关文章

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 导读

前言 移动网页设计与开发 HTML5+CSS3+JavaScript 我们正处于一个史无前例的网络创新时代.不久前,一家叫微软的公司主宰着网络世界,例如,2003年全球约95%的电脑使用IE浏览器.这种高度统治的优势是:为开发人员提供了一个稳定的市场:但同时也存在严重的缺陷:微软选择了结束IE浏览器的非核心工作,使得网络创新停滞不前--这就是一个缺乏竞争的封闭环境导致的结果. 现在的情形完全不同了,将近四五个主要浏览器厂商,大约相同数量的主要操作系统商,以及更多的团队一直参与其中.Adobe已经

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 第 1 章 网络平台

第 1 章 网络平台 移动网页设计与开发 HTML5+CSS3+JavaScript 在这一章里,我将谈论一些必要的网络技术,一些非常有用的知识,以及多设备网络工作的要求和规定.本章的目的确保我们的起点相同,这是一种比喻-我知道我们现在确实起点相同,因为你正在阅读这段话-但下一章才真正开始涉及技术内容. 如果读者渴望马上学习这些技术,则可以跳过这一章并直接阅读第2章.但我强烈建议读者不要这样做.因为第1章含有一些有趣且实用的背景信息.此外,技术含量较少的内容使我有机会表现我那令人惊叹的幽默感.

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4  真正的HTML5

1.4 真正的HTML5 HTML5是HTML4.01的迭代,它在HTML4.01基础上添加了一些新功能,废弃或者删除了几项旧功能,并且对一些现有的功能进行了修改.编写HTML5的目的一是为了规范许多开发人员已使用多年的常见程序编辑和设计模式,二是为了满足现代网络的需求,这是因为,现代网络与应用程序的相关性和它与文档的相关性是一样大的(也可能更大).事实上,Web Applications 1.0是HTML5的前身. HTML5的新功能包括建立可提供含义和可接入性的文档,我会在第2章中介绍.HT

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.2 网页易读性倡议的无障碍的富因特网应用程序组件(WAI-ARIA)

2.2 网页易读性倡议的无障碍的富因特网应用程序组件(WAI-ARIA) 创建网页易读性倡议的无障碍的富因特网应用程序(Accessible Rich Internet Applications)组件(WAI-ARIA)的目的,就是为了解决可访问性的短缺.随着网络超越简单的文档标记,进入一个应用和交互的时代,可访问性短缺就产生了. 下面,我们来看看WAI-ARIA是如何做到这一点的.首先,创建一些HTML扩展(或者,事实上任何基于DOM语言的扩展都可以,例如SVG和XML的扩展):其次,允许开发

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.4 微格式

2.4 微格式 微格式由一群草根开发人员联合创建.通过使用现有属性的标准化标记模式,他们给内容添加上了更多的属性.微格式最大的魅力不在于它是HTML的扩展,而在于它使用当前的开发方法来工作.它既是一种设计原则,也是一组标准用法模式. 微格式多种多样,有相当复杂的微格式,也有极其简单的微格式.下面这个例子,可能是最简单的微格式: 这种微格式被称为Rel-Tag微格式.关键字是rel属性中的tag,它让其他机器知道URL链接到一个在a元素里的页面,这个页面由一个标签来描述,该标签的名称是URL的最后

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.7 数据属性

2.7 数据属性 HTML5扩展元素含义还可以通过另一种方式:使用数据属性.这些都是用户定义的属性,这些属性的值能提供元素的相关信息,而无需给予机器或人类任何额外的语义.接下来,让我们看看更详细的解释. 假设我们想输出一组数据,其中每一项都有两个值-名称和编号 (例如,独特的数据库ID):我们想将名称显示在文档中,还想让编号可以用于脚本运行中.从目前情况来看,没有相关的属性可以用来存储该信息:我们可能不得不使用这样一个类: 创建数据属性的目的,就是为了将数据相关联.数据属性能像类一样,让你存储这

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.6 微数据

2.6 微数据 通过创建被称为微数据的简单语法,HTML5解决了语义问题.根本上,微数据是一系列提供富有意义的机读数据的名称值对.和前面一样,与其设法去解释它,还不如使用这个更简单易行的方法-向读者展示它是如何运作的: 此标记创建了一个单项.itemscope属性被用于标记此特定项的界限或范围的包含元素.里面含有被称为property的名称值对:itemprop属性的值是名称-在此示例中,是"city"-而元素的内容是值-在此示例中,是"London".最后的结果是

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.6 浏览器支持

1.6 浏览器支持 现在,读者应当已经了解多设备网络非凡的广泛性和多样性:另外,在这些设备上运行的浏览器范围也相当广,甚至在各式各类的浏览器中,还有各种版本和实现(我希望你已经明白这一点,因为序言中大部分的内容都在试图说明这一点).因此,本书中所提到的一些功能有可能还没实现,或有可能在实现方式上略有不同. 对于每个新功能,我都将它们视为完全实现,而不涵盖每种不同级别的实现水平.另外,我还在附录A中介绍了这些新功能的实际实现. 此外,甚至最前沿的标准提案也会发生变化,即使是当某些浏览器中已经进行了

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.3 了解什么是HTML5

1.3 了解什么是HTML5 关于HTML5到底是什么,还是有些模糊不清.这是我们大家(我们大多数人,大多数用户)对它的理解与其真实的含义有所偏差.HTML5不是一个用于我们创建网站的全新平台,不是一个富多媒体环境,也不是一个可以跨多设备运行网站的工具.总体来说,HTML5是一种尝试,不断制作网站以满足我们当前使用方式的需求,它由最早的简单文本链接网络转变而来. 大多数人认为,HTML5是一系列相关关联并相互补充的技术的集合,这些技术包括CSS3.SVG.JavaScript API等.尽管一些