• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

新版本 Chrome 57发布!

作为一个Google死忠粉,时刻关注ChromeChromeTools动向,17年三月份Chrome 57新版本终于发布了!第一时间升级,来看看更了什么;

CSS grid layout

新版本 Chrome 57发布!

Flexbox是一个很好用的布局策略,它可以布局复杂的分布格式,但它只能做一维布局,Chrome 57新加 display:grid 支持,display:grid是个新的CSS Grid 布局规则,添加一个强大的新工具,创建二维网格布局系统,响应用户界面设计优化(Chrome 57 adds support for display: grid– the new CSS Grid Layout specification, adding a powerful new tool for creating two-dimensional grid-based layout systems, optimized for responsive user interface design,这里的one dimension和two-dimensional博主还有一点疑问…);

网格中的元素可以跨越多个列或行,在一个CSS网格区域也可以被命名,使布局代码更容易理解;

Media Session API

新版本 Chrome 57发布!

Web应用程序缺少的功能之一就是能够在移动设备上体验良好的深度集成,在Chrome(Android版)中,用户可以使用新的Media Session API来定制来自多媒体内容的锁屏和通知;

通过向浏览器提供有关正在播放的内容的metadata,可以创建丰富的锁屏消息,其中包括标题,艺术家,专辑名称和艺术品等信息。还可以监听和响应用户对通知本身执行的操作,例如寻求或跳过;

Let's see how to customize this media notification by setting some media session metadata such as the title, artist, album name, and artwork with the Media Session API:

// When audio starts playing...
if ('mediaSession' in navigator) {

  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });
}

这部分内容做媒体播放相关的可以深入研究下,案例Samples & demos

其他更新

  • 改进Payment Request API;

  • 可以通过caret-color属性指定文本输入光标的颜色;

  • 可以通过 text-decoration属性指定视觉效果,如线条颜色和样式;

  • Fetch API响应类现在支持.redirected属性,以帮助避免不可信的响应并降低打开的重定向的风险;

  • All -webkit- prefixed IndexedDB global aliases have been removed, after their deprecation in M38;

  • 新的padStart和padEnd格式化方法,当控制台输出或打印具有固定数字数字时,简化字符串填充;

refer:https://developers.google.com/web/


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明新版本 Chrome 57发布!
喜欢 (1)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 好久没来了,我来逛逛。
    知更鸟4.2破解版2017-04-02 03:34 回复 Windows 7 | Internet Explorer 9.0
  2. 学习使人进步,到此拜读!
    衣皇后2017-03-31 15:31 回复 Windows 7 | 搜狗浏览器 2.X
  3. 今天试了下火狐,发现百度都打不开说是证书问题,我也是醉了,只能用国内的浏览器了。谷歌很久不用了都。
    灰常记忆2017-03-26 23:07 回复 Windows 7 | Chrome 50.0.2661.102
    • 百度...不至于吧,可能是浏览器设置了说明,Chrome的硬伤是不能在线更新
      薛 陈磊2017-03-27 09:26 回复 Windows 7 | Chrome 57.0.2987.98
  4. 感觉不错哦,认真拜读咯!
    增达网QQ-875244802017-03-26 12:50 回复 Windows 7 | 搜狗浏览器 2.X
  5. 来学习一下 真是不错 可以很牛
    个人投资理财论坛2017-03-24 16:11 回复 Windows 7 | Chrome 45.0.2454.101
  6. 朋友 交换链接吗
    sugarhosts2017-03-16 08:57 回复 Windows 8.1 | Chrome 45.0.2454.101
    • 抱歉优先考虑跟前端有关的站点
      薛 陈磊2017-03-16 09:09 回复 Windows 7 | Chrome 57.0.2987.98