zoukankan      html  css  js  c++  java
  • CSS hack

    虽然CSS hack技术有风险,不推荐使用,但还是有必要了解一下。

    一、什么是CSS hack?

    我的理解就是针对不同浏览器/不同版本,写相应CSS代码,这一过程叫做CSS hack。

    二、CSS hack原理

    由于不同浏览器/不同版本,对CSS的理解会有差异,以及CSS优先级的关系,我们可以据此针对不同的浏览器/版本写不同的CSS。

    三、CSS hack分类

    CSS hack主要可分为:选择器hack,CSS属性hack和IE条件hack。

    1、选择器hack

    选择器hack就是在选择器前加上一些只有特定浏览器才能识别的前缀进行hack。

    比较常用的有以下几种:

    • *html    *前缀只对IE6生效
    • *+html    *+前缀只对IE7生效
    • @media screen9{...}只对IE6/IE7生效
    • @media screen {body { background: red; }}只对IE8有效
    • @media screen\,screen9{body { background: red; }}只对IE6/7/8有效
    • @media screen {body { background: red; }} 只对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有效
    • :root body{background:red9;}只对IE9有效

    2、CSS属性hack

    CSS属性hack就是在CSS属性名前加上一此只有特定浏览器才能识别的前缀进行hack。

    下面是IE浏览器CSS hack对照表:

    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 N N N N N
    + +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
    color:red N N N N Y N Y N Y N
    9 color:red9 N N N N N N Y N Y N
    important color:red !important N N Y N Y N Y N Y Y

    在标准模式中:

    "-"减号是IE6特有的

    “9”是IE6~IE10都有效

    ""是IE8~IE10的hack(最新opera也识别)

    "9"是IE9/E10的hack

    由于浏览器对一些CSS hack存在交叉认识,所以需要通过覆盖的方式来实现对不同浏览器的hack。如下例子:

        #test   
         {   
        color
    :blue; /*firefox*/ color:red9; /*all ie*/ color:yellow; /*ie8*/ *color:pink; /*ie7*/ _color:orange; /*ie6*/ } :root #test { color:purple9; } /*ie9*/ @media all and (min-0px){ #test {color:black;} } /*opera 如果不加,firefox,chrome,safari也都认识*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {color:gray;} } /*chrome and safari*/

    3、IE条件hack

    这种方式是IE浏览器专有的hack,也是微软官方推荐的hack方式:lt小于,gt大于,lte小于等于,gte大于等于,!非。

    针对所有IE:<!--[if IE]>针对所有IE<![endif] -->

    只针对IE6:<!--[if IE 6]>只针对IE6<![endif]-->

    针对IE7及以下版本:<!--[if lte IE 7>针对IE7及以下版本<![endif]-->

    针对IE8以上版本:<!--[if gt IE 8>针对IE8以上版本<![endif]-->

    针对非IE:<!--[if !IE]>针对非IE<![endif] -->

  • 相关阅读:
    整理公共基础库子系统和系统属性组件
    鸿蒙轻内核M核源码分析系列六 任务及任务调度(1)任务栈
    HarmonyOS三方件开发指南(19)-BGABadgeView徽章组件
    鸿蒙的DFX子系统
    安卓to鸿蒙系列:ButterKnife(一)
    基于Neptune开发板的键盘蓝牙模块DIY指南
    徒手撸一个Spring Boot中的starter
    这三道最基础的java面试题,你真的答得上来吗?
    奇葩java迭代器面试题,还真有很多人踩坑
    15道类和对象面试题,快看看自己会几道
  • 原文地址:https://www.cnblogs.com/aaron-shu/p/4075021.html
Copyright © 2011-2022 走看看