当前位置:首页 > 前端技术 > Web前端技术研究:Css hack技术---令人沮丧的技术

Web前端技术研究:Css hack技术---令人沮丧的技术

2022年09月16日 20:53:18前端技术4

  我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下。

  我在单位整理的研究笔记:

  不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展示的页面效果不一样,碰到这样的情况就需要开发人员通过针对不同的浏览器对应写出不同的CSS代码,从而达到兼容不同浏览器的目的,不会让页面因为浏览器的不同而产生有差异的显示,这种技术有个专门的名称就是CSS Hack。

  在中国,这种差异主要是体现在主流浏览器上,我们只要解决了主流浏览器之间的CSS差异就可以了。目前流行的主流浏览器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文里对应简称为IE(后面如果添加数字,数字代表版本号,例如IE8),CH,FF,SA和OP。

  CSS Hack原理是通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。

  CSS Hack有三种实现方式,它们分别是:CSS类内部的Hack、CSS选择器的Hack和HTML头部的Hack。

  CSS类内部的Hack:是指CSS属性或属性值里加上只有某个浏览器自己可以识别的特殊字符串。例如IE6和IE7都会识别在CSS里属性名称前加上“*”号的属性,但是firefox却无法识别带“*”号的属性,因此下面的代码:

body{
background:green; /* firefox下的显示 */
*background:red; /* IE6和IE7下的显示 */
}

  CSS选择器的Hack:它是指在CSS选择器前面加上只有某种浏览器自己可以识别的特殊字符串。例如:IE6能识别*html .class{},IE7能识别*+html .class{}。

  HTML头部的Hack:这种方式主要是针对IE浏览器,IE浏览器是广大Web前端工程师的痛,它不仅有很多自己独有的区别于其他浏览器的CSS样式,自己不同版本之间的CSS实现也会存在很大的差异。下面我们来看看这种方式的写法:

<!--[if lte IE 8]> <!-- IE条件注释--> 
<link src="iecss.css" rel="stylesheet" /> 
<![endif]--> 

 

  这种写法会被非IE的浏览器所忽略,只有IE浏览器才会执行上面的代码,上面这段代码的意思是当IE的版本是8或者比8低的IE浏览器才会执行下面的样式。例子中有一个运算符号lte,它是less than or equal to的简写,意思是小于等于,其他的运算符号还有lt(less than,小于)、gte(greater than or equal to,大于等于)、gt(greater than,大于)。

  下面我们来看一段代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技术</title>
</head>
<style type="text/css">
div{
    width:400px;
    height:120px;
    margin-bottom:20px;
    border-style:solid;
    border-width:1px;    
}
div.d01{
    background:red;/* FF */
    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}
</style>
<body>
<div class="d01"></div>
</body>
</html>

  运行这个页面,firefox显示的颜色是red,opera为blue,ie6为yellow,ie7为green,ie8以上的版本是turquoise,chrome和safari为blcak。这个CSS Hack是我平时常用的一套模式。这里要说明下,ie8以上包括ie8的CSS样式差异性较少,而chrome和safari之间的CSS样式差异较小,因此这里我并没有为它们单独进行hack。

  如果我们把上面代码里的div.d01的内容顺序调整下,例如下面这样:

    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
    background:red;/* FF */

  我们会发现不同浏览器显示的效果就会发生变化。ie8以上的版本以及opera显示正常,但是chrome,safari,ie6,ie7显示的是红色,而firefox则没有任何颜色。引起这个问题的原因是CSS优先级的问题,例如background:turquoise\9;这种写法不会导致高版本的ie在显示上产生偏差,是因为高版本的ie会优先使用这个样式,对于同级别的CSS样式,最后面的样式会覆盖前面的样式,例如我们在ie6和ie7下看到的情况,此外,如果正确的样式前面的样式写法导致浏览器无法正常解析,那么就会导致整个CSS样式加载的失败,例如firefox。

  因此编写CSS Hack时候,对于属性排列的顺序是特别注意的。

  CSS Hack是一个总结性和经验性很强的技术,它不像很多编程技术那样需要我们去反复理解一些逻辑上的关系,而是需要我们平时多留心,多实践。接下来我将会列举不同浏览器之间的CSS Hack技术,大家可以根据自己实际的情况选择应用。

  对于ie,我们这边主要考虑ie6,ie7,ie8,ie9,这四种版本的ie是目前中国市场上最流行的ie版本,虽然ie10已经出来,但是ie10现在使用的用户相对较少,这边不会作为重点讲解。

  对于CSS类内部的Hack ,ie6有自己专有的判断标识“_”,其他的浏览器都不会识别”_”,ie6也支持”*”,但是“*”也被ie7识别,因此当我们只想区别ie6和ie7的时候,可以按下面的代码书写:

div.d02{
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}

  上面的写法既可以区分ie6和ie7,但是如果我们颠倒其位置,那么不管是ie6还是ie7都会显示green颜色。”*”和“_”是ie6和ie7专属的,其他版本的浏览器都不支持该标记。

  ie6和ie7除了上面两个专属标记,IE6还能识别能识别*html selector{},IE7还能能识别*+html . selector {},大家看下面这段代码:

*html div.d03{
    background:yellow;/* IE6 */
}
*+html div.d03{
    background:green;/* IE7 */
}

  这两种写法是等价的。IE6的*html selector {}和IE7的*+html . selector {}也都是专有标记,别的浏览器都不会识别的。

  还有个很有趣的标记,就是!important,在网上很多资料说该标记IE6不支持,IE7和firefox支持,为了验证网上说法本人写了下面的样式:

div.d04{
    background:red !important;    
}

  我使用的浏览器配置如下:

  支持IE7,IE8,IE9;IE6通过ietester实现;firefox版本是23.0.1;chrome的版本是27.0.1453.116 m;opera的版本是12.12,运行上面的样式实际的效果是:

  IE6,IE7,chrome,safari显示为红色,而其他浏览器都没有显示任何颜色。

  这样说明随着浏览器的不断升级,csshack技术也是发生变化的,在使用一些现成的css hack代码时候,如果当不到预期效果是很正常,这时就需要我们细心的测试,找出最好的解决方案。

 

  以上的文字都是我在单位电脑上进行开发写出来,我家里的笔记本重装了操作系统,所有的浏览器都进行了重装,现在都是最新的版本,当我把下面的代码再执行下时候:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技术</title>
</head>
<style type="text/css">
div{
    width:400px;
    height:120px;
    margin-bottom:20px;
    border-style:solid;
    border-width:1px;    
}
div.d01{
    background:red;/* FF */
    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}
</style>
<body>
<div class="d01"></div>
</body>
</html>

 

 

  上面的代码显示的是:

  Ie6是yellow,ie7是green,ie8和ie9和ie10是turquoise,op和sa是black,ch则变为了red,ff还是red。

  op和ch显示和我单位不一样了。

  我笔记本上的浏览器版本是:Ie7,ie8,ie9,ie10,ietester的ie6,op是15.0,ch是29.0.1547.57,sa是5.1.7,ff是23.0.1;

  这和我单位电脑不一样,公司的电脑是(支持IE7,IE8,IE9;IE6通过ietester实现;firefox版本是23.0.1;chrome的版本是27.0.1453.116 m;opera的版本是12.12)

  Csshack技术的研究是个十分令人泄气的事情,网上的资料几乎都已经作废了,每次浏览器的升级都会导致你的csshack的失败。

  不过这里我还是想请教下看到本文的大牛,谁能给一个完美的css能区别开所有的浏览器。

 

 

 

 

作者:夏天的森林
来源链接:https://www.cnblogs.com/sharpxiajun/p/3292498.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42349.html

标签: css
分享给朋友:

“Web前端技术研究:Css hack技术---令人沮丧的技术” 的相关文章

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

用HTML5/CSS3/JS开发Android/IOS应用

用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。  在...

scrapy css选择器提取a标签内href属性值

 示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div&...

HTML中的form表单的标签、属性、属性值;  CSS以及HTML5新增属性、属性值

HTML中的form表单的标签、属性、属性值; CSS以及HTML5新增属性、属性值

form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS元素类型

CSS元素类型

前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素、行内元素和行内块元素。本文总结这三种显示方式的特征和区别。 1 写在前面 最近在整理cnblogs上页面的样式,默认右侧【随笔分类】中的标...

css如何让div显示在最上层

方法:设置div样式 z-index:autoauto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:999。前提是div是定位元素。 作者:猪猪猪猪猪鸭 来源链接:https://blog.csdn.net/qq_34173549/arti...

CSS中的global

在我使用antd等组件时,常常需要更改组件的默认样式,这时候,我们就需要用:global{}将需要修改的样式包裹起来。这种情况,我遇到过很多次,但是从来没有探究过原因,今天就浅浅的说一下我的理解。 在说这个问题之前,我们需要先知道CSS Modules。...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。