乐趣区

关于css:hack技术

作者：

jiezi

在

1. 什么是css hack技术

因为目前不同浏览器以及同一浏览器版本的不同导致同一页面源码显示成果不同，为了解决兼容性问题，满足用户应用体验，在满足公众浏览器的根底上为非凡浏览器编辑只有其所能解析的css，使得所有浏览器显示成果大抵统一。

1.1 应用弊病

减少代码复杂度，不易保护

1.2 利用场景

政府我的项目、学校我的项目等古老设施的开发才应用Hack，而当初的企业我的项目或电商我的项目不须要

2. 四大内核和五大支流浏览器

因为浏览器最次要的局部就是浏览器的内核，也称为渲染引擎，次要用来解释网页语法并渲染到网页上，决定了浏览器该如何显示网页内容以及页面的格局信息。同时不同浏览器应用的内核存在不同，而不同内核对网页的语法解释也是不同的。因而相熟内核以及不同浏览器应用的内核状况对网页开发大有用途。

2.1 四大内核

  1. Trident（也称IE内核）
  2. webkit
  3. Blink
  4. Gecko

2.2 五大支流浏览器

  1. IE

    1. 微软公司旗下浏览器，以IE和Windows捆绑的模式向市场扩大份额，因而目前装了Windows零碎的电脑都带有IE浏览器。
    2. Trident内核，也是俗称的IE内核

  2. Firefox

    1. Mozilla公司旗下浏览器
    2. Gecko内核，俗称Firefox内核

  3. Chrome

    1. google旗下的浏览器
    2. 统称为Chromium内核或Chrome内核，以前是Webkit内核，当初是Blink内核

  4. Safari

    1. 苹果公司旗下的浏览器
    2. Webkit内核

  5. Opera

    1. 挪威Opera Software ASA公司旗下的浏览器
    2. 最后是本人的Presto内核，起初是Webkit，当初是Blink内核；

注: 五大浏览器采纳的都是单内核，而随着浏览器的倒退当初也呈现了双内核。像360浏览器、QQ浏览器都是采纳双内核，具体如下：

  1. 360浏览器、猎豹浏览器内核：IE+Chrome（Blink）内核
  2. 搜狗、QQ浏览器：Trident(兼容模式) + Webkit（高速模式）
  3. 百度浏览器：IE（Trident）内核
  4. 2345浏览器内核：最开始是IE(Trident)内核，当初为：IE+Chrome内核

3. css hack分类以及应用

3.1 属性前缀法

  1. CSS款式属性名前加上一些只有特定浏览器能力辨认的hack前缀，以达到预期的页面展示成果

  2. 用法

    hack 写法 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
    * *color Y Y Y Y N Y N Y N Y
    + +color Y Y Y Y N Y N Y N Y
    – -color Y Y N N N N N N N N
    _ _color Y Y N Y N Y N Y N N
    # #color Y Y Y Y N Y N Y N Y
    \0 color:red\0 N N N N Y N Y N Y N
    \9\0 color:red\9\0 N N N N N N Y N Y N
    !important color:blue !important;color:green; N N Y N Y N Y N Y Y

    正文：S示意规范模式，Q示意兼容模式

  3. 用例（不思考兼容模式下）

    1. <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>practice</title>
    <style>
        p {
            *color: red;
        }
    </style>
</head>

<body>
<p>yangshi</p>
</body>

    只有当浏览器为IE6/7规范模式下字体色彩显示为红色，其余浏览器及其他IE版本不显示。即当某些特定浏览器显示成果因为版本起因须要非凡设置时应用。

    1.   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>practice</title>
      <style>
          p {
              color: red !important;
              color: green;
          }
      </style>
  </head>
  
  <body>
  <p>yangshi</p>
  </body>

      这个属性还是用的挺多的，因为IE6规范模式下不反对，因而以上状况IE6版本字体色彩为绿色，其余IE版本以及其余浏览器因为反对!import属性，因而不会被重写的color:green；笼罩掉。

3.2 选择器前缀法

  1. 针对一些页面体现不统一或者须要非凡看待的浏览器，在CSS选择器前加上一些只有某些特定浏览器能力辨认的前缀进行hack
  2. 网上资源图

  3. 用例：

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>practice</title>
    <style>
        *html p {
            color: green;
        }
    </style>
</head>

<body>
<p>yangshi</p>
</body>

    以上代码只对IE6无效，其余浏览器不显示

3.3 条件正文法（只对IE无效，且只在IE９包含IE9以下得版本无效）

  1. 语法：

    <!--只在IE９包含IE9以下得版本无效-->
<!--[if IE]>
这段文字只在IE浏览器中可见
<![endif]-->
    

<!--只在IE8版本无效--> // 其中 if IE num 示意 当IE版本满足IE num 时成立
<!--[if IE 8]>
这段文字只在IE8浏览器中可见
<![endif]-->
    

<!--只在IE8及以上版本无效--> // 其中 if gte IE num 示意IE版本满足大于等于IE num时成立
<!--[if gte IE 8]> //  gte示意大于等于，gt示意大于
这段文字只在IE8(包含)及以上浏览器中可见
<![endif]-->
    
  
<!--除了IE8版本以外得其余版本（此处示意ie9以及以下得其余版本）无效-->
<!--[if ! IE 8]>// if ! IE num 示意IE版本满足不等于IE num时成立，!示意逻辑非
这段文字只在除IE8以外的其余浏览器中可见
<![endif]-->
 
    
 <!--只在IE8版本无效-->
<!--[if  IE 8]>
这段文字只在IE8浏览器中可见
<![endif]-->

  2. 用例：

    1. html中应用

      <body>
<!--只在IE浏览器中无效-->
<!--[if IE ]>
<h2>这段文字只在非IE浏览器中可见</h2>
<![endif]-->
</body>

      在Chrome等其余浏览器关上时不会呈现以上文字，只有当IE9及以下的版本关上才会呈现以后文字

    2. css中应用

      <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>practice</title>
    <!--[if IE]>
    <style>
        p {
            color: #990011;
        }
    </style>
    <![endif]-->
</head>

<body>
<p>yangshi</p>
</body>

      在Chrome等其余浏览器关上时文字不会变色，只有当IE9及以下的版本关上文字才会变色

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章