关于浏览器兼容

1.什么是 CSS hack

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
**CSS Hack大致有三种表现形式 : **

  • css属性前缀法
  • 选择器前缀法
  • IE条件注释法

2.谈一谈浏览器兼容的思路

  • 1.要不要做
    产品的角度(产品的受众,受众的浏览器比例,效果优先还是基本功能优先)
    成本的角度(有无必要做某件事情)

  • 2.做到什么程度
    让哪些浏览器去支持哪些效果

  • 3.如何做
    1.根据兼容需求选择技术框架/库(Bootstrap (>=ie8),jQuery 1 (>=ie6), jQuery 2 (>=ie9),Vue (>= ie9)
    2.根据兼容需求选择兼容工具(html5shiv.js/respond.js/css reset/normalize.css/modernizr/postCSS)
    3.条件注释/css Hack/js 能力检测做一些修补

  • 4.关于浏览器兼容的应对策略(渐进增强和优雅降级)
    渐进增强 progressive enhancement
    概念:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    观点:“渐进增强”观点认为应关注于内容本身。
    内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
    优雅降级 graceful degradation:
    概念:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
    观点:“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。
    在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
    区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

3.浏览器兼容的写法

  • 属性前缀法(即类内部Hack)
    例如 IE6能识别-, 下划线, 星号,IE7能识别星号*,但不能识别-, 下划线,IE6~IE10都认识\9,但firefox前述三个都不能认识

     box{
     color: red;
     _color: blue; /*ie6*/
     *color: pink; /*ie67*/ 
     color: yellow\9; /*ie/edge 6-8*/
    }
    
  • 选择器前缀法
    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有效

  • 条件注释法
    这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式

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

4.以下工具/名词是做什么的

  • 条件注释
    条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现,并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。具体代码如上已给出。

  • IE Hack
    针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程

  • js 能力检测
    能力检测又称特性检测。能力检测的目的不是识别具体的浏览器,而是识别浏览器的能力。
    能力检测的目的应该是根据你需要的特性来选择问题的解决方案,而不是检测用户在用什么浏览器。而且在检测时要保证你要用到的能力确实存在,自己不要做过多的推测,代码也不要做过多的判断。
    两个重要的概念:
    第一个概念是先检测达成目的的最常用的特性。先检测最常用的特性,可以保证代码最优化,因为在多数情况下都可以避免测试多个条件。
    第二个概念是必须测试实际要用到的特性。一个特性存在,不一定意味着另一个特性也存在。

  • html5shiv.js
    IE 9之前的版本几乎不支持HTML5元素和其它HTML5特性。
    HTML5 Shiv支持在旧版Internet Explorer(IE9之前)中使用HTML5细分元素,并为Internet Explorer 6-9,Safari 4.x(和iPhone 3.x)和Firefox 3.x提供基本的HTML5样式。

  • respond.js
    响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js
    Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计。

  • css reset
    css reset是通过重新定义标签样式,把浏览器的默认样式覆盖掉,以便保持个浏览器渲染的一致性。相对暴力

  • normalize.css
    normalize.css是reset.css的替代方案,保留有用的浏览器默认样式,同时进行一些bug的修复。相对平和

  • Modernizr
    Modernizr是一套JavaScript 库,用来侦测浏览器是否支持 CSS3 或 HTML5 功能支持情况等。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。
    Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。

  • postCSS
    PostCSS是一个使用JS插件转换样式的工具。这些插件可以删除您的CSS,支持变量和混合,透明未来的CSS语法,内联图像等。
    PostCSS不是预处理器本身; 它不会转换CSS。事实上,它本身根本不做任何事。它所做的是提供一个CSS解析器和一个框架,用于创建可以分析,lint,处理资产,优化,创建回退,否则转换解析的CSS的插件。PostCSS将CSS解析为抽象语法树(AST),通过一系列插件将其传递,然后PostCSS核心为插件更改的树生成一个新的CSS字符串。。如果你熟悉JavaScript工具,那么你可以认为PostCSS 为CSS的Babel。
    PostCSS目前有200多个插件,其中很多在PostCSS GitHub页面上列出,而其他的可以在有用的PostCSS目录postcss.parts中找到。PostCSS可以集成在大多数构建工具中,包括Gulp,Grunt,webpack或npm。
    PostCSS被行业领导者使用,包括维基百科,Twitter,阿里巴巴和JetBrains。该 Autoprefixer PostCSS插件是最流行的CSS处理器之一。

5.一般在哪个网站查询属性兼容性?

http://browserhacks.com/
http://caniuse.com/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容