SF Pro 项目中的css hack

各位看官老爷：

若是你常常去 Apple 的官网转转的话，你会发现 如今的官网变得更加迷人，缘由是咱们在2014年开始成立新的font-team ， 并在2017年年初的时候采用了新的字体 。 下面描述的是如何在不用js的状况下对万恶的 IE 浏览器进行兼容。

经过css仅针对ie8和ie11进行单独的字体定义

简单介绍一下原理：
css hack技术主要有三种方式：
属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对全部IE(注：IE10+已经再也不支持条件注释)： ，针对IE6及如下版本： 。这类Hack不只对CSS生效，对写在判断语句里面的全部代码都会生效。

SF Pro项目中的ipad首页出现问题，须要对它的 <百万app> section部分进行IE11下的单独定义字体，个人解决思路是：
首先利用ipad/home/font.css来进行css的hack，通常状况下，并不须要单独对ie11进行判断。一开始我错误的使用了if条件来将IE11分离出来，测试多遍后才发现这种方法是无效的，

下面是正确的IE的if判断,这种方式是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中写只针对IE11的hack，搜遍了整个网络，万般无奈之下来到了overflow stack， 在那里得到了我想要的答案：

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {

　　　　.section-ipad-apps .section-headline:lang(zh-CN) {
"SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;}
　　}

经过特殊的选择器来达到只针对IE11的css 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有效

还有属性前缀法，不复杂，你们网上搜一搜你就能搜到

除此以外，还有CSS3选择器结合JavaScript的Hack，详情请参考CSDN freshlover的博客专栏《史上最全CSS Hack方式一览》