论文部分内容阅读
摘要:互联网近几年飞速发展,网页浏览器也越来越多种多样,而对于网页设计者来说,这是一件麻烦事,因为不同的浏览器公司的核心技术也都不一样,这就让网站显示的效果也出现了偏差。而且对于目前兼容性最为良好的CSS布局来说,也同样有这样的问题。本文主要针对目前使用最为广泛的两款浏览器:IE和Firefox,浅谈CSS的Hack技术。
关键词:浏览器;CSS;Hack;兼容性
中图分类号:TP311.52 文献标识码:A 文章编号:1007-9599 (2012) 13-0000-02
一、引言
随着计算机网络的普及,上网浏览越来越广泛,网络上的各种各样的网站也五花八门,内容丰富多彩。而每个人每台计算机使用的网页浏览器也是各种各样,这样对于网页设计者来说,是一个既头疼有具有挑战性的事情。所以网页兼容性问题从来都是经久不衰的话题。
二、CSS在不同浏览器产生的问题
(一)Web标准的建立
CSS提供了对网页布局和设计的创造性控制,不仅维护站点更加容易,而且还可以使HTML代码更加简练,缩短浏览器的加载时间。CSS与HTML共同起作用,但CSS不是HTML,它是一种完全不同的语言。HTML把信息组织到标题、段落、无序列表等元素中,给文档提供结构;CSS则与网页浏览器携手,使HTML显得更加美观。由于将内容与表现形式分离,CSS的使用也得到广泛的运用。
早在1966年,CSS1规范就被建立,同时也结束了极富表现力的HTML,将它们与网站包含的数据分离开来。在2000年,所有的主流浏览器都完全具有合适显示纯CSS布局的能力。但是只要有一部分访客仍固执地使用IE6.0或者更老的浏览器,设计师和开发者就会对采用CSS设计感到犹豫。因此必须做一些事情,让大部分的设计师与开发者感到Web标准是“安全”的。
Web标准化是2000年以后提出的新方法和新模式,W3C(即World Wide Web Consortium)希望以此标准改善网络表现层的面貌。Web标准化的目标是使用统一的技术与模式进行网站设计,从而提升网站的可用行性、改善网站结构、降低网站成本,使用统一的标准为未来的兼容打下基础。
(二)CSS兼容性的产生
到目前,由于CSS的标准越来越完善,优势越来越明显。基本上大多数网站设计者都使用CSS的布局设计,现在基本上网络上运行的网站,不论是主流门户网,还是主流论坛,或者各型个人网站,均采用CSS设计。
从互联网兴起之日起,浏览器的争战就从未停止过。IE、Netscape、Opera在90是年代成为主流,随着微软公司将IE捆绑在windows 98销售之后,IE就成功占据了浏览器市场,然而随着互联网的不断发展,浏览器就如同雨后春笋般增多,比如拥有自己内核的Firefox、Google公司的Chrome以及后来兼容了PC机的苹果公司的Safari。另外使用IE内核的国内浏览器也越来越多:遨游、360、腾讯、搜狗公司等也相继推出自己的浏览器,并迅速占领市场。
浏览器内核,(即:Rendering Engine,译为“解释引擎”),浏览器内核是浏览器最重要或者说核心的部分,它负责对网页代码的解释(如HTML、JavaScript),并渲染成网页。浏览器引擎决定了浏览器如何显示网页的内容以及页面的格式信息,如果两个浏览器的内核不同,其内核对网页代码的解释可能就不同,同一网页在两个不同内核的浏览器中显示的效果可能就会不同,夸张的甚至无法显示。
三、CSS Hack的原理和原则
目前浏览器市场可谓是百花齐放百家争鸣,版本繁多,而且各个浏览器的内核技术也不尽相同,它们对CSS的解释也就会出现偏差,这就造成在前台页面的显示出现不一样,有些差别细小,有些却是差之毫厘失之千里。有时候网站设计者自身代码的不标准,也会造成页面效果的偏差,这些问题,就是CSS的兼容性的问题。
对于代码不标准的问题,这个是比较容易解决而且是主观存在的问题,一方面完善自己代码编写,使用标准的CSS的代码,另外一个主要的问题就要从浏览器的内核的解释原理入手,消除各浏览器解释的差异,以达到出现在浏览页面正常显示的效果,这个客观存在的,网站设计者并不能左右,这也是必须解决的。所以我们就要针对不同的浏览器,编写适用的相应CSS代码,这也就是CSS Hack。
(一)CSS Hack的原理
由于不同的浏览器对CSS的支持及解释结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack。
类内部Hack:比如 IE6能识别下划线“_”和星号“*”,IE7能识别星号“*”,但不能识别下划线“_”,而Firefox两个都不能认识。这是hack技术中,使用最多的一种。
选择器Hack:比如 IE6能识别*html.class{},IE7能识别*+html.class{}或者*:first-child+html.class{}。这一类的用的比较少。
HTML头部引用(if IE)Hack:针对所有IE:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
(二)网页hack遵循的原则
关于网页显示要兼容哪些浏览器,主要遵循三个原则:
1.使用者的需要
这里所说的使用者,并不是指浏览网页的用户,而是指需要制作网站的站点拥有者。因为每个网站的出现都有其目的,目的不同,需要使用的技术、需要注意的问题也有所区别。如果网站的目的只是针对特定的用户群体,那么兼容问题也就有了相应的针对性。 2.最多数原则
制作网站的目的大多都是为了使其能够被更多的浏览者浏览。所以怎样使更多的人能够正常浏览网站,是兼容问题的大原则。据Net Application公司于2012年3月14日统计公布的浏览器使用率,IE浏览器占有54.09%,Firefox浏览器占有20.20%,Chrome浏览器占有18.85%,其他浏览器占有份额较低。从以上分析可以看到,对于一般的网站尤其是国内的,只要兼容IE浏览器和Firefox浏览器,将能够满足绝大多数浏览者的需要。
(三)针对IE原则
IE并不是惟一存在css语言解释不好的兼容问题,但它目前占有市场最大份额,很多人都在使用。当IE中发现重要问题时,很多开发人员会尝试寻找修复方法或解决方案。另外开发的节奏问题,IE的版本更新较慢,反而Firefox、Safari和Opera等浏览器不断地进行更新,新版本以非常高的频率出现,所以存在的兼容问题几乎一发现就能修复。
四、如何写CSS Hack
我们先看一个例子,比如要分辨IE6和Firefox两种浏览器,可以这样写:
在网页浏览中IE6看到是红色的,在Firefox中看到是黑色的。上面的css在Firefox中,它是认识不了后面的那个带星号的,于是将它忽略掉,解释得到的结果是:div{background: #000;},于是这个div的背景就是黑色。在IE6中它两个都能识别出来,它解释得到的结果是:div{background:#000;background:#F00;},于是根据优先级别,处在后面的#F00的优先级高,于是这个div的背景颜色就是红色了。
五、结论
从上文中我们可以知道,Hack的写法有多种多样,网页设计者在未来的设计中,需要尝试不同的方法,让网页在前台显示出最好的页面效果,另外为了避免不必要的问题,设计者自身编写代码也需要尽可能的标准。不管代码的如何书写,我们的目标都是始终围绕在不同浏览器之间取得最好的显示的效果。
参考文献:
[1]David Sawyer McFarland.CSS实战手册(第2版)[M].俞黎敏,译.北京:电子工业出版社,2010
[2]CSS布局的出现.http://www.syjy.jzedu.cn/government/Documents/xxwy/17zh/html/108ACB110AD.htm
[3]蒋回生.浅谈网页制作中浏览器差异性——样式兼容问题[J].电脑知识与技术,2010,06(27)
[4]百度百科.http://baike.baidu.com/view/1119452.htm
[5]陆钊.常用CSS hack技术的分析及应用[D].大连理工大学硕士论文,20081213-2.1
关键词:浏览器;CSS;Hack;兼容性
中图分类号:TP311.52 文献标识码:A 文章编号:1007-9599 (2012) 13-0000-02
一、引言
随着计算机网络的普及,上网浏览越来越广泛,网络上的各种各样的网站也五花八门,内容丰富多彩。而每个人每台计算机使用的网页浏览器也是各种各样,这样对于网页设计者来说,是一个既头疼有具有挑战性的事情。所以网页兼容性问题从来都是经久不衰的话题。
二、CSS在不同浏览器产生的问题
(一)Web标准的建立
CSS提供了对网页布局和设计的创造性控制,不仅维护站点更加容易,而且还可以使HTML代码更加简练,缩短浏览器的加载时间。CSS与HTML共同起作用,但CSS不是HTML,它是一种完全不同的语言。HTML把信息组织到标题、段落、无序列表等元素中,给文档提供结构;CSS则与网页浏览器携手,使HTML显得更加美观。由于将内容与表现形式分离,CSS的使用也得到广泛的运用。
早在1966年,CSS1规范就被建立,同时也结束了极富表现力的HTML,将它们与网站包含的数据分离开来。在2000年,所有的主流浏览器都完全具有合适显示纯CSS布局的能力。但是只要有一部分访客仍固执地使用IE6.0或者更老的浏览器,设计师和开发者就会对采用CSS设计感到犹豫。因此必须做一些事情,让大部分的设计师与开发者感到Web标准是“安全”的。
Web标准化是2000年以后提出的新方法和新模式,W3C(即World Wide Web Consortium)希望以此标准改善网络表现层的面貌。Web标准化的目标是使用统一的技术与模式进行网站设计,从而提升网站的可用行性、改善网站结构、降低网站成本,使用统一的标准为未来的兼容打下基础。
(二)CSS兼容性的产生
到目前,由于CSS的标准越来越完善,优势越来越明显。基本上大多数网站设计者都使用CSS的布局设计,现在基本上网络上运行的网站,不论是主流门户网,还是主流论坛,或者各型个人网站,均采用CSS设计。
从互联网兴起之日起,浏览器的争战就从未停止过。IE、Netscape、Opera在90是年代成为主流,随着微软公司将IE捆绑在windows 98销售之后,IE就成功占据了浏览器市场,然而随着互联网的不断发展,浏览器就如同雨后春笋般增多,比如拥有自己内核的Firefox、Google公司的Chrome以及后来兼容了PC机的苹果公司的Safari。另外使用IE内核的国内浏览器也越来越多:遨游、360、腾讯、搜狗公司等也相继推出自己的浏览器,并迅速占领市场。
浏览器内核,(即:Rendering Engine,译为“解释引擎”),浏览器内核是浏览器最重要或者说核心的部分,它负责对网页代码的解释(如HTML、JavaScript),并渲染成网页。浏览器引擎决定了浏览器如何显示网页的内容以及页面的格式信息,如果两个浏览器的内核不同,其内核对网页代码的解释可能就不同,同一网页在两个不同内核的浏览器中显示的效果可能就会不同,夸张的甚至无法显示。
三、CSS Hack的原理和原则
目前浏览器市场可谓是百花齐放百家争鸣,版本繁多,而且各个浏览器的内核技术也不尽相同,它们对CSS的解释也就会出现偏差,这就造成在前台页面的显示出现不一样,有些差别细小,有些却是差之毫厘失之千里。有时候网站设计者自身代码的不标准,也会造成页面效果的偏差,这些问题,就是CSS的兼容性的问题。
对于代码不标准的问题,这个是比较容易解决而且是主观存在的问题,一方面完善自己代码编写,使用标准的CSS的代码,另外一个主要的问题就要从浏览器的内核的解释原理入手,消除各浏览器解释的差异,以达到出现在浏览页面正常显示的效果,这个客观存在的,网站设计者并不能左右,这也是必须解决的。所以我们就要针对不同的浏览器,编写适用的相应CSS代码,这也就是CSS Hack。
(一)CSS Hack的原理
由于不同的浏览器对CSS的支持及解释结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack。
类内部Hack:比如 IE6能识别下划线“_”和星号“*”,IE7能识别星号“*”,但不能识别下划线“_”,而Firefox两个都不能认识。这是hack技术中,使用最多的一种。
选择器Hack:比如 IE6能识别*html.class{},IE7能识别*+html.class{}或者*:first-child+html.class{}。这一类的用的比较少。
HTML头部引用(if IE)Hack:针对所有IE:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
(二)网页hack遵循的原则
关于网页显示要兼容哪些浏览器,主要遵循三个原则:
1.使用者的需要
这里所说的使用者,并不是指浏览网页的用户,而是指需要制作网站的站点拥有者。因为每个网站的出现都有其目的,目的不同,需要使用的技术、需要注意的问题也有所区别。如果网站的目的只是针对特定的用户群体,那么兼容问题也就有了相应的针对性。 2.最多数原则
制作网站的目的大多都是为了使其能够被更多的浏览者浏览。所以怎样使更多的人能够正常浏览网站,是兼容问题的大原则。据Net Application公司于2012年3月14日统计公布的浏览器使用率,IE浏览器占有54.09%,Firefox浏览器占有20.20%,Chrome浏览器占有18.85%,其他浏览器占有份额较低。从以上分析可以看到,对于一般的网站尤其是国内的,只要兼容IE浏览器和Firefox浏览器,将能够满足绝大多数浏览者的需要。
(三)针对IE原则
IE并不是惟一存在css语言解释不好的兼容问题,但它目前占有市场最大份额,很多人都在使用。当IE中发现重要问题时,很多开发人员会尝试寻找修复方法或解决方案。另外开发的节奏问题,IE的版本更新较慢,反而Firefox、Safari和Opera等浏览器不断地进行更新,新版本以非常高的频率出现,所以存在的兼容问题几乎一发现就能修复。
四、如何写CSS Hack
我们先看一个例子,比如要分辨IE6和Firefox两种浏览器,可以这样写:
在网页浏览中IE6看到是红色的,在Firefox中看到是黑色的。上面的css在Firefox中,它是认识不了后面的那个带星号的,于是将它忽略掉,解释得到的结果是:div{background: #000;},于是这个div的背景就是黑色。在IE6中它两个都能识别出来,它解释得到的结果是:div{background:#000;background:#F00;},于是根据优先级别,处在后面的#F00的优先级高,于是这个div的背景颜色就是红色了。
五、结论
从上文中我们可以知道,Hack的写法有多种多样,网页设计者在未来的设计中,需要尝试不同的方法,让网页在前台显示出最好的页面效果,另外为了避免不必要的问题,设计者自身编写代码也需要尽可能的标准。不管代码的如何书写,我们的目标都是始终围绕在不同浏览器之间取得最好的显示的效果。
参考文献:
[1]David Sawyer McFarland.CSS实战手册(第2版)[M].俞黎敏,译.北京:电子工业出版社,2010
[2]CSS布局的出现.http://www.syjy.jzedu.cn/government/Documents/xxwy/17zh/html/108ACB110AD.htm
[3]蒋回生.浅谈网页制作中浏览器差异性——样式兼容问题[J].电脑知识与技术,2010,06(27)
[4]百度百科.http://baike.baidu.com/view/1119452.htm
[5]陆钊.常用CSS hack技术的分析及应用[D].大连理工大学硕士论文,20081213-2.1