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方式一覽》