网页平台(Web Platforms) / 浏览器须知

  1. 网页平台包含浏览器与这些带有浏览网页功能的(社交)软件
    1. 浏览器是一类专门用于检索并展示万维网信息的软件
    2. 部分社交软件等诸如微信、Facebook等也可以浏览网页的功能,但是由于这些软件没有给用户提供友好且开放的导航栏等的原因,我们不称之为浏览器。值得注意的是,这些“伪浏览器”上发生的访问量占比不了
  2. 浏览器市场份额事宜
    1. 数据来源: StatCounter || netmarketshare
      • 注:a)各家数据提供商的统计方法不一,数据仅供参考;b)不同网页的用户偏好也不一样。最好的做法是统计自家网站近几个月的用户的请求头UserAgent的数据。
    2. iOS上的浏览器内核都是Webkit,因为苹果公司不允许iOS上的浏览器使用自己的引擎
    3. Android上,Chrome是主流浏览器。三星的自带浏览器是自制的,基于Chromium内核,它们的占比也不小。LG的跟三星一样,但是占比较小
    4. 阿里巴巴旗下的UC浏览器在中国大陆的用户不少。UC跟Opera Mini(印度用户不少)一样属于Proxy Browsers(代理浏览器)。这种浏览器是工作原理是:用户向浏览器厂家请求网页内容,厂家下载并压缩网页内容,然后将数据发送给用户。这样可以省流量,但是会降低JavaScript的性能。Kindle Fire上的Amazon Silik也是Proxy Browser
  3. 浏览器开发情况
    1. Microsoft Edge Web platform Status
    2. Chrome Platform Status
    3. Firefox Platform Status

好用的SVG替補(fallback)

SVG格式的主要优势有:
1)可复用的完美像素;
2)比起一般网络图片格式,SVG格式占空间更小。值得一提的是,CSS的gradient也能做很多东西,Bennett Feely在他的博客上有很棒的演示
主要缺点有:
1)浏览器支持不足。

好用的SVG替补方法有:

  • <img>法:
<img 
    src="image.svg" 
    onerror="this.src='image.png'; this.onerror=null;">
  • <object>法:
<object 
    type="image/svg+xml" 
    data="svg-ok.svg">
    <img 
        src="svg-no.png" 
        alt="No SVG support">
</object>
  • CSS法:
body{ 
    background: url(fallback.png); 
    background: url(background.svg)
    , linear-gradient(transparent, transparent);
}
  • JavaScript法:
  1. SVGeezy
  2. SVGInjector
  3. Grunticon

是的,我的意思是,用Grunticon就好了。

另外,我们也应该给读屏器(screen reader)们备注一下:

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title">
    <title>The content here will be read by a screen reader if any</title>
    <circle cx="100" cy="100" r="50"/>
</svg>

ref 

  1. CSS-Tricks
  2. Creating Web Icons with SVG by  MOR10