关于css:hack技术

69次阅读

共计 2912 个字符，预计需要花费 8 分钟才能阅读完成。

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 无效，且只在 IE9包含 IE9 以下得版本无效）

  1. 语法：

    <!-- 只在 IE9包含 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 及以下的版本关上文字才会变色

正文完
css
发表至： css
2021-02-03
 0
关于css:前端面试实录CSS篇最近一周
关于css:CSS-实现树状结构目录
关于css:hack技术
关于css:8月12日京津冀暴雨预报背后的海量信息挖掘