wepiao-edge

View Github Repository Open presentation in a new window

Huxpro

See all presentation from Huxpro

wepiao-edge

0 0

wepiao-edge

Keynote share: Wepiao & Edge

On Github Huxpro / wepiao-edge

Wepiao & Edge

聊聊微票儿的浏览器兼容实践

黄玄 / 盖玉龙 Microsoft Edge Salon @July 25, 2015

黄玄

微信电影票前端工程师

前阿里巴巴前端工程师 Blog / @Huxpro / GitHub / 知乎

What is Wepiao?

微票儿 = 微信电影票 + QQ 电影票 + 活动票

Products

Desktop Web Mobile Web Webview Native App wepiao.com wepiao.com Wechat/QQ 微票儿

Mobile Web

Modern Web

CSS Compatibility

user agent stylesheet

  • font-family
html {
    font-family: sans-serif;
}

:focus & outline

button:focus {
    outline: 0;
}

Vendor Prefix

Autoprefixer

(PostCSS)

Autoprefixer - Write Pure CSS

.foo {
    transtion: transform 1s;
}

.foo {
    -webkit-transition: -webkit-transform 1s;
            transition: transform 1s
}

Work with preprocessors (Sass, LESS)

Autoprefixer - Flexbox, Filter, etc.

.bar {
    display: flex;
}

.bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Autoprefixer - Only Actual Prefixes

Can I Use

Autoprefixer - work with Build Tool

// work with Gulp
gulp.task('autoprefixer', function () {
    var postcss      = require('gulp-postcss');
    var sourcemaps   = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer-core');

    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dest'));
});

Autoprefixer - work with Build Tool

// work with Webpack
var autoprefixer = require('autoprefixer-core');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

Autoprefixer

Interactive Demo

JS Compatibility

ES6 Awesome!

http://dev.modern.ie/platform/status/

but other browser...

Babel - JavaScript Compiler

Use next generation JavaScript, today.

ES6 Class

//ES5
function Point(x, y){
  this.x = x;
  this.y = y;
}
var p1 = new Point(100, 100);

//ES6
class Point{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
}
var p1 = new Point(100, 100);

Demo time

ES6 + React + JSX

var React = require("react");

class HelloMessage extends React.Component {
    render() {
        return <div> Hello {this.props.name} </div>
    }
}

React.render(
    <HelloMessage name="ES6" />,
    document.body
)

Babel

Free to use JavaScript Next!

Dev.modern.ie

modern.ie

Prefetch and Prerender

chrome internals

Windows Tiles

<meta name="msapplication-TileColor" content="#123456"/>
<meta name="msapplication-square150x150logo" content="square.png"/>

Too much meta tags...

<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Lighten">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">

<!-- iOS icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/touch/apple-touch-icon-57x57-precomposed.png">

<!-- Generic Icon -->
<link rel="shortcut icon" href="images/touch/touch-icon-57x57.png">

<!-- Chrome Add to Homescreen -->
<link rel="shortcut icon" sizes="196x196" href="images/touch/touch-icon-196x196.png">

NodeJS & Jade

doctype html
html
    head
        // meta
        include ./pagelets/head/meta.jade

Little Issues

Difficult to debug on Win10 Mobile

盖玉龙

微信电影票前端工程师

GitHub / 知乎

Desktop Web

IE TROUBLE!

TROUBle LIST

问题 解决方案 ie6.0 margin double display：inline ie6.0 line-heigth double overflow:hidden; opacity filter：alpha（opacity=80） ie6 min/max-height hack方法 overflow bug ....... z-index bug ....... png bug ....... ....... .......

Edge

Edge

  • 没有历史负担
  • 更快的速度、更丰富的浏览体验
  • 支持扩展程序
  • 更个性化
  • 更有沉浸感

Share point

  • modernizr.js
  • polyfill/shim
  • jshint.js
  • Javascript library support for the browser
  • Responsive Design
  • normalize.css
  • hack
  • HTML COMPONENT(.htc)

MODERNIZR

UA探测 VS 功能检测

  • User Agent 探测 (Sniffing)(uatools.js)

    复杂的逻辑

    很多浏览器UA互相模仿

  • Microsoft Edge （OS10159）

    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10159

  • Chrome

    Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36

var browser={
        versions:function(){
               var u = navigator.userAgent, app = navigator.appVersion;
               return {//移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                    iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
        }()
    }

功能检测工具 - Modernizr

        if (Modernizr.csstransitions) {
            // Browser supports CSS Transitions
        }
        if (!Modernizr.canvas) {
            loadCanvasPolyfill();
        }

POLYFILL

WATH POLYFILL

  • polyfill 是 shim 的一种

  • polyfill 特指 shim 成的 api 是遵循标准的

POLYFILL LIST

  • 比如你想让IE6-8支持媒体查询

    respond.js

  • 比如你想让Chrome/Safari支持Pointer Event

    handjs

  • 比如你想让IE6-9支持html5标签

    html5shiv

JSHINT

  • 检查javascript代码错误和问题的工具
  • 用node安装
  • sublime里装jshint插件
  • http://jshint.com/

Javascript library support for the browser

jQuery88

zepto

Responsive Design

  • Meta标签
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 对IE8或者更早的浏览器media-queries.js respond.js

  • 来为 IE添加Media Query支持。

    @charset "UTF-8"

    @media screen and (max-width: 960px) {

    }
    @media screen and (max-width: 768px) {

    }
    @media screen and (max-width: 550px) {
    }
    @media screen and (max-width: 320px) {
    }

微票儿

Normalize.css

Normalize vs Reset

  • Normalize.css 保护了有价值的默认值

  • Normalize.css 修复了浏览器的bug

  • Normalize.css 不会让你的调试工具变的杂乱

  • Normalize.css 是模块化的

  • Normalize.css 拥有详细的文档

CSS Reset 是革命党
Normalize.css 是改良派

HACK

不得不出手时

HTML COMPONENT(.htc)

http://css3pie.com/

modern.ie

caniuse.com

Question

Hey, don't be shy.

huangxuan.me/wepiao-edge

THE END

Interested in job opportunity? Email us.
黄玄huangxuan@wepiao.com
盖玉龙gaiyulong@wepiao.com
Wepiao & Edge 聊聊微票儿的浏览器兼容实践 黄玄 / 盖玉龙 Microsoft Edge Salon @July 25, 2015