大前端 - 跨浏览器测试 - 《Notes》

链接
为什么需要跨浏览器测试
决定需要支持的浏览器
常见HTML和CSS问题
JavaScript问题
Accessibility tools
Implementing feature detection
自动化工具或服务
其他

跨浏览器测试

Cross browser testing @MDN
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing

为什么需要跨浏览器测试

不同设备尺寸不同,性能不同
不同浏览器有对各种特性的支持不同
有的浏览器有缺陷

Users won’t switch browsers, they’ll switch sites
https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/

决定需要支持的浏览器

进行测试的策略
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies

对浏览器提供不同层级的支持:
A 级：普通/现代浏览器（仍在广泛使用）：需要彻底测试并提供全面支持。
B 级：较旧/较少的浏览器（少数用户还在使用）：测试并提供更基本的体验，以提供对核心信息和服务的完全访问。
C 级：稀有/未知浏览器：不进行测试，假设网站内容可以显示。在我们的防御性编码起效的情况下，用户可以访问到网页的全部内容。

参考浏览器份额:
http://gs.statcounter.com/
https://www.netmarketshare.com/browser-market-share.aspx

更进一步, 使用Google Analytics统计访问你网站的浏览器类型占比, 从而决定浏览器测试列表

常见HTML和CSS问题

首先确保自己的代码没有语法错误和逻辑错误
使用验证服务: W3C Markup Validation Service / W3C CSS Validation Service
使用Linter工具 (各IDE一般都内置了)
使用浏览器devtools debug

一个方便调试的chrome插件: Web Developer

HTML fallback

无法识别的HTML元素被浏览器视为匿名内联元素（有效内联元素，没有语义值，类似于<span>元素）

如<article>，<aside>等语义化标签, 可以给他们添加样式使其表现为想要的样子
aside, main, article, section, nav, figure, figcaption

复杂点的如<video>，<audio>和<canvas>等标签, 在开始和结束标记之间添加回退内容，不支持的浏览器将有效地忽略外部元素并运行嵌套的内容, 栗子:

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
  <!-- Flash fallback -->
  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
     <param name="allowfullscreen" value="true" />
     <param name="wmode" value="transparent" />
     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
  </object>
  <!-- Offer download -->
  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
</video>

CSS fallback

不支持的标签会被忽略
If a browser encounters a declaration or rule it doesn’t understand, it just skips it completely without applying it or throwing an error.

所以如下写法, 先写fallback:

background-color: #ff0000;
background-color: rgba(255,0,0,1);

CSS选择器
another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like :nth-of-type, :not, ::selection, etc.) work.

If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark’s Selectivizr library.

CSS prefixes
prefix-free JavaScript library 直接引入就行, 但是性能不好, 特别对大型页面

Another solution is to add prefixes automatically during development, and this (and other things besides) can be done using tools like Autoprefixer and PostCSS.

关于布局
使用特性检测, 比如对不支持flexbox的浏览器使用float

flex布局的适配
https://dev.opera.com/articles/advanced-cross-browser-flexbox/

响应式布局
media queries are not supported in IE 8 or less,
so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you’ll have to apply a media query polyfill to your page, like css3-mediaqueries-js, or Respond.js.

其他
使用normalize.css

IE conditional comments

<!--[if lte IE 8]>
  <script src="ie-fix.js"></script>
  <link href="ie-fix.css" rel="stylesheet" type="text/css">
<![endif]-->

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#IE_conditional_comments

https://www.sitepoint.com/internet-explorer-conditional-comments/

JavaScript问题

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript

不要使用浏览器UA检测
要使用特性检测, 检测特性是否支持, 若不支持, 提供替代方案

使用Polyfills
Modernizr’s list of HTML5 Cross Browser Polyfills is a useful place to find polyfills for different purposes.

Loading Polyfills Only When Needed

if (browserSupportsAllFeatures()) {
  // Browsers that support all features run `main()` immediately.
  main();
} else {
  // All other browsers loads polyfills and then run `main()`.
  loadScript('/path/to/polyfills.js', main);
}
function main(err) {
  // Initiate all other code paths.
  // If there's an error loading the polyfills, handle that
  // case gracefully and track that the error occurred.
}

或者使用三方服务栗如

https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,fetch,Symbol,Array.prototype.@@iterator

或者使用自动化工具自动检测代码进行polyfill

使用编译工具

比如babel

Accessibility tools

Deque’s aXe tool

Implementing feature detection

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection

自动化工具或服务

在线工具
http://blog.sae.sina.com.cn/archives/4515
There are also commercial tools available such as Sauce Labs, Browser Stack and LambdaTest

其他

Creating a cross-browser video player
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player

跨浏览器测试

链接