Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

浏览器兼容 #17

Open
HarleyWang93 opened this issue Apr 8, 2018 · 0 comments
Open

浏览器兼容 #17

HarleyWang93 opened this issue Apr 8, 2018 · 0 comments

Comments

@HarleyWang93
Copy link
Owner

什么是浏览器兼容问题？

同一份代码，有的浏览器效果正常，有的不正常

  • 不正常的原因是什么？(不支持? bug？)
  • 如何让它展示正常?(条件注释？ 单独Hack？)

为什么会有浏览器兼容问题？

  • 同一产品，版本越老 bug 越多
  • 同一产品，版本越新，功能越多
  • 不同产品，不同标准，不同实现方式

什么是 CSS hack？

  • 由于不同厂商的浏览器，比如 Internet Explorer,Safari,Mozilla Firefox,Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

谈一谈浏览器兼容的思路

要不要做

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

做到什么程度

  • 让哪些浏览器支持哪些效果

如何做

渐进增强和优雅降级
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

stackoverflow-渐进增强和优雅降级的区别

几种浏览器兼容的写法

  • 条件注释

eg：

<!--[if IE 6]-->
<p>You are using Internet Explorer 6.</p>
<![endif]-->
  • CSS 属性前缀

eg：

div{
            color:blue;
            *color:red; /*如果在IE6或者7中，字体颜色为红色，否则为蓝色*/
}
  • 选择器前缀（即选择器 Hack）

eg：

div\9{
                color:yellow
}
  • 条件注释结合选择器

eg：

<!DOCTYPE html>
    <!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
    <!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
    <!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
    <!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
    <!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
  • Modernizr工具
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
         postmessage no-websqldatabase no-indexeddb hashchange no-history 
   draganddrop no-websockets rgba hsla multiplebgs backgroundsize 
   no-borderimage borderradius boxshadow no-textshadow opacity 
   no-cssanimations no-csscolumns no-cssgradients no-cssreflections
   csstransforms no-csstransforms3d no-csstransitions fontface 
   generatedcontent video audio localstorage sessionstorage 
   no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
  • 浏览器兼容写法
transition: transform 1s;
-moz-transition: transform 1s; /* Firefox 4 */
-webkit-transition: transform 1s; /* Safari 和 Chrome */
-o-transition: transform 1s; /* Opera */

常见属性的兼容情况

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10

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

条件注释

  • 条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
        <!--[if IE 6]>
        <p>You are using Internet Explorer 6.</p>
        <![endif]-->
        <!--[if !IE]><!-->
        <script>alert(1);</script>
        <!--<![endif]-->
        <!--[if IE 8]>
        <link href="ie8only.css" rel="stylesheet">
        <![endif]-->

  • 使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。

  • IE10不再支持条件注释

项目 范例 说明
！ [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7

IE Hack

针对IE浏览器编写不同的CSS，使得在IE浏览器中也能得到我们想要的页面效果

js 能力检测

能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。

用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题，使用Javascript来使不支持HTML5的浏览器支持HTML标签。

让不支持 css3 Media Query 的浏览器包括 IE6-IE8 等其他浏览器支持查询。

早期的 CSS Reset 的作用就是清除所有浏览器默认样式，这样更易于保持各浏览器渲染的一致性。
这样暴力清零会带来一些问题，eg：

  1. *{ margin:0; padding:0; }会带来性能问题
  2. 使用通配符存在隐性问题
  3. 过渡的标签重置等于画蛇添足
  4. 过渡的标签重置导致语言元素失效

是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准；是在现代浏览器环境下对于CSS reset的替代。
该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
作用：

  1. 保护有用的浏览器默认样式而不是完全去掉它们
  2. 为大部分HTML元素提供一般化的样式
  3. 修复浏览器自身的bug并保证各浏览器的一致性
  4. 用一些小技巧优化CSS可用性
  5. 用注释和详细的文档来解释代码

一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。

一般在哪个网站查询属性兼容性？
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@HarleyWang93