前端中的hack是什么意思?常见的hack技术以及以及hack技术的利弊

前端中的hack,很多人的回答如下:

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果

总之.就是一句话,
针对不同浏览器编写带有前缀的css 就是 css hack,也就是大家所说的前端hack了
举个例子:

.table .table-disabled {
    color: #e4eaec;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

css hack原理

针对不同的浏览器编写不同的样式代码

css hack方式

1. 属性前缀法(类内部hack)

width:100px;
+width:100px; //IE6 IE7
*width:100px; // IE6 IE7
width:200px/9  //IE6~IE10

不同浏览器兼容的代码

  -moz-transform: rotate | scale | skew | translate ; //firefox3.5+
  -webkit-transform: rotate | scale | skew | translate ; //Webkit内核浏览器
  -o-transform: rotate | scale | skew | translate ; //Opera
  -ms-transform: rotate | scale | skew | translate ; //IE9
   transform: rotate | scale | skew | translate ;//标准模式

2. 选择器前缀法(选择器hack)

*html *前缀只对IE6生效 
*+html *+前缀只对IE7生效 
@media screen\9{...}只对IE6/7生效 
@media \0screen {body { background: red; }}只对IE8有效
 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 
 @media screen\0 {body { background: green; }} 只对IE8/9/10有效
  @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body { background: orange; 
  }} 只对IE10有效

3. 条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

css hack弊端

hack其实相当于是欺骗浏览器的行为,在解决浏览器兼容性方面,代码编码的复杂度变高,容易出现编写了一堆代码后,出现新的不同浏览器间的兼容性问题.所以不太推荐通过hack的方式解决浏览器兼容问题.

---

参考链接:
https://www.jianshu.com/p/a65486c56d19.
https://www.cnblogs.com/mumble/p/4576489.html.