• 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 screen9{...}只对IE6/7生效
    @media screen {body { background: red; }}只对IE8有效
    @media screen,screen9{body { background: blue; }}只对IE6/7/8有效
    @media screen {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-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方式一览》

    Damao Zhang Apple HTML Developer RM 2330, ShangDu SOHO, South Tower, N.8 DongDaQiao Road ChaoYang District Beijing 100020 O: +86 10 5869 3315 M: +86 186 3351 1769 www.mullenloweprofero.com
  • 相关阅读:
    [Linux]
    [Nginx]
    [Nginx]
    [Linux]
    [Linux]
    [Linux]
    [Linux]
    [Linux] -Docker修改空间大小
    [Linux]
    [MySql]
  • 原文地址:https://www.cnblogs.com/damaochina/p/7059910.html
Copyright © 2020-2023  润新知